DEV Community

Amol Pawar
Amol Pawar

Posted on Edited on

HTML Elements: Understanding the Building Blocks of a Web Page

When I first started learning HTML, I remember staring at code like this and feeling completely lost:

<h1>Hello World</h1>
<p>Welcome to my website</p>
<div>Content</div>
Enter fullscreen mode Exit fullscreen mode

It looked simple enough, but a few questions kept bothering me:

  • What exactly is an HTML element?
  • Is a tag the same thing as an element?
  • What's the difference between <p> and <p>Hello World</p>?
  • What are attributes, and where do they go?
  • Why can one element contain another element?

If you've asked yourself any of these questions, you're in the right place. This article breaks down HTML elements piece by piece, so by the end, you'll understand exactly how they work — no guessing, no confusion.

This is the first concept every beginner should master before moving on to anything else in HTML. So let's slow down and get it right.

Table of Contents

What is HTML?

HTML stands for HyperText Markup Language. It's the language used to structure content on a webpage — things like headings, paragraphs, links, images, and more.

Here's a simple example:

<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
Enter fullscreen mode Exit fullscreen mode

HTML doesn't make a webpage look pretty (that's what CSS is for), and it doesn't make a webpage interactive (that's what JavaScript is for). What HTML does is give your content structure and meaning.

It does this using elements. Every piece of content on a webpage — a heading, a paragraph, a button, an image — is represented by an HTML element. So to really understand HTML, you first need to understand what an element actually is.

What is an HTML Tag?

Before we talk about elements, we need to talk about tags, because tags are the building blocks of elements.

Look at this:

<p>
Enter fullscreen mode Exit fullscreen mode

This is called a tag. Let's break it down:

  • < — the opening angle bracket
  • p — the tag name (in this case, it represents a paragraph)
  • > — closes the tag syntax

There's also a matching closing tag:

</p>
Enter fullscreen mode Exit fullscreen mode

The / here is what makes it a closing tag. It tells the browser, "this is where the paragraph ends."

Here's the important part, and it's something a lot of beginners get wrong:

<p> is a tag. It is not the complete element.

A tag is just one piece of the puzzle. To get the full picture, we need to look at what an element actually is.

What is an HTML Element?

Here's the core definition you should remember:

An HTML element is a complete unit of HTML that defines and represents a specific part of a webpage.

Let's look at an example:

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

Breaking this down:

<p>          → Opening Tag

Hello World  → Content

</p>         → Closing Tag
Enter fullscreen mode Exit fullscreen mode

When you combine these three pieces, you get a complete element:

<p>Hello World</p>
          ↓
Complete HTML Element
Enter fullscreen mode Exit fullscreen mode

So while <p> on its own is just a tag, <p>Hello World</p> is the full element — the tag, the content, and the closing tag, all working together.

Tag vs Element

This is one of the most common points of confusion for beginners, so let's make it crystal clear.

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode 
<p>
↓
Opening Tag

</p>
↓
Closing Tag

<p>Hello World</p>
↓
Complete Element
Enter fullscreen mode Exit fullscreen mode

Here's a simple comparison table:

Tag Element
A part of an element Complete HTML unit
<p> <p>Hello World</p>
Used as part of HTML syntax Represents the complete structure

The key takeaway:

A tag is a part of an element. An element is the complete structure.

In everyday conversation, developers sometimes use "tag" and "element" loosely, even interchangeably. You'll hear people say "add a <div> tag" when they really mean "add a <div> element." That's fine in casual speech — but while you're learning, it helps to keep the distinction clear in your head.

Anatomy of an HTML Element

Let's look at a slightly more detailed example — one with an attribute included:

<p class="intro">Hello World</p>
Enter fullscreen mode Exit fullscreen mode

Here's what each part represents:

<p class="intro">  → Opening Tag

class="intro"      → Attribute

Hello World         → Content

</p>                → Closing Tag
Enter fullscreen mode Exit fullscreen mode

Putting it together:

Opening Tag + Content + Closing Tag
                  ↓
             HTML Element
Enter fullscreen mode Exit fullscreen mode

