Understanding HTML Tags and Elements

The first time I wrote HTML, I didn't think of it as programming. I was in school, messing around with a website builder, and someone showed me I could "view source" on any webpage and see the code behind it. I right-clicked on a Wikipedia page, hit "View Page Source", and was greeted by thousands of lines of angle brackets and words I didn't understand.

I closed the tab immediately.

A year later, I actually sat down to learn it properly. And what surprised me most was how simple the rules are. Not the entire HTML spec — that's enormous. But the core idea. The mental model behind every tag and every element. Once that clicked, reading HTML source code went from intimidating noise to something I could actually parse.

This blog is that mental model. If you've never written HTML before, this is where you start.

What HTML Is

HTML stands for HyperText Markup Language. Ignore the name. Here's what it actually is.

Think about a physical newspaper. Before the design team adds fonts, colors, or layout — before any of that — a journalist writes the content. They mark up their article: "this is the headline", "this is the opening paragraph", "this is the pull quote", "this is the caption for the photo."

HTML does the same thing for webpages. It's a markup language that lets you describe the structure and meaning of content. "This is a heading", "this is a paragraph", "this is a link", "this is an image." No colors, no fonts, no animations — that's CSS's job. HTML just describes what things are.

Every webpage on the internet — every single one — has HTML as its foundation. When your browser loads google.com, it receives an HTML file, reads it top to bottom, and builds the page structure from it. CSS then styles it. JavaScript then adds interactivity. But the skeleton — the structure — is always HTML.

What an HTML Tag Is

An HTML tag is a label wrapped in angle brackets.

<p>

That's a tag. The p inside tells the browser what kind of element this is — in this case, a paragraph. The angle brackets < > tell the browser "this is a tag, not content."

Tags come in pairs. An opening tag marks where something starts:

<p>

A closing tag marks where it ends. It looks the same but has a forward slash before the name:

</p>

Everything you write in HTML uses this pattern. You open something, put content inside, and close it.

Think of tags like parentheses in a sentence — they wrap around something to say "this block belongs together." The opening tag is the left parenthesis, the closing tag is the right parenthesis. Your content goes in between.

Opening Tag + Content + Closing Tag = Element

Here's a distinction that confuses beginners for longer than it should: the difference between a tag and an element.

A tag is just the label itself — <p> or </p>.

An element is the full thing — the opening tag, the content, and the closing tag together.

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

Here, <p> is the opening tag. </p> is the closing tag. This is a paragraph. is the content. The entire line — all three parts — is the element.

An analogy that helped me: a tag is like a bracket [ or ]. An element is like the full expression [sentence goes here]. The brackets alone aren't useful — they only make sense when they're wrapping something.

<!-- Tag: just the label -->
<h1>

<!-- Element: the whole thing -->
<h1>Hello, World!</h1>

When someone says "add a paragraph element to the page," they mean write the full <p>...</p> structure with content inside. When they say "the closing tag," they mean just the </p> part.

Simple distinction. Genuinely useful once you're reading error messages or documentation that refers to one or the other specifically.

Self-Closing Elements: The Tags With No Pair

Not every element has content between an opening and closing tag. Some elements don't have any content at all — they just exist and do their job.

These are called void elements or self-closing elements.

An image is a good example. The image itself is the content. There's no text to wrap:

<img src="photo.jpg" alt="A landscape photo">

No closing </img>. The element is complete on its own.

A line break is another:

<br>

You'll sometimes see these written with a trailing slash for XHTML compatibility:

<img src="photo.jpg" alt="A landscape photo" />
<br />

Both are valid in modern HTML. The important thing is knowing that these elements don't need — and shouldn't have — a separate closing tag.

Common void elements you'll use regularly:

<img>      — images
<br>       — line break
<hr>       — horizontal rule (a dividing line)
<input>    — form input field
<meta>     — page metadata in the <head>
<link>     — linking external resources like CSS files

Block-Level vs Inline Elements

Here's one of the most practically useful distinctions in HTML, and one that a lot of beginner resources skip over.

Elements in HTML behave in one of two ways when the browser renders them:

Block-level elements take up the full width of their container and always start on a new line. If you put two block elements next to each other in your HTML, they'll stack vertically.

Inline elements only take up as much width as their content needs. They don't force a new line. Multiple inline elements sit next to each other horizontally.

Here's a concrete example. <p> is a block element. <strong> is an inline element:

