HTML Elements

Learn what HTML elements are, how they are structured with opening and closing tags, and how elements can be nested inside each other.

Introduction

In the previous lesson, you learned about the HTML document structure and how the DOCTYPE declaration, html element, head section, and body section work together to create the basic skeleton of a webpage.

You also learned that the body section contains the main content rendered as part of the webpage.

But how do we actually create that content?

We use HTML elements.

Headings, paragraphs, links, images, lists, tables, forms, buttons, videos, and page sections are all created using HTML elements.

HTML Document

↓

body Element

↓

HTML Elements

↓

Page Content

↓

Browser Output

Elements Inside the Body

<body>
    <h1>Welcome to HTML</h1>
    <p>Start learning web development.</p>
</body>

The Building Blocks of Webpages

HTML elements are the fundamental building blocks used to describe and organize the content of a webpage.

What is an HTML Element?

An HTML element is a complete unit of HTML markup that represents a part of a document.

Many HTML elements consist of an opening tag, some content, and a closing tag.

General Structure

<tagname>Content</tagname>

For example, a heading can be created using the h1 element.

Heading Element

<h1>Welcome to HTML</h1>

Element Breakdown

<h1>     Welcome to HTML     </h1>
  │              │              │
  │              │              │
  ▼              ▼              ▼
Opening         Content        Closing
  Tag                            Tag

The browser interprets the h1 element as a top-level heading and renders its content accordingly.

Defines Meaning

The element identifies what kind of content it represents.

Creates Structure

Elements organize content into meaningful parts.

Guides the Browser

The browser interprets elements when processing the document.

Forms a Hierarchy

Elements can contain other elements and form a document tree.

Not Every Element Has the Same Structure

Many elements use opening and closing tags, but some elements do not contain child content and therefore do not use a separate closing tag.

Parts of an Element

A typical HTML element with text content contains three main parts.

Example Element

<p>Learning HTML is easy.</p>

1️⃣ Opening Tag

Marks the beginning of the element. Example:

2️⃣ Content

The information contained by the element. Example: Learning HTML is easy.

3️⃣ Closing Tag

Marks the end of the element. Example:

1. Opening Tag

Opening Tag

<p>

The opening tag marks where an element begins.

It normally contains the element name between a less-than sign and a greater-than sign.

Opening Tag Structure

<  p  >
│  │  │
│  │  └── Greater-than sign
│  │
│  └───── Element name
│
└──────── Less-than sign

2. Content

Element Content

Learning HTML is easy.

The content is placed between the opening and closing tags.

Depending on the element, the content may include text, other HTML elements, or a combination of both.

3. Closing Tag

Closing Tag

</p>

The closing tag marks where the element ends.

It normally uses the same element name as the opening tag but includes a forward slash before the name.

Closing Tag Structure

<  /  p  >
│  │  │  │
│  │  │  └── Greater-than sign
│  │  │
│  │  └───── Element name
│  │
│  └──────── Forward slash
│
└─────────── Less-than sign

Part	Example	Purpose
Opening Tag	<p>	Marks the beginning of the element
Content	Learning HTML is easy.	Provides the information inside the element
Closing Tag	</p>	Marks the end of the element

Example 1: Heading

A heading element represents a heading in the document.

Heading Element

<h1>Bytecrest Learning</h1>

Heading Breakdown

<h1>     Bytecrest Learning     </h1>
 │               │                │
 │               │                │
 ▼               ▼                ▼
Opening         Content          Closing
  Tag                              Tag

Part	Value
Opening Tag	<h1>
Content	Bytecrest Learning
Closing Tag	</h1>
Complete Element	<h1>Bytecrest Learning</h1>

Heading Example

Bytecrest Learning

The Element Gives the Content Meaning

The text Bytecrest Learning is not merely displayed as text. The h1 element identifies it as a top-level heading.

Example 2: Paragraph

The p element represents a paragraph.

Paragraph Element

<p>HTML is the foundation of every website.</p>

Paragraph Breakdown

<p>   HTML is the foundation of every website.   </p>
 │                       │                       │
 │                       │                       │
 ▼                       ▼                       ▼
Opening                 Content                 Closing
  Tag                                               Tag

Part	Value
Opening Tag	<p>
Content	HTML is the foundation of every website.
Closing Tag	</p>

Paragraph Example

HTML is the foundation of every website.

Heading Element

Uses the h1 element.
Represents a top-level heading.
Creates heading structure.
Usually appears visually prominent.

Paragraph Element