One important note: this structure describes a normal, paired element — one that has both an opening and a closing tag. Not every HTML element follows this exact pattern (some elements don't have a closing tag at all), but we'll save that discussion for another article. For now, just keep in mind that we're describing the typical case.

Opening Tag

The opening tag marks the beginning of an element. It tells the browser, "a new element starts here, and this is what kind of element it is."

<p>
Enter fullscreen mode Exit fullscreen mode

Here are a few more examples of opening tags you'll see often:

<h1>
<p>
<div>
<section>
Enter fullscreen mode Exit fullscreen mode

Each one signals a different type of content — a heading, a paragraph, a generic container, or a section of a page. The opening tag is always the starting point of an element.

Content

Content is what sits between the opening and closing tags. It's the actual information the element is displaying.

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

In this example, the content is:

Hello World
Enter fullscreen mode Exit fullscreen mode

Content isn't limited to plain text, though. It can also include other HTML elements. For example:

<p>Hello <strong>World</strong></p>
Enter fullscreen mode Exit fullscreen mode

Here, the <p> element's content includes both the text Hello and another element, <strong>World</strong>.

This is a really important idea, because it naturally leads us to the concept of nested elements, which we'll cover shortly.

Closing Tag

The closing tag marks the end of an element.

</p>
Enter fullscreen mode Exit fullscreen mode

Notice the / right after the <. That forward slash is what tells the browser, "this tag is closing something, not opening something."

Closing tags matter because they tell the browser exactly where an element's content ends. Without a closing tag, the browser wouldn't know where the paragraph, heading, or section is supposed to stop.

Let's break down a full example:

<h1>Welcome</h1>
Enter fullscreen mode Exit fullscreen mode 
<h1>       → Opening Tag
Welcome    → Content
</h1>      → Closing Tag
Enter fullscreen mode Exit fullscreen mode

Together, these three parts form one complete <h1> element.

Attributes

Now that we understand tags, content, and closing tags, let's talk about attributes.

An attribute provides additional information about an HTML element.

Take a look at this example again:

<p class="intro">Hello World</p>
Enter fullscreen mode Exit fullscreen mode

Breaking it down:

<p>             → Element tag

class="intro"   → Attribute

Hello World     → Content
Enter fullscreen mode Exit fullscreen mode

Here's an important rule to remember:

Attributes are written inside the opening tag.

Attributes generally follow this pattern:

attribute-name="attribute-value"
Enter fullscreen mode Exit fullscreen mode

For example:

class="intro"
Enter fullscreen mode Exit fullscreen mode
  • class is the attribute name
  • "intro" is the attribute value

Attributes don't change what type of element something is — a <p> is still a paragraph whether or not it has a class attribute. What attributes do is add extra details or behavior to that element.

More Attribute Examples

Let's look at a few more common examples so the concept really sticks. Don't worry about memorizing every attribute here — the goal is just to see the pattern in action.

Link 

<a href="https://example.com">Visit Website</a>
Enter fullscreen mode Exit fullscreen mode 
href → Attribute
"https://example.com" → Attribute Value
Enter fullscreen mode Exit fullscreen mode

The href attribute tells the browser where this link should take the user.

Image 

<img src="image.jpg" alt="Profile Image">
Enter fullscreen mode Exit fullscreen mode

Here, src tells the browser which image file to load, and alt provides a text description of the image (useful for accessibility and for cases when the image fails to load).

Input 

<input type="text" placeholder="Enter your name">
Enter fullscreen mode Exit fullscreen mode

The type attribute tells the browser what kind of input field this is, and placeholder shows a hint inside the field before the user types anything.

Notice that in every example, the pattern stays the same: attributes sit inside the opening tag and follow the name="value" format.

Nested Elements

So far, we've looked at elements on their own. But in real HTML, elements are usually placed inside other elements. This is called nesting.

<div>
    <h1>Welcome</h1>
    <p>Hello World</p>
</div>
Enter fullscreen mode Exit fullscreen mode

When one HTML element is placed inside another HTML element, it is called a nested element.

Here's a visual way to look at it:

<div>
   │
   ├── <h1>Welcome</h1>
   │
   └── <p>Hello World</p>
</div>
Enter fullscreen mode Exit fullscreen mode

In this example:

  • <div> is the parent element
  • <h1> is a child element
  • <p> is also a child element

Nesting is how HTML builds complex page layouts out of simple elements.

Parent and Child Elements

Let's dig a little deeper into the parent-child relationship, since this concept shows up constantly once you start building real webpages.

<div>
    <h1>Welcome</h1>
    <p>Hello World</p>
</div>
Enter fullscreen mode Exit fullscreen mode 
<div>
 ├── <h1>
 └── <p>
Enter fullscreen mode Exit fullscreen mode

In simple terms:

  • A parent element is an element that contains another element.
  • A child element is an element that is directly contained inside another element.

A parent element isn't limited to just one child — it can contain multiple child elements, just like <div> contains both <h1> and <p> in the example above.

You'll see this parent-child pattern everywhere in HTML, from simple layouts to entire webpages.

Putting Everything Together

Let's look at a more realistic example that combines everything we've covered so far:

<div class="container">
    <h1>My Website</h1>
    <p>Welcome to my website.</p>
    <a href="/about">Learn More</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Here's what's happening:

<div class="container">
        ↓
Parent Element

class="container"
        ↓
Attribute

<h1>My Website</h1>
        ↓
Child Element

<p>Welcome to my website.</p>
        ↓
Child Element

<a href="/about">Learn More</a>
        ↓
Child Element + Attribute
Enter fullscreen mode Exit fullscreen mode

And here's how all the concepts connect, from the ground up:

HTML
 ↓
Elements
 ↓
Tags + Content
 ↓
Attributes
 ↓
Nested Elements
 ↓
Webpage Structure
Enter fullscreen mode Exit fullscreen mode

Once this clicks, reading any HTML file becomes much easier — because now you're not just seeing random brackets and words, you're seeing structure.

Common Mistakes Beginners Make

Let's go over a few mistakes that are extremely common when people are first learning about elements.

Mistake 1: Calling <p> an entire element

Incorrect:

<p> is an element.

Better:

<p> is the opening tag of a paragraph element.

Mistake 2: Confusing tags and elements

It helps to keep these two side by side:

<p>
Enter fullscreen mode Exit fullscreen mode 
<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

The first is a tag. The second is a complete element.

Mistake 3: Writing attributes outside the opening tag

Incorrect:

<p>Hello World</p> class="intro"
Enter fullscreen mode Exit fullscreen mode

Correct:

<p class="intro">Hello World</p>
Enter fullscreen mode Exit fullscreen mode

Attributes always belong inside the opening tag, never outside of it.

Mistake 4: Incorrect nesting

Incorrect:

<div>
    <p>Hello</div>
</p>
Enter fullscreen mode Exit fullscreen mode

Correct:

<div>
    <p>Hello</p>
</div>
Enter fullscreen mode Exit fullscreen mode

When elements are nested, they need to close in the reverse order they were opened. The element opened last should be the one closed first. Getting this wrong can cause your webpage to render in unexpected ways.

HTML Element vs HTML Tag vs Attribute

Here's a quick reference table that sums up everything we've covered:

Concept Example Purpose
Opening Tag <p> Starts the element
Closing Tag </p> Ends a paired element
Content Hello World Content inside the element
Attribute class="intro" Provides additional information
Element <p class="intro">Hello World</p> Complete HTML structure

Visual Mental Model

If you only remember one diagram from this entire article, let it be this one:

                HTML ELEMENT
                     │
        ┌────────────┼────────────┐
        ↓            ↓            ↓
   Opening Tag    Content    Closing Tag
        │
        └── Attributes
Enter fullscreen mode Exit fullscreen mode

And when it comes to nesting:

Parent Element
      │
      ├── Child Element
      ├── Child Element
      └── Child Element
Enter fullscreen mode Exit fullscreen mode

Keep these two mental models in your head, and most HTML code will start to make a lot more sense.

Practice Examples

Let's put your understanding to the test with a few practice examples. For each one, try to identify the element, opening tag, closing tag, attributes, and any nested elements — before reading the breakdown.

Example 1 

<h1>Welcome</h1>
Enter fullscreen mode Exit fullscreen mode
  • Element: <h1>Welcome</h1>
  • Opening Tag: <h1>
  • Closing Tag: </h1>
  • Attributes: None
  • Nested Elements: None

Example 2 

<p class="intro">Hello World</p>
Enter fullscreen mode Exit fullscreen mode
  • Element: <p class="intro">Hello World</p>
  • Opening Tag: <p class="intro">
  • Closing Tag: </p>
  • Attributes: class="intro"
  • Nested Elements: None

Example 3 

<a href="/about">About Us</a>
Enter fullscreen mode Exit fullscreen mode
  • Element: <a href="/about">About Us</a>
  • Opening Tag: <a href="/about">
  • Closing Tag: </a>
  • Attributes: href="/about"
  • Nested Elements: None

Example 4 

<div>
    <p>Hello</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Element: The entire <div>...</div> block
  • Opening Tag: <div>
  • Closing Tag: </div>
  • Attributes: None
  • Nested Elements: <p>Hello</p> is nested inside <div>

Example 5 (Realistic Example) 

<section class="hero">
    <h1>Build Better Websites</h1>
    <p>Learn HTML the right way.</p>
    <a href="/start" class="btn">Get Started</a>
</section>
Enter fullscreen mode Exit fullscreen mode
  • Element: The entire <section>...</section> block
  • Opening Tag: <section class="hero">
  • Closing Tag: </section>
  • Attributes: class="hero" on <section>, and href="/start" plus class="btn" on <a>
  • Nested Elements: <h1>, <p>, and <a> are all children of <section>

Quick Knowledge Check

Test yourself with these five questions before checking the answers below.

Question 1

Which of the following is a complete element?

A. <p>
B. </p>
C. <p>Hello</p>
D. p

Question 2

What does the opening tag do?

A. Ends the element
B. Marks the beginning of the element
C. Stores the attribute value
D. Deletes the element

Question 3

What symbol identifies a closing tag?

A. #
B. *
C. /
D. !

Question 4

Where should attributes be written?

A. Outside the element entirely
B. Inside the closing tag
C. Inside the opening tag
D. Between the opening and closing tags

Question 5

In this code, what is <p> in relation to <div>?

<div>
    <p>Hello</p>
</div>
Enter fullscreen mode Exit fullscreen mode

A. Parent element
B. Child element
C. Attribute
D. Sibling of <div>

Answers: 1 - C, 2 - B, 3 - C, 4 - C, 5 - B

Frequently Asked Questions

1. Is a tag the same as an element?
No. A tag is a part of an element (like <p> or </p>), while an element is the complete structure, including the opening tag, content, and closing tag.

2. What is an HTML element?
An HTML element is a complete unit of HTML that represents a specific part of a webpage — for example, <p>Hello World</p>.

3. What is an opening tag?
An opening tag marks the start of an element and tells the browser what type of element is being created, such as <p> or <div>.

4. What is a closing tag?
A closing tag marks the end of a paired element. It looks like the opening tag but includes a forward slash, such as </p>.

5. What is the purpose of an attribute?
An attribute provides additional information about an element, such as styling hooks (class), links (href), or image sources (src).

6. Where are attributes written?
Attributes are always written inside the opening tag, following a name="value" pattern.

7. What is a nested element?
A nested element is an element placed inside another element. For example, a <p> placed inside a <div> is nested.

8. What are parent and child elements?
A parent element contains another element, and a child element is the one directly contained inside the parent.

9. Does every HTML element have a closing tag?
Not every HTML element has a closing tag. Most elements you'll encounter as a beginner — like <p>, <div>, and <h1> — are paired elements with both an opening and closing tag. A few elements work differently and don't require a closing tag, but that's a topic worth exploring separately once you're comfortable with the basics covered here.

Key Takeaways

  • HTML elements are the building blocks of HTML documents.
  • A tag is a part of an element.
  • An element represents the complete HTML structure.
  • Normal paired elements commonly contain an opening tag, content, and closing tag.
  • Attributes provide additional information.
  • Attributes are written inside the opening tag.
  • Elements can contain other elements.
  • Nested elements create parent-child relationships. 
Tag
 ↓
Element
 ↓
Attributes
 ↓
Nesting
 ↓
Webpage Structure
Enter fullscreen mode Exit fullscreen mode

Conclusion

Understanding HTML elements is one of the very first — and most important — steps in learning web development. Once you're comfortable with tags, content, attributes, and nesting, you have the foundation you need to read and write HTML confidently.

It might seem like a small concept, but everything else in HTML builds on top of it. Every webpage you'll ever build, no matter how complex, is really just a collection of elements nested inside other elements.

From here, the natural next step is learning how HTML elements are categorized — but that's a topic for another article. For now, take some time to practice identifying tags, elements, attributes, and nesting in real HTML code. It'll make everything that comes next much easier to understand.

Suggested DEV.to Tags

#html
#webdev
#beginners
#tutorial

Top comments (0)