<p>I really <strong>love</strong> writing HTML.</p>

This renders as a single paragraph where the word "love" is bold. The <strong> element doesn't break the line — it just wraps around the word inline.

Compare that to two block elements:

<h1>Main Heading</h1>
<p>A paragraph below the heading.</p>

The heading and the paragraph each sit on their own line, stacked vertically — even if you wrote them on the same line in your HTML.

Why does this matter? Because understanding this behavior saves you from fighting the browser when you're trying to lay out a page. When something isn't sitting where you expect it, it's often because you're treating a block element like an inline element or vice versa.

Common block-level elements:

<div>     — generic container
<p>       — paragraph
<h1>–<h6> — headings
<ul>      — unordered list
<ol>      — ordered list
<li>      — list item
<section> — document section
<article> — self-contained content

Common inline elements:

<span>    — generic inline container
<a>       — link
<strong>  — important text (bold)
<em>      — emphasis (italic)
<img>     — image (technically inline by default)
<code>    — inline code

Commonly Used HTML Tags

Let me walk through the tags you'll reach for in almost every project.

Headings — <h1> through <h6>

Headings structure your content hierarchically. <h1> is the biggest, most important heading — typically the page title. <h6> is the smallest.

<h1>My Portfolio</h1>
<h2>Projects</h2>
<h3>Project One</h3>

Don't pick heading levels based on how big you want the text to look. Pick them based on hierarchy. Visual size is CSS's job. Heading level communicates meaning — to the browser, to screen readers, to search engines.

Paragraph — <p>

The most-used tag in any content-heavy page. Every block of text gets wrapped in <p>.

<p>This is the first paragraph on my about page.</p>
<p>This is the second paragraph. Browsers add spacing between them.</p>

Links — <a>

The "a" stands for anchor. The href attribute is where the link points:

<a href="https://github.com">Visit my GitHub</a>

Links are inline by default. You can put them inside paragraphs, headings, list items — anywhere.

Images — <img>

Two attributes are essential: src (the image path) and alt (a text description for screen readers and when the image fails to load):

<img src="profile.jpg" alt="Priyanshu smiling at a coffee shop">

Always write an alt attribute. It's not optional if you care about accessibility.

Div and Span — <div> and <span>

These are the generic containers — <div> for block-level grouping, <span> for inline grouping. They have no built-in meaning. Their entire purpose is to give you something to apply CSS classes or IDs to.

<div class="card">
  <h2>Blog Post Title</h2>
  <p>Preview text for the <span class="highlight">blog post</span> goes here.</p>
</div>

You'll use <div> constantly for layout. <span> is useful when you want to style a specific word or phrase within a larger block of text.

Lists — <ul>, <ol>, <li>

An unordered list renders as bullet points. An ordered list renders as numbered items. Both use <li> for each item:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Build something</li>
</ol>

A Simple Page Putting It Together

Here's what a minimal HTML page looks like with the tags above:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World</h1>
    <p>Welcome to my first HTML page. I built this <strong>from scratch</strong>.</p>

    <h2>Things I'm Learning</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Git</li>
    </ul>

    <p>
      Check out my work on
      <a href="https://github.com">GitHub</a>.
    </p>

    <img src="desk.jpg" alt="My desk setup">
  </body>
</html>

Notice the structure: the <html> element wraps everything. Inside it, <head> holds metadata (like the page title that shows in the browser tab). <body> holds everything that actually renders on screen.

Every HTML page you write will have this skeleton.

Go Look at Real HTML Right Now

Here's something I'd encourage you to do before you close this tab: open any webpage — any one at all — right-click somewhere on the page, and click "Inspect" or "Inspect Element."

The panel that opens is your browser's DevTools. The "Elements" tab shows you the live HTML structure of that page. Click on any element in the panel, and the browser will highlight the corresponding section on the page.

Spend five minutes clicking around. Find a <div>, find a <p>, find an <a>. See how nested elements work. See what real HTML looks like at scale.

This is how I actually started understanding HTML. Not from reading — from inspecting things that already existed and figuring out why they were structured the way they were.

The browser's inspector is your best learning tool. And now you know enough to understand what it's showing you.

---

HTML is one of those things that feels big until you realise the core rules are just four: tags have angle brackets, elements are opening tag plus content plus closing tag, some elements are self-closing, and elements are either block or inline. Everything else builds on top of these four ideas.