Uses the p element.
Represents a paragraph.
Creates text content.
Usually appears as a block of text.

Nested Elements

HTML elements can be placed inside other HTML elements. This is called nesting.

Nested Elements

<body>
    <h1>Welcome</h1>
    <p>Learning HTML is easy.</p>
</body>

In this example, the h1 and p elements are placed inside the body element.

Parent-Child Relationship

body                     ← Parent
│
├── h1                   ← Child
│   │
│   └── "Welcome"
│
└── p                    ← Child
    │
    └── "Learning HTML is easy."

Parent Element

An element that directly contains another element.

Child Element

An element directly contained inside another element.

Ancestor Element

An element located higher in the hierarchy.

Descendant Element

An element located somewhere inside another element.

Multiple Levels of Nesting

Multiple Nesting Levels

<body>
    <main>
        <section>
            <h1>Welcome</h1>
            <p>Learn HTML step by step.</p>
        </section>
    </main>
</body>

Nested Hierarchy

body
│
└── main
    │
    └── section
        │
        ├── h1
        │
        └── p

The section element is a child of main and a descendant of body. The body element is an ancestor of section, h1, and p.

Nesting Creates the Document Tree

The relationships created by nested elements form the hierarchical structure that browsers represent through the DOM.

Empty Elements

Some HTML elements do not contain child content. These are commonly called empty elements or void elements.

Because they cannot contain child content, they do not use a separate closing tag.

Line Break

inserts a line break.

Thematic Break

<hr> represents a thematic break between sections of content.

Image

<img> embeds an image.

Input

<input> creates an input control.

Link Resource

Metadata

Line Break

First Line<br>Second Line

Line Break Output

First Line

Second Line

Thematic Break

<p>First Topic</p>

<hr>

<p>Second Topic</p>

Empty Does Not Mean Useless

An empty element does not contain child content, but it can still perform an important function and may use attributes.

HTML Terminology

The HTML standard commonly describes these as void elements. They cannot have child nodes and must not use an end tag.

Example 3: Multiple Elements

A real HTML document combines many different elements to create a complete page.

Multiple HTML Elements

<!DOCTYPE html>
<html>

<head>
    <title>My Page</title>
</head>

<body>
    <h1>Welcome</h1>

    <p>This is HTML.</p>

    <hr>

    <p>Enjoy Learning.</p>
</body>

</html>

Element Relationships

html
│
├── head
│   │
│   └── title
│
└── body
    │
    ├── h1
    │
    ├── p
    │
    ├── hr
    │
    └── p

My Page

Welcome

This is HTML.

Enjoy Learning.

Browser Reads Document

↓

Identifies Elements

↓

Builds Hierarchy

↓

Interprets Element Meaning

↓

Renders Page

Element Hierarchy

HTML elements are organized into a hierarchical tree rather than existing as isolated pieces of markup.

Example Document

<html>
    <head>
        <title>Home</title>
    </head>

    <body>
        <h1>Welcome</h1>
        <p>Learn HTML.</p>
        <hr>
    </body>
</html>

HTML Document Tree

html
│
├── head
│   │
│   └── title
│       │
│       └── "Home"
│
└── body
    │
    ├── h1
    │   │
    │   └── "Welcome"
    │
    ├── p
    │   │
    │   └── "Learn HTML."
    │
    └── hr

Element	Parent	Children
html	None in this structure	head, body
head	html	title
title	head	Text
body	html	h1, p, hr
h1	body	Text
p	body	Text
hr	body	None

Sibling Elements

Elements that share the same parent are called siblings.

Sibling Elements

<body>
    <h1>Welcome</h1>
    <p>Learn HTML.</p>
    <hr>
</body>

The h1, p, and hr elements are siblings because they share the same parent: body.

Parent

Directly contains another element.

Child

Directly contained by another element.

Sibling

Shares the same parent with another element.

Ancestor

Appears higher in the hierarchy.

Descendant

Appears somewhere inside another element.

Hierarchy Matters Beyond HTML

CSS uses element relationships to select and style content, while JavaScript uses the DOM hierarchy to find and manipulate elements.

Elements vs Tags

The terms tag and element are often used interchangeably in casual conversation, but they do not mean exactly the same thing.

HTML Tag

A markup token.
Can mark the beginning of an element.
Can mark the end of an element.
Examples: and .

HTML Element

Represents the complete element.
Can include a start tag.
Can include content.
Can include an end tag.

HTML Tag	HTML Element
<p>	<p>Hello</p>
<h1>	<h1>Welcome</h1>
<title>	<title>Home</title>

