DEV Community

sanjeev singh
sanjeev singh

Posted on

Understanding HTML Tags and Elements

#webdev #beginners #tutorial #html

If a webpage were a house, HTML would be the skeleton — the structure that holds everything together. Without it, there's no layout, no content, no webpage at all. CSS adds the paint and decoration, JavaScript adds the interactivity, but HTML? HTML is where it all begins.

In this article, we're going to break down exactly what HTML tags and elements are, how they work, and why they matter. By the end, you'll be able to look at any piece of HTML code and instantly understand what's happening.

What exactly is an HTML tag, and how is it different from an HTML element?

Let's find out.

1. What HTML Is and Why We Use It

HTML stands for HyperText Markup Language. That's a fancy name, but the idea is simple: it's a language we use to mark up (structure) the content on a webpage.

Think about a book. A book has a title, chapters, paragraphs, and sentences. HTML does the same thing for a webpage — it tells the browser, "This is a heading. This is a paragraph. This is an image."

Without HTML, the browser would just see a blob of text with no structure. It wouldn't know what's a title, what's a paragraph, or what's a link. HTML gives meaning to the content.

Analogy: Imagine writing a document without any formatting — no bold titles, no paragraphs, no bullet points. It would be nearly impossible to read. HTML is the formatting system that makes webpages readable and organized.

2. What an HTML Tag Is

A tag is the instruction we write in HTML to tell the browser what to do with a piece of content. Tags are always wrapped in angle brackets: < >.

Here's a simple tag:

<p>
Enter fullscreen mode Exit fullscreen mode

That's it. That single piece of text — <p> — is a tag. It tells the browser, "Hey, what comes next is a paragraph."

Analogy: Think of a tag like a label on a box. The label tells you what's inside the box without you having to open it. <p> is the label that says "paragraph inside."

3. Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs: an opening tag and a closing tag. The content sits in between.

Opening Tag    Content      Closing Tag
     ↓            ↓              ↓
   <p>     Hello, World!      </p>
Enter fullscreen mode Exit fullscreen mode

Here's how each part works:

  • Opening tag (<p>) — Tells the browser, "A paragraph is starting here."
  • Content (Hello, World!) — The actual text or content the user sees.
  • Closing tag (</p>) — Tells the browser, "The paragraph ends here." Notice the / — that's how you know it's a closing tag.

Analogy: Think of it like a sandwich. The opening tag is the top slice of bread, the content is the filling, and the closing tag is the bottom slice. You need both pieces of bread to hold the filling together!

  ┌─────────┐
  │  <p>    │  ← Opening tag (top bread)
  ├─────────┤
  │ Content │  ← The filling
  ├─────────┤
  │  </p>   │  ← Closing tag (bottom bread)
  └─────────┘
Enter fullscreen mode Exit fullscreen mode

4. What an HTML Element Means

Now here's where a lot of beginners get confused — and it's a very common question:

What's the difference between a tag and an element?

The answer is simple once you see it:

  • A tag is just the label itself (like <p> or </p>).
  • An element is the complete package — the opening tag + the content + the closing tag, all together. 
              ← The entire thing is ONE element →
              ┌──────────────────────────────────┐
              │                                  │
              ▼                                  ▼
            <h1>  Welcome to My Website!  </h1>
            ────  ─────────────────────  ─────
             tag         content          tag
Enter fullscreen mode Exit fullscreen mode

So when someone says "the <h1> element," they don't just mean the <h1> tag — they mean the whole thing: <h1>Welcome to My Website!</h1>.

Analogy: A tag is like a single label. An element is like the entire labeled box — the label, the contents, and everything together.

5. Self-Closing (Void) Elements

Not every element needs a closing tag. Some elements have no content at all — they just do something on their own. These are called void elements or self-closing elements.

Here are some examples:

<br>
<hr>
<img src="photo.jpg">
<input type="text">
Enter fullscreen mode Exit fullscreen mode

Let's look at each one:

  • <br> — Inserts a line break. There's no "content" to wrap — it just breaks the line.
  • <hr> — Draws a horizontal line across the page.
  • <img> — Displays an image. The image file is referenced using src, not placed between tags.
  • <input> — Creates an input field (like a text box). The field itself is the element. 
  Regular Element:          Void Element:
  ─────────────────         ─────────────
  <p>Hello!</p>             <br>
  ↑   ↑        ↑            ↑
  |   |        |            |
  |   content  |            No content, no closing tag!
  |            |
  open       close
