HTML Lesson 4 – HTML Elements and Tags | Dataplexa

LESSON 4

HTML Elements and Tags

Learn how HTML tags create the building blocks of every webpage

HTML tags are like labeled boxes that hold different types of content. Every piece of text, image, or button on a webpage lives inside these boxes. When you see bold text or a clickable link, that's an HTML tag doing its job. Alex wants to add their name as a heading to their portfolio. But which tag should they use? That depends on what the content means and how it should look.

What Are HTML Elements?

An HTML element is everything from the opening tag to the closing tag, plus all the content in between. Think of it as the complete package — the box, the label, and whatever's inside. Here's the anatomy of a complete HTML element:

<h1>

Alex Chen

</h1>

Opening Tag

Content

Closing Tag

The opening tag tells the browser "start doing something special here." The closing tag says "okay, stop doing that special thing." Everything between them gets the special treatment.

Common HTML Tags

Every tag has a specific job. Some make text bigger, others create links, and some hold images. Here are the ones you'll use most often.

Heading Tags

Headings organize content from most important to least important. They're numbered 1 through 6.

<!-- Alex's portfolio homepage headings -->
<h1>Alex Chen</h1>
<h2>Front-End Developer</h2>
<h3>Recent Projects</h3>
<h4>Weather App</h4>
<h5>Built with JavaScript</h5>
<h6>Completed: March 2024</h6>

What Happened?

Each heading gets smaller as the number goes up. The browser applies different font sizes automatically — h1 is huge, h6 is tiny. Search engines use these to understand your page structure.

Paragraph and Text Tags

Most content on the web is text. These tags handle different types of text formatting.

<!-- Alex's about section text -->
<p>I'm a <strong>passionate developer</strong> who loves creating <em>beautiful websites</em>.</p>
<p>My favorite tools include <code>JavaScript</code> and <code>React</code>.</p>
<p><small>Portfolio last updated: March 2024</small></p>

What Happened?

Each paragraph creates a new block. The strong tag makes text bold, em makes it italic, code gives it a monospace font, and small makes it smaller.

Container Tags

Some tags don't change how content looks — they just group things together. These are called container tags.

<!-- Alex's portfolio project card -->
<div>
  <h3>Weather Dashboard</h3>
  <p>A responsive weather app built with vanilla JavaScript</p>
  <span>Status: Complete</span>
</div>

What Happened?

The div tag groups everything together but doesn't change the appearance. The span tag works inline with other text. These are invisible organizers.

Block vs Inline Elements

HTML elements behave in two main ways. Block elements take up the full width and start on a new line. Inline elements sit next to each other on the same line.

Block Elements

Take full width, stack vertically

h1, p, div, header, section

Inline Elements

Flow with text, sit side by side

span, strong, em, code, a

Here's how they look in action:

<!-- Alex mixing block and inline elements -->
<h2>About Alex</h2>
<p>I'm a <strong>creative developer</strong> and <em>problem solver</em>.</p>
<p>Skills: <code>HTML</code> <code>CSS</code> <code>JavaScript</code></p>

Notice how the heading and paragraphs stack up (block behavior), but the inline elements stay on the same line as the surrounding text.

Self-Closing Tags

Most HTML tags come in pairs — an opening tag and a closing tag. But some tags don't need content inside them, so they close themselves.

<!-- Alex adding line breaks and horizontal rules -->
<h3>Contact Alex</h3>
<p>Email: alex@example.com</p>
<p>Phone: 555-0123<br>
Available weekdays</p>
<hr>
<p>Social Media Links Below</p>

What Happened?

The br tag creates a line break — like pressing Enter. The hr tag draws a horizontal line across the page. No closing tags needed.

Common self-closing tags include `br` (line break), `hr` (horizontal rule), `img` (images), and `input` (form fields). We'll explore images and forms in upcoming lessons.

Nesting Elements

You can put HTML elements inside other HTML elements. This is called nesting. It's like putting smaller boxes inside bigger boxes.

<!-- Alex's portfolio project with nested elements -->
<div>
  <h3><strong>Featured Project:</strong> Task Manager</h3>
  <p>
    Built with <em>modern JavaScript</em> and includes:
    <strong>drag-and-drop functionality</strong>.
  </p>
</div>

Nesting Rule

Tags must close in the opposite order they opened. If you open A then B, you must close B then A. Think of it like parentheses in math — they have to match up perfectly.

Common Mistakes to Avoid

Everyone makes these mistakes when starting with HTML. Here are the big ones:

Mistake	Wrong	Right
Forgetting closing tags	`<p>Hello world`	`<p>Hello world</p>`
Wrong nesting order	`<p><strong>Bold</p></strong>`	`<p><strong>Bold</strong></p>`
Adding closing tags to self-closing elements	`<br></br>`	`<br>`
Using wrong tag types	`<h1>Title</h1><h1>Subtitle</h1>`	`<h1>Title</h1><h2>Subtitle</h2>`

Your browser is pretty forgiving and will try to fix small mistakes. But clean HTML makes your life easier and helps other developers understand your code.

Practice building Alex's portfolio step by step. Start with basic headings and paragraphs, then experiment with nesting different elements inside each other. The browser will show you immediately if something looks wrong.

Up Next: HTML Attributes

Learn how to add extra information and functionality to your HTML tags

← Previous Course Index Next →