Tag vs Element

Opening Tag
    │
    ▼
   <p>     Hello World     </p>
            ▲                ▲
            │                │
          Content         Closing Tag

   └──────────── Complete Element ────────────┘

Remember the Difference

A tag is part of the markup syntax. An element is the complete document component represented by that markup.

Real-World Applications

Every visible and structural part of a webpage is represented using HTML elements.

News Websites

Headings, articles, publication dates, images, links, and navigation.

E-Commerce

Product titles, descriptions, images, prices, forms, and buttons.

Educational Platforms

Lessons, examples, code blocks, exercises, quizzes, and navigation.

Business Websites

Services, company information, contact details, and forms.

Social Platforms

Posts, profiles, comments, images, links, and controls.

Web Applications

Dashboards, tables, forms, navigation, dialogs, and controls.

Blogs

Articles, headings, paragraphs, images, quotes, and categories.

Media Platforms

Videos, audio, titles, descriptions, and interactive controls.

Advantages

Organizes Content

Elements divide a webpage into understandable parts.

Adds Meaning

Different elements describe different types of content.

Improves Readability

Structured markup is easier for developers to understand.

Guides Browsers

Browsers interpret elements when processing documents.

Supports Accessibility

Appropriate elements can provide useful structure to assistive technologies.

Supports Search Understanding

Meaningful document structure can help systems understand page content.

Connects with CSS

CSS can select elements and control their presentation.

Connects with JavaScript

JavaScript can find and manipulate elements through the DOM.

Create the individual parts of a webpage.
Organize content into a meaningful structure.
Represent headings, paragraphs, links, images, lists, and other content.
Create parent-child relationships.
Form the HTML document tree.
Provide targets for CSS styling.
Provide objects for JavaScript interaction.
Help developers understand page structure.
Support semantic document organization.
Form the foundation of every HTML document.

Common Beginner Mistakes

Forgetting Closing Tags

Elements that require an end tag should be closed correctly.

Using the Wrong Closing Tag

The closing tag should correspond to the opening tag.

Incorrect Nesting

Nested elements should be closed in an order that preserves the intended hierarchy.

Confusing Tags with Elements

A tag is markup syntax, while an element represents the complete document component.

Adding Closing Tags to Void Elements

HTML void elements such as br and hr do not use end tags.

Placing Main Content in the Wrong Section

Main page content should be organized inside the body element.

Ignoring Element Relationships

Poor nesting can create a different document tree from the one you intended.

Poor Indentation

Inconsistent formatting makes nested structures difficult to understand.

Missing Closing Tag

<!-- ❌ Incorrect -->

<p>Hello


<!-- ✅ Correct -->

<p>Hello</p>

Wrong Closing Tag

<!-- ❌ Incorrect -->

<h1>Welcome</p>


<!-- ✅ Correct -->

<h1>Welcome</h1>

Incorrect Nesting

<!-- ❌ Incorrect -->

<p>
    <strong>Important
</p>
    </strong>


<!-- ✅ Correct -->

<p>
    <strong>Important</strong>
</p>

Void Element

<!-- ❌ Avoid -->

<br></br>


<!-- ✅ Correct -->

<br>

Poor Element Structure

Missing required closing tags.
Mismatched tag names.
Overlapping elements.
Unclear nesting.
Inconsistent formatting.

Proper Element Structure

Elements closed appropriately.
Matching start and end tags.
Correctly nested elements.
Clear parent-child relationships.
Consistent indentation.

Browsers May Recover from Errors

A browser may still display a page containing invalid markup, but the document structure it creates may differ from what you intended. Do not depend on browser error recovery.

Best Practices

Use appropriate elements for the type of content you are creating.
Close elements that require closing tags.
Use matching opening and closing tag names.
Nest elements correctly.
Close inner elements before outer elements.
Do not use end tags for HTML void elements.
Keep parent-child relationships clear.
Use consistent indentation.
Use lowercase element names for consistency.
Place main page content inside the body element.
Keep document information inside the head section.
Use meaningful elements instead of choosing elements only for appearance.
Avoid unnecessary nesting.
Keep deeply nested structures understandable.
Use comments only when they add useful context.
Validate HTML when debugging structural problems.
Do not rely on browser error correction.
Learn the content model of elements as you study them.
Understand that not every element can be placed inside every other element.
Think about the document tree while writing HTML.

Readable Element Structure

<body>
    <main>
        <section>
            <h1>Learn HTML</h1>

            <p>
                HTML elements create the structure
                and content of webpages.
            </p>
        </section>
    </main>