Enter fullscreen mode Exit fullscreen mode

Analogy: A void element is like a stamp. You just place it down and it does its job — there's nothing to put inside it.

6. Block-Level vs Inline Elements

This is one of the most important concepts in HTML. Every element behaves in one of two ways when it comes to layout:

Block-Level Elements

Block elements take up the full width of their container and always start on a new line. They stack on top of each other like bricks in a wall.

Common block elements: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>

Inline Elements

Inline elements only take up as much space as their content needs. They flow along with the text on the same line, like words in a sentence.

Common inline elements: <span>, <a>, <strong>, <em>

Seeing the Difference 

<p>I am a block element.</p>
<p>I am also a block element.</p>
<p>We each get our own line.</p>

<span>I am inline.</span>
<span>So am I.</span>
<span>We share the same line!</span>
Enter fullscreen mode Exit fullscreen mode

This produces a layout like this:

┌──────────────────────────────────────────┐
│ I am a block element.                    │  ← <p> fills the full width
├──────────────────────────────────────────┤
│ I am also a block element.               │  ← next <p> goes to a new line
├──────────────────────────────────────────┤
│ We each get our own line.                │  ← same here
├──────────────────────────────────────────┤
│ I am inline. So am I. We share the       │  ← <span> elements flow
│ same line!                               │    together like words
└──────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Analogy: Block elements are like paragraphs in a book — each one starts on a new line and stretches across the page. Inline elements are like words in a sentence — they sit side by side and only take up the space they need.

7. Commonly Used HTML Tags

Now that you understand how tags and elements work, let's look at the tags you'll use most often. You don't need to memorize all of them right away — just get familiar with what they do.

Headings 

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-Section Title</h3>
Enter fullscreen mode Exit fullscreen mode

<h1> is the biggest heading, <h2> is slightly smaller, and so on down to <h6>. Think of them as the hierarchy of titles in a book — <h1> is the book's title, <h2> is a chapter name, <h3> is a section within that chapter.

Paragraph 

<p>This is a paragraph of text. It can be as long or as short as you want.</p>
Enter fullscreen mode Exit fullscreen mode

<p> is for blocks of text. Whenever you have a chunk of writing, wrap it in <p> tags.

Division (The Universal Container) 

<div>
  <p>I am inside a div.</p>
  <p>So am I!</p>
</div>
Enter fullscreen mode Exit fullscreen mode

<div> is a block-level container with no built-in styling. It's incredibly useful for grouping elements together — think of it as a generic box you can put anything inside.

Span (The Inline Container) 

<p>This sentence has a <span>highlighted word</span> inside it.</p>
Enter fullscreen mode Exit fullscreen mode

<span> is the inline version of <div>. It wraps inline content without adding any new lines. It's often used to style a specific piece of text within a paragraph.

Links 

<a href="https://www.example.com">Click here to visit Example</a>
Enter fullscreen mode Exit fullscreen mode

<a> creates a hyperlink. The href attribute tells the browser where to go when the link is clicked.

Images 

<img src="my-photo.jpg" alt="A photo of me">
Enter fullscreen mode Exit fullscreen mode

<img> displays an image. Remember — it's a void element, so there's no closing tag! The src tells the browser which image to show, and alt is a description for accessibility.

Lists 

<!-- Unordered List (bullet points) -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

<!-- Ordered List (numbered) -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

<ul> creates a bullet-point list, <ol> creates a numbered list, and each item inside is wrapped in <li>.

Quick Reference 

Tag          Type      Purpose
───────────  ────────  ─────────────────────────────
<h1>-<h6>   Block     Headings (largest to smallest)
<p>          Block     Paragraphs
<div>        Block     Generic container (block)
<span>       Inline    Generic container (inline)
<a>          Inline    Hyperlinks
<img>        Void      Images
<ul>         Block     Unordered (bullet) list
<ol>         Block     Ordered (numbered) list
<li>         Block     List item (inside ul or ol)
<br>         Void      Line break
<hr>         Void      Horizontal rule (divider line)
<strong>     Inline    Bold text (important)
<em>         Inline    Italic text (emphasis)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)