Understanding HTML Tags and Elements

When I first started learning web development, I kept mixing up "tags" and "elements." Someone would say "add a paragraph element," and I'd wonder if they meant the <p> thing or something else entirely. Turns out, the distinction is simple once someone explains it properly.

HTML Is the Skeleton

Every webpage you've ever visited is built on HTML. It's not about colors or fonts or animations — that's CSS and JavaScript. HTML is purely about structure. What exists on the page. What order things appear in. What's a heading, what's a paragraph, what's a link.

Think of building a house. HTML is the frame — the walls, the rooms, the doors. CSS is the paint and furniture. JavaScript is the electricity that makes things move.

You can't decorate a house that doesn't exist. So HTML comes first.

What's a Tag?

Tags are how you write HTML. They're instructions wrapped in angle brackets that tell the browser what to create.

<p>This is a paragraph.</p>

Let's break this down:

• <p> is the opening tag — it says "a paragraph starts here"
• </p> is the closing tag — the slash means "the paragraph ends here"
• The text between them is the content

Most HTML follows this pattern: open, content, close. The browser reads the opening tag, knows what kind of element to create, and collects everything until it hits the closing tag.

Tags vs Elements: The Actual Difference

This confused me for a while, so let me be clear.

A tag is just the bracket part — <p> or </p>.

An element is the whole package — the opening tag, the content inside, and the closing tag together.

When someone says "add a paragraph element," they mean write the full thing: opening tag, content, closing tag. When someone says "check the closing tag," they mean just that </p> part.

Small distinction, but it helps when reading documentation or following tutorials.

Self-Closing Tags

Not every tag needs a closing partner. Some elements don't have content inside — they just exist.

<img src="photo.jpg" alt="A photo" />
<br />
<hr />
<input type="text" />

These are called void elements or self-closing tags. An image doesn't wrap around text. A line break is just a break. There's nothing to close because there's nothing inside.

The trailing slash (/>) is optional in HTML5, but I include it out of habit. Makes it clear the tag is complete on its own.

Block vs Inline

Here's something that tripped me up early on: not all elements behave the same way visually.

Block elements act like building blocks. They start on a new line and stretch to fill the available width. Stack them, and they pile up vertically.

Inline elements flow within text. They sit side by side, only taking up as much space as their content needs.

This matters when you start styling. Ever wonder why your link isn't centering the way a div does? It's because links are inline by default. Different rules apply.

Tags You'll Use Every Day

You don't need to memorize all hundred-something HTML tags. Here are the ones that show up constantly:

<h1>Main heading</h1>
<h2>Subheading</h2>
<p>A paragraph of text.</p>
<a href="https://example.com">A link</a>
<img src="image.jpg" alt="Description" />
<div>A generic container</div>
<span>Inline text wrapper</span>
<ul>
  <li>List item</li>
</ul>

These cover most of what you'll need for basic pages. More specialized tags exist for forms, tables, media, and semantic structure, but master these first.

The Best Way to Learn

Open any webpage. Right-click. Hit "Inspect" or "View Page Source." You'll see HTML everywhere. Real websites built by real developers.

Look at how headings are structured. See how links are nested inside navigation. Notice how divs group related content.

Reading code in the wild taught me more than any tutorial. The syntax becomes familiar. The patterns start to make sense. And when something breaks, you know exactly where to look.

---