</body>

Use Elements for Meaning

Choose an HTML element because it represents the meaning or purpose of the content, not merely because of its default visual appearance.

Frequently Asked Questions

What is an HTML element?

An HTML element is a document component represented by HTML markup. Many elements contain an opening tag, content, and a closing tag.

What are the three common parts of an HTML element?

A typical element with text content contains an opening tag, content, and a closing tag.

What is an opening tag?

An opening tag marks the beginning of an element and normally contains the element name between angle brackets.

What is a closing tag?

A closing tag marks the end of an element and normally includes a forward slash before the element name.

Does every HTML element have a closing tag?

No. HTML void elements do not use end tags.

What is element content?

Element content is the information or child nodes contained by an element.

Can an HTML element contain another element?

Yes. Many HTML elements can contain other elements.

What is nesting?

Nesting is placing one HTML element inside another element.

What is a parent element?

A parent element directly contains another element.

What is a child element?

A child element is directly contained by another element.

What is a sibling element?

Sibling elements share the same parent.

What is an ancestor element?

An ancestor element appears higher in the hierarchy and contains another element directly or indirectly.

What is a descendant element?

A descendant element appears somewhere inside another element, either directly or through additional nesting levels.

What is an empty element?

An empty or void element is an HTML element that cannot contain child content.

What are examples of void elements?

Examples include br, hr, img, input, meta, and link.

Should I write ?

No. The br element is a void element and does not use an end tag.

What is the difference between a tag and an element?

A tag is part of the HTML markup syntax, while an element represents the complete document component.

Is an element?

Strictly speaking, is a start tag. The complete paragraph element includes the element and its content.

What is element hierarchy?

Element hierarchy is the tree-like organization created by elements containing other elements.

Why is correct nesting important?

Correct nesting helps create the intended document tree and prevents unexpected browser interpretation.

Do browsers fix incorrect HTML automatically?

Browsers perform error recovery, but the resulting document structure may not match what the developer intended.

Does indentation affect HTML nesting?

Indentation itself does not define the document hierarchy, but it makes the hierarchy easier for developers to understand.

Can I place any HTML element inside any other element?

No. HTML elements have content rules that determine what kinds of content they may contain.

Why are HTML elements important for CSS?

CSS can select HTML elements and control their visual presentation.

Why are HTML elements important for JavaScript?

JavaScript can access and manipulate elements through the Document Object Model.

What should I learn after HTML elements?

The next lesson is HTML attributes, which add additional information and configuration to elements.

Key Takeaways

HTML elements are the building blocks of webpages.
Elements represent different parts of a document.
Many elements contain an opening tag, content, and a closing tag.
The opening tag marks the beginning of an element.
The closing tag marks the end of an element.
Closing tags normally contain a forward slash.
Element content appears between the opening and closing tags.
Elements can contain text.
Elements can contain other elements.
Placing elements inside other elements is called nesting.
Nesting creates parent-child relationships.
Elements sharing the same parent are siblings.
Elements can also have ancestor and descendant relationships.
Nested elements form the HTML document tree.
Some HTML elements cannot contain child content.
These elements are commonly called void elements.
Void elements do not use end tags.
br and hr are examples of void elements.
Tags and elements are related but are not exactly the same concept.
Correct nesting helps create the intended document structure.
Browsers may recover from invalid markup, but developers should not rely on that behavior.
Consistent indentation makes element relationships easier to understand.
HTML elements provide targets for CSS styling.
HTML elements become objects in the DOM for JavaScript interaction.
Every future HTML topic builds upon the concept of elements.

Summary

HTML elements are the fundamental building blocks used to create the structure and content of webpages.

Many elements consist of an opening tag, content, and a closing tag.

The opening tag marks where the element begins, the content provides the information contained by the element, and the closing tag marks where the element ends.

You learned how heading and paragraph elements represent different types of document content.

You also learned that HTML elements can be placed inside other elements through a process called nesting.

Nesting creates parent, child, sibling, ancestor, and descendant relationships that form the HTML document tree.

Some elements, known as void elements, cannot contain child content and therefore do not use end tags.

Examples include br, hr, img, input, meta, and link.

You also learned the difference between tags and elements. Tags are part of the HTML markup syntax, while elements represent the complete components of the document.

Understanding elements is essential because every heading, paragraph, image, link, list, table, form, and page section you create will be represented by HTML elements.

In the next lesson, you will learn about HTML attributes and how they provide additional information and configuration for elements.

Next Lesson →