What is an HTML element with HTML tags, attributes and code example

HTML elements are the building blocks used to structure web pages.


Table of Contents

What Is an HTML Element? A Complete Beginner’s Guide

If you are learning HTML, one of the first terms you will come across is HTML element. You will see examples such as <p>, <h1>, <a>, <img>, <div>, <section>, and many others throughout almost every HTML tutorial.

But what exactly is an HTML element?

An HTML element is one of the basic building blocks used to create a web page. HTML elements tell the browser what different pieces of content mean and how they are structured. A paragraph is marked as a paragraph, a heading is marked as a heading, an image is inserted with an image element, and a link is created with an anchor element.

For example:

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

The browser does not simply see this as a line of text. The <p> element tells the browser that the text represents a paragraph.

HTML is primarily concerned with the meaning and structure of content. CSS is generally used for presentation and visual design, while JavaScript is commonly used to add behavior and interactivity.

Understanding HTML elements is therefore one of the most important steps for anyone learning web development.

Once you understand how elements work, concepts such as HTML tags, attributes, nesting, semantic HTML, forms, links, images, and page structure become much easier to understand.

In this guide, we will look at HTML elements from the ground up, including:

  • What an HTML element is
  • The difference between an HTML tag and an HTML element
  • Opening and closing tags
  • HTML element content
  • Void elements
  • HTML attributes
  • Nesting elements
  • Common HTML elements
  • Semantic HTML
  • Headings and document structure
  • Block and inline behavior
  • HTML elements and CSS
  • HTML elements and accessibility
  • HTML elements and SEO
  • Common mistakes beginners make
  • Practical examples
  • Frequently asked questions

By the end, you should have a clear understanding of what HTML elements are and how to use them correctly.

What Is an HTML Element?

An HTML element is a part of an HTML document that is defined by HTML markup.

A typical HTML element contains an opening tag, some content, and a closing tag.

For example:

<p>Hello, world!</p>

Here:

  • <p> is the opening tag.
  • Hello, world! is the content.
  • </p> is the closing tag.
  • The complete <p>Hello, world!</p> is the HTML element.

You can think of an HTML element as a container that gives meaning to its content.

For example:

<h1>My Website</h1>

The <h1> element tells the browser that “My Website” is the main heading.

Similarly:

<p>Welcome to my website.</p>

The <p> element identifies the text as a paragraph.

And:

<a href="https://example.com">Visit our website</a>

The <a> element represents a hyperlink.

HTML contains many different elements, each designed for a particular purpose. The official HTML specification defines their meanings and rules, while resources such as MDN provide practical references for developers.

What Are HTML Tags and Elements?

The terms HTML tag and HTML element are often used interchangeably, especially in beginner tutorials, but they technically mean different things.

A tag is the markup written inside angle brackets.

For example:

<p>

is an opening tag.

This:

</p>

is a closing tag.

The complete structure:

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

is an HTML element.

So, a simple way to remember the difference is:

Tags are used to create elements.

For example:

<h1>Welcome</h1>

There are two tags here:

<h1>

and:

</h1>

Together with their content, they form one HTML element.

HTML Element Syntax

A normal HTML element can be represented using this basic pattern:

<tagname>Content</tagname>

For example:

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

Another example:

<h2>About Our Company</h2>

And another:

<strong>This text is important.</strong>

The element name tells the browser what the content represents.

HTML tag names are conventionally written in lowercase:

<p>
<h1>
<section>
<header>

Although HTML tag names are case-insensitive, lowercase is the standard style used in modern HTML code and documentation.

The Three Main Parts of a Normal HTML Element

A typical HTML element can contain three basic parts.

1. Opening Tag

The opening tag tells the browser where the element begins.

Example:

<p>

2. Content

The content is the information contained inside the element.

Example:

This is a paragraph.

3. Closing Tag

The closing tag tells the browser where the element ends.

Example:

</p>

Together:

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

This is a complete paragraph element.

Another example:

<h1>Learn HTML</h1>

The opening tag is:

<h1>

The content is:

Learn HTML

And the closing tag is:

</h1>

HTML Elements Can Contain Other Elements

HTML elements are not limited to plain text.

An element can contain other HTML elements.

For example:

<p>Learn <strong>HTML</strong> with practical examples.</p>

Here, the <strong> element is inside the <p> element.

The paragraph contains both normal text and another HTML element.

This is called nesting.

Nesting is fundamental to HTML because real-world web pages usually contain many elements inside other elements. The HTML specification describes documents as a tree of elements and text.

For example:

<article>
    <h2>Learn HTML</h2>

    <p>
        HTML is used to structure
        <strong>web content</strong>.
    </p>
</article>

The structure can be thought of like this:

article
├── h2
└── p
    └── strong

This hierarchical structure is one of the most important concepts in HTML.

What Are Void HTML Elements?

Not every HTML element has an opening tag, content, and closing tag.

Some HTML elements cannot contain content. These are called void elements.

Examples include:

<img>
<br>
<hr>
<input>
<meta>
<link>

A void element does not have a closing tag in HTML. The HTML specification identifies elements such as area, base, br, col, embed, hr, img, input, link, meta, source, track, and wbr as void elements.

For example:

<br>

creates a line break.

An image can be inserted using:

<img src="cat.jpg" alt="A cat sitting on a chair">

An input field can be created with:

<input type="text" name="username">

Notice that none of these require:

</br>

or:

</img>

or:

</input>

Those closing tags should not be added to HTML void elements.

What About <br />?

You may have seen HTML written like this:

<br />

This is commonly seen in older XHTML-style code and some coding examples.

Modern HTML does not require the slash.

You can simply write:

<br>

The slash does not turn the element into a different type of element. HTML defines void elements as having no end tag.

The same applies to:

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

rather than:

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

Both styles may be encountered in existing websites, but the closing slash is unnecessary in HTML.

Common HTML Elements

HTML contains a large number of elements, and you do not need to memorize all of them at once.

It is much more useful to understand the elements you are likely to use frequently.

Here are some of the most common ones.

<html>

The <html> element is the root element of an HTML document.

A basic document starts with:

<!DOCTYPE html>
<html lang="en">

All the other HTML content is placed inside the <html> element.

<head>

The <head> element contains information about the document that is generally not displayed as the main page content.

For example:

<head>
    <title>My Website</title>
    <meta charset="UTF-8">
</head>

The head can contain metadata, stylesheets, scripts, links to resources, and the document title.

<title>

The <title> element defines the document’s title.

<title>Learn HTML Elements</title>

This title is commonly displayed in the browser tab.

It is also important when creating pages for search engines because the page title provides information about what the document is about.

<body>

The <body> element contains the document’s main page content.

For example:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my homepage.</p>
</body>

<h1> to <h6>

HTML provides six levels of headings:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

<h1> represents the highest heading level, while <h6> represents the lowest.

Headings help organize content into a logical structure.

For example:

<h1>How to Build a Website</h1>

<h2>Choosing a Domain</h2>

<h2>Choosing Web Hosting</h2>

<h3>Shared Hosting</h3>

<h3>VPS Hosting</h3>

This is easier to understand than using random heading levels simply because they look visually attractive.

CSS should be used to control how headings look.

<p>

The <p> element represents a paragraph.

<p>
    HTML provides the structure of a web page.
</p>

A long article will typically contain many paragraph elements.

<a>

The <a> element creates a hyperlink.

For example:

<a href="https://example.com">Visit Example</a>

The href attribute specifies where the link points.

The anchor element is one of the most important elements on the web because links connect documents and resources together.

<img>

The <img> element embeds an image.

<img src="cat.jpg" alt="A cat sitting on a sofa">

The src attribute identifies the image resource.

The alt attribute provides alternative text describing the image.

<ul>

The <ul> element creates an unordered list.

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

This produces a list with bullet points.

<ol>

The <ol> element creates an ordered list.

<ol>
    <li>Open your editor.</li>
    <li>Create an HTML file.</li>
    <li>Write your HTML.</li>
    <li>Open it in a browser.</li>
</ol>

An ordered list is useful when the order of the items matters.

<li>

The <li> element represents an individual list item.

It is normally used inside <ul> or <ol>.

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

<div>

The <div> element is a generic container.

For example:

<div>
    <h2>About Us</h2>
    <p>We build websites.</p>
</div>

A <div> does not tell the browser that the content is specifically an article, navigation area, footer, or header.

It is simply a generic container.

This makes <div> useful, but it should not automatically be the first choice for every section of a page.

Where a more meaningful semantic element exists, it can often be better to use that element.

<span>

The <span> element is another generic container, but it is commonly used for a small piece of inline content.

For example:

<p>
    This is <span>important text</span>.
</p>

CSS can then be used to style the span.

Unlike <div>, <span> is commonly used within a line of content.

What Are HTML Attributes?

An HTML element can have additional information called attributes.

Attributes are written inside an element’s opening tag.

For example:

<a href="https://example.com">Visit Example</a>

Here:

href="https://example.com"

is an attribute.

The attribute name is:

href

The attribute value is:

https://example.com

The HTML specification defines attributes as additional information associated with elements, and attributes are written inside the start tag.

HTML Attribute Syntax

A common attribute syntax looks like this:

<element attribute="value">

For example:

<p class="intro">Welcome to my website.</p>

Here:

class="intro"

is an attribute.

An element can have multiple attributes.

For example:

<img
    src="cat.jpg"
    alt="A cat sitting on a chair"
    width="800"
    height="600"
>

This image has several attributes:

  • src
  • alt
  • width
  • height

Each provides additional information about the element.

The class Attribute

The class attribute is commonly used to identify elements that should receive particular CSS styling.

For example:

<p class="intro">
    Welcome to my website.
</p>

CSS could then target that class:

.intro {
    font-size: 20px;
}

The class attribute can also be used by JavaScript and other tools.

The id Attribute

The id attribute gives an element a unique identifier within the document.

For example:

<h2 id="contact">Contact Us</h2>

The element can then be linked to:

<a href="#contact">Jump to Contact</a>

This creates a link to the element with the matching id.

Boolean Attributes

Some HTML attributes work differently from attributes such as href or src.

These are called boolean attributes.

For example:

<input type="text" disabled>

The presence of disabled means the control is disabled.

You may also see:

<input type="checkbox" checked>

The checked attribute indicates that the checkbox is checked.

Boolean attributes do not need a value such as:

disabled="true"

The presence or absence of the attribute is what matters in these cases.

What Is Nesting in HTML?

Nesting means placing one HTML element inside another element.

For example:

<p>
    Learn <strong>HTML</strong> today.
</p>

The <strong> element is nested inside the <p> element.

Another example:

<article>
    <h2>HTML Elements</h2>

    <p>
        HTML elements provide
        <strong>structure</strong> to web pages.
    </p>
</article>

Here, the structure is:

article
├── h2
└── p
    └── strong

This tree-like structure is how HTML documents are represented by browsers and the DOM.

Correct and Incorrect Nesting

When elements are nested, they need to be closed in the correct order.

Correct:

<p>
    This is <strong>important</strong>.
</p>

Incorrect:

<p>
    This is <strong>important.</p>
</strong>

In the incorrect example, the <p> element is closed before the <strong> element.

The correct rule is simple:

The last element you open should normally be the first element you close.

Think of nested elements like boxes placed inside other boxes.

If you put a small box inside a larger box, you remove the small box before closing the larger box.

Proper nesting is important because HTML has defined rules for how elements may contain other elements.

Understanding HTML Document Structure

Before moving deeper into individual elements, it helps to understand how a complete HTML document fits together.

Here is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
</head>

<body>

    <header>
        <h1>My Website</h1>
    </header>

    <main>
        <h2>Welcome</h2>

        <p>
            This is my first HTML page.
        </p>
    </main>

    <footer>
        <p>Copyright 2026</p>
    </footer>

</body>
</html>

Let’s break this down.

<!DOCTYPE html> tells the browser that the document uses modern HTML syntax.

The <html> element is the root of the document.

The <head> contains metadata.

The <title> defines the document title.

The <body> contains the visible page content.

The <header> contains introductory content.

The <main> contains the primary content.

The <footer> contains footer information.

This structure is much easier to understand once you know what HTML elements represent.

Semantic HTML Elements

One of the most important improvements in modern HTML is the use of semantic elements.

A semantic element communicates what its content represents.

For example:

<header>

communicates that the content is introductory or navigational.

<nav>

represents a navigation section.

<article>

represents a self-contained piece of content.

<section>

represents a generic section of a document.

<footer>

represents footer content.

HTML’s semantic elements provide meaning rather than simply controlling visual appearance. The HTML specification defines the meaning of elements, while browsers and other software can use that information in different contexts.

<header>

A <header> usually contains introductory or navigational content.

For example:

<header>
    <h1>All About HTML</h1>
    <p>Learn HTML with practical examples.</p>
</header>

A header does not necessarily mean the very top of the entire website.

An individual <article> or <section> can also have its own header.

For example:

<article>

    <header>
        <h2>What Is HTML?</h2>
        <p>Published September 2026</p>
    </header>

    <p>HTML is the language used to structure web content.</p>

</article>

<nav>

The <nav> element identifies a section containing navigation links.

For example:

<nav>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>
</nav>

This tells the browser and other technologies that these links form a navigation section.

<main>

The <main> element represents the dominant content of the document.

For example:

<main>
    <h1>Learn HTML</h1>

    <p>
        HTML provides the structure of web pages.
    </p>
</main>

Using meaningful structure makes a page easier to understand and work with.

<article>

The <article> element is useful for content that can stand on its own.

Examples include:

  • Blog posts
  • News articles
  • Forum posts
  • Product cards
  • User comments
  • Other independently distributable content

For example:

<article>
    <h2>What Is an HTML Element?</h2>

    <p>
        An HTML element is a basic building block
        used to structure web content.
    </p>
</article>

MDN describes <article> as a self-contained composition that can be independently distributed or reused.

<section>

The <section> element represents a standalone section of content when there is not a more specific semantic element that fits.

For example:

<section>
    <h2>HTML Attributes</h2>

    <p>
        Attributes provide additional information
        about HTML elements.
    </p>
</section>

A section will normally have a heading.

<aside>

The <aside> element represents content that is related to the surrounding content but is not part of its main flow.

For example:

<aside>
    <h2>Quick Tip</h2>
    <p>
        Always provide useful alt text for meaningful images.
    </p>
</aside>

It can be useful for sidebars, related information, notes, or callout content.

<footer>

A footer can contain information such as:

  • Copyright information
  • Author information
  • Related links
  • Contact information
  • Navigation links

Example:

<footer>
    <p>Copyright 2026 All About HTML.</p>
</footer>

A footer can belong to the entire page or to a specific section or article.

HTML Elements and CSS

One common mistake beginners make is expecting HTML to control everything about a page’s appearance.

HTML is primarily responsible for structure and meaning.

CSS is used for presentation.

For example:

<h1>Welcome to My Website</h1>

HTML tells the browser that this is a heading.

CSS can then determine:

h1 {
    color: #1c3666;
    font-size: 42px;
    margin-bottom: 20px;
}

This separation is useful because you can change the design without changing the underlying content structure.

For example, the same HTML:

<p class="intro">
    Welcome to my website.
</p>

could be displayed with different fonts, colors, spacing, or layouts using CSS.

Block and Inline Elements: What Beginners Should Know

You will often hear HTML elements described as block-level elements and inline elements.

This terminology is still useful when learning how older HTML tutorials describe page layout, but there is an important distinction.

Whether an element behaves like a block or inline box on the page is largely a matter of CSS layout, particularly the display property. It should not be treated as the fundamental definition of what an HTML element is.

For example, CSS can change how an element is displayed:

span {
    display: block;
}

A <span> is normally used as an inline container, but CSS can change its layout behavior.

Likewise, an element can be styled differently depending on the design requirements.

So instead of thinking:

HTML elements are permanently divided into block and inline elements.

it is more useful to think:

HTML elements have semantic meanings, and CSS controls how those elements are presented and laid out.

This distinction becomes especially important when you move from beginner HTML into modern CSS.

Examples of Elements Commonly Used for Page Structure

Some commonly used structural elements include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

These elements communicate the purpose of different areas of a document.

Compare this:

<div class="header">
    ...
</div>

<div class="navigation">
    ...
</div>

<div class="content">
    ...
</div>

<div class="footer">
    ...
</div>

with:

<header>
    ...
</header>

<nav>
    ...
</nav>

<main>
    ...
</main>

<footer>
    ...
</footer>

The second version communicates more meaning directly through HTML.

The first version relies heavily on class names to explain what each <div> represents.

HTML Elements and Accessibility

HTML elements are also important for accessibility.

A web page is not used only by people looking at a screen with a mouse.

People may interact with websites using:

  • Screen readers
  • Keyboard navigation
  • Voice control
  • Mobile devices
  • Other assistive technologies

Semantic HTML gives browsers and assistive technologies more information about the structure and purpose of content.

For example, using:

<button>Submit</button>

is generally more meaningful than creating a clickable <div> and attempting to make it behave like a button with JavaScript.

Likewise, using:

<nav>

for navigation gives the document meaningful structure.

Using:

<h1>
<h2>
<h3>

for headings creates a logical hierarchy.

Using:

<label for="email">Email address</label>
<input id="email" type="email">

associates the label with the input field.

Good HTML structure is therefore not simply about making a page look correct.

It also helps communicate the page’s structure and meaning.

HTML Elements and SEO

HTML elements can also play an important role in search engine optimization.

Search engines need to understand the content and structure of a page.

A well-structured page might contain:

<h1>What Is an HTML Element?</h1>

<p>
    An HTML element is a basic building block
    used to structure web content.
</p>

<h2>HTML Attributes</h2>

<p>
    Attributes provide additional information
    about HTML elements.
</p>

The headings provide a logical content hierarchy.

Semantic elements such as <article>, <main>, <nav>, <header>, and <footer> can also provide meaningful structure.

However, semantic HTML is not a magic SEO trick.

Simply changing:

<div>

to:

<section>

does not automatically make a page rank higher.

The real benefit comes from creating a document that is properly structured, understandable, accessible, and meaningful.

The <strong> and <b> Elements Are Not the Same

Another common beginner misconception is that <strong> simply means “make this text bold.”

Browsers commonly display <strong> text in bold, but its semantic meaning is strong importance.

For example:

<p>
    <strong>Important:</strong> Save your work before closing the editor.
</p>

The <b> element has a different semantic purpose. It can be used to draw attention to text without conveying the same strong importance. CSS should be used when the goal is purely visual styling.

So:

<strong>Important warning</strong>

is different in meaning from:

<b>Product name</b>

Even if both are displayed in bold by default.

The <em> Element

The <em> element represents emphasis.

For example:

<p>
    You <em>really</em> need to learn HTML.
</p>

Browsers commonly display emphasized text in italics.

Again, the important point is that HTML is communicating meaning, while CSS controls how that meaning is visually presented.

Images and the alt Attribute

Images are another good example of how elements and attributes work together.

Consider:

<img src="html-elements.jpg" alt="HTML elements displayed in a code editor">

The element is:

<img>

The attributes are:

src
alt

The src attribute tells the browser where the image is located.

The alt attribute provides alternative text.

For a meaningful image, the alternative text should describe the important information conveyed by the image.

For example:

<img
    src="html-code.jpg"
    alt="HTML document showing headings, paragraphs, and links"
>

Avoid stuffing keywords into alt text simply for SEO.

The purpose of alternative text is to provide useful information when the image cannot be perceived.

HTML Elements and Forms

HTML elements are also used to build forms.

A simple form might look like this:

<form action="/submit" method="post">

    <label for="name">Name:</label>

    <input
        type="text"
        id="name"
        name="name"
    >

    <label for="email">Email:</label>

    <input
        type="email"
        id="email"
        name="email"
    >

    <button type="submit">
        Send
    </button>

</form>

This example contains several HTML elements:

<form>
<label>
<input>
<button>

Each element has a specific purpose.

The for attribute on the <label> corresponds to the id of the <input>.

That creates an explicit relationship between the label and input.

HTML Elements and Tables

HTML also provides elements for structured tabular data.

For example:

<table>

    <thead>
        <tr>
            <th>Name</th>
            <th>Language</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML</td>
            <td>Markup</td>
        </tr>

        <tr>
            <td>CSS</td>
            <td>Styles</td>
        </tr>
    </tbody>

</table>

Here:

  • <table> represents the table.
  • <thead> contains the header rows.
  • <tbody> contains the main data.
  • <tr> represents a table row.
  • <th> represents a header cell.
  • <td> represents a data cell.

Tables should be used for actual tabular data rather than simply being used to create page layouts.

HTML Elements and Multimedia

HTML also includes elements for multimedia.

For example, audio can be embedded using:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

Video can be embedded using:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

Modern HTML provides dedicated elements for media and other types of content.

HTML Elements Are Not the Same as CSS Classes

A common beginner mistake is confusing an HTML element with a CSS class.

Consider:

<p class="highlight">
    This is important.
</p>

Here:

<p>

is the HTML element type.

And:

highlight

is the value of the class attribute.

CSS might use:

.highlight {
    background: yellow;
}

The class can be reused:

<p class="highlight">First paragraph.</p>

<p class="highlight">Second paragraph.</p>

Both paragraphs use the same class.

But they are still <p> elements.

HTML Elements and the DOM

When a browser loads an HTML document, it parses the markup and creates a structured representation known as the Document Object Model, or DOM.

For example:

<h1>Hello</h1>

<p>Welcome to my website.</p>

can be represented conceptually as:

Document
├── h1
│   └── "Hello"
└── p
    └── "Welcome to my website."

JavaScript can interact with this structure.

For example:

const heading = document.querySelector("h1");

heading.textContent = "Hello, JavaScript!";

The JavaScript finds the <h1> element and changes its text.

This is one reason understanding HTML elements is important even if you eventually want to become a JavaScript developer.

HTML Elements and JavaScript

JavaScript can interact with HTML elements in many ways.

For example:

<button id="helloButton">
    Click Me
</button>

JavaScript can select the button:

const button = document.getElementById("helloButton");

An event can then be attached:

button.addEventListener("click", function () {
    alert("Hello!");
});

The HTML defines the button.

CSS can control its appearance.

JavaScript can control its behavior.

This separation between structure, presentation, and behavior is a useful way to understand the relationship between HTML, CSS, and JavaScript.

A Practical HTML Example

Let’s put several concepts together.

Consider this simple page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A simple HTML example">
    <title>My HTML Example</title>
</head>

<body>

    <header>
        <h1>My HTML Website</h1>

        <nav>
            <a href="/">Home</a>
            <a href="/about/">About</a>
            <a href="/contact/">Contact</a>
        </nav>
    </header>

    <main>

        <article>

            <h2>Learning HTML Elements</h2>

            <p>
                HTML elements are the building blocks
                used to structure web pages.
            </p>

            <h3>Why HTML Matters</h3>

            <p>
                Good HTML provides meaningful structure
                for browsers, users, and assistive technologies.
            </p>

            <img
                src="html-example.jpg"
                alt="Example of HTML code in a code editor"
            >

        </article>

    </main>

    <footer>
        <p>Copyright 2026 My Website.</p>
    </footer>

</body>

</html>

This relatively small example demonstrates many concepts:

  • Document structure
  • Headings
  • Paragraphs
  • Navigation
  • Links
  • Images
  • Attributes
  • Semantic elements
  • Nesting
  • Metadata

Once you understand individual elements, combining them to create complete pages becomes much easier.

Common HTML Mistakes Beginners Make

Learning HTML is relatively straightforward, but beginners often make the same mistakes.

1. Forgetting Closing Tags

For normal elements, remember to close the element.

Incorrect:

<p>This is a paragraph.

Correct:

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

Some elements are void elements and do not have closing tags, but normal elements generally require their appropriate closing tags.

2. Incorrect Nesting

Incorrect:

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

Correct:

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

Proper nesting keeps the document structure predictable.

3. Using <div> for Everything

You can technically create a large part of a page using <div> elements, but that does not mean you should.

Instead of:

<div class="navigation">

consider:

<nav>

Instead of:

<div class="article">

consider:

<article>

when the content actually represents an article.

4. Using Headings Just for Their Appearance

Don’t choose <h3> simply because it looks smaller than <h2>.

Headings should represent the content hierarchy.

Use CSS to change their visual appearance.

5. Forgetting alt Text

For meaningful images, provide useful alternative text.

<img
    src="html.jpg"
    alt="HTML code displayed in a browser"
>

Do not use meaningless alt text such as:

alt="image"

when you can provide a useful description.

6. Using HTML for Visual Styling

Avoid using HTML elements simply because their default appearance looks the way you want.

For example, don’t choose an element because it happens to display text in bold.

Use an element that represents the intended meaning, then use CSS for presentation.

How to Choose the Right HTML Element

A useful question to ask when writing HTML is:

“What does this content mean?”

Not:

“How do I make this content look like this?”

For example, if something is a heading:

<h2>Our Services</h2>

If it is a paragraph:

<p>We provide web development services.</p>

If it is navigation:

<nav>
    ...
</nav>

If it is an independent article:

<article>
    ...
</article>

If it is simply a generic container with no more specific semantic meaning:

<div>
    ...
</div>

This mindset will help you write cleaner HTML.

Why Understanding HTML Elements Matters

You might wonder why you need to understand HTML elements when website builders such as WordPress, Wix, Shopify, and other platforms can generate HTML automatically.

The answer is that HTML still sits underneath the interface.

When you edit a WordPress page, customize a Shopify theme, build a custom website, or troubleshoot a layout problem, understanding HTML makes it much easier to determine what is actually happening.

For example, if a heading is displaying incorrectly, you may discover that the page contains:

<div class="heading">
    My Heading
</div>

instead of:

<h1>My Heading</h1>

If a link isn’t working, you can inspect:

<a href="...">

If an image is missing, you can investigate:

<img src="...">

Understanding HTML gives you the ability to look beyond the visual editor and understand the actual structure of the page.

HTML Elements, Tags, and Attributes: A Quick Recap

Let’s look at this example:

<a href="https://example.com" class="button">
    Visit Example
</a>

The HTML element is the complete structure:

<a href="https://example.com" class="button">
    Visit Example
</a>

The opening tag is:

<a href="https://example.com" class="button">

The closing tag is:

</a>

The content is:

Visit Example

The attributes are:

href="https://example.com"
class="button"

The element name is:

a

Once you can identify these parts, HTML becomes much easier to read.

Are HTML Elements Case Sensitive?

HTML tag names are not case-sensitive.

For example, browsers can recognize:

<P>Hello</P>

and:

<p>Hello</p>

However, lowercase HTML is the normal convention and is strongly recommended for consistency and readability.

So you should generally write:

<h1>
<p>
<div>
<section>

rather than mixing uppercase and lowercase styles.

What Is HTML5?

You will often see the term HTML5 when learning HTML.

HTML5 was widely used as the name for the generation of HTML that introduced and standardized many modern capabilities, including semantic elements and multimedia features.

However, modern HTML is no longer best understood as a collection of numbered versions that stop changing.

The current HTML specification is maintained as a Living Standard. The WHATWG HTML Standard describes the current language and continues to be updated.

So if you see an article referring to “HTML5,” it is often referring generally to modern HTML.

Some familiar elements associated with modern HTML include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<audio>
<video>

These elements help developers create structured and meaningful web pages.

Modern HTML Is About Meaning, Not Just Appearance

One of the biggest changes in the way beginners should think about HTML is the move away from using HTML primarily for visual formatting.

Older websites often contained markup that focused heavily on presentation.

Modern development generally separates responsibilities:

HTML: Structure and meaning

CSS: Presentation and layout

JavaScript: Behavior and interactivity

For example:

<button class="primary-button">
    Buy Now
</button>

HTML identifies the control as a button.

CSS might make it blue, rounded, large, or animated.

JavaScript might respond when the user clicks it.

Each technology has a different role.

A Simple Way to Remember HTML Elements

If you are just starting to learn HTML, don’t try to memorize every element.

Start with the elements you will use most often:

<html>
<head>
<title>
<body>

<h1>
<h2>
<h3>

<p>
<a>
<img>

<ul>
<ol>
<li>

<div>
<span>

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

<form>
<label>
<input>
<button>

<table>
<tr>
<th>
<td>

Once these become familiar, you can learn additional elements as you need them.

MDN maintains a comprehensive HTML element reference that groups elements by their purpose, including document structure, text content, images, multimedia, tables, forms, interactive elements, and more.

Final Example: Building a Small Page

Let’s create one final example that brings everything together.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="description"
        content="A simple example demonstrating HTML elements."
    >

    <title>Understanding HTML Elements</title>
</head>

<body>

    <header>

        <h1>Understanding HTML Elements</h1>

        <nav>
            <a href="/">Home</a>
            <a href="/html/">HTML</a>
            <a href="/css/">CSS</a>
        </nav>

    </header>

    <main>

        <article>

            <header>
                <h2>What Is an HTML Element?</h2>
            </header>

            <p>
                An HTML element is a building block used
                to structure content on a web page.
            </p>

            <h3>Example</h3>

            <p>
                Here is a simple paragraph element:
            </p>

            <pre><code>&lt;p&gt;Hello, world!&lt;/p&gt;</code></pre>

            <h3>Learn More</h3>

            <p>
                You can learn more about
                <a href="/html-elements/">
                    HTML elements
                </a>
                in our HTML tutorials.
            </p>

        </article>

    </main>

    <footer>

        <p>
            Copyright 2026 All About HTML.
        </p>

    </footer>

</body>

</html>

Although this example is simple, it demonstrates an important principle:

Good HTML is about giving content the correct structure and meaning.

Once that structure is in place, CSS and JavaScript can build on top of it.

Conclusion

HTML elements are the foundation of web pages.

An HTML element identifies a particular piece of content and gives it meaning or structure. A typical element may contain an opening tag, content, and a closing tag, while void elements such as <img>, <br>, and <input> do not have closing tags.

Attributes provide additional information about elements.

For example:

<a href="https://example.com">
    Visit Example
</a>

Here, href tells the browser where the link should go.

HTML elements can also be nested:

<p>
    Learn <strong>HTML</strong> today.
</p>

Semantic elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> help describe the purpose and structure of content.

Understanding these concepts gives you a strong foundation for learning CSS, JavaScript, WordPress development, frontend development, and modern web development in general.

The most important thing to remember is that HTML is not simply a collection of tags you need to memorize.

HTML is a way of describing the structure and meaning of content.

When you start thinking about what your content means instead of only thinking about how you want it to look, choosing the correct HTML element becomes much easier.

And once you understand HTML elements, you have one of the most important foundations needed to build websites.

Frequently Asked Questions About HTML Elements

What is an HTML element?

An HTML element is a component of an HTML document that defines a piece of content or structure. A normal element commonly consists of an opening tag, content, and a closing tag, such as <p>This is a paragraph.</p>.

What is the difference between an HTML tag and an HTML element?

An HTML tag is the markup used to identify the beginning or end of an element, such as <p> or </p>. An HTML element includes the tags and the content between them. For example, <p>Hello</p> is a complete paragraph element.

What are examples of HTML elements?

Common HTML elements include <h1>, <p>, <a>, <img>, <div>, <span>, <ul>, <li>, <form>, <button>, <header>, <main>, <article>, and <footer>. HTML contains many other elements for different purposes.

What are void elements in HTML?

Void elements are HTML elements that cannot contain child content and do not have closing tags. Examples include <img>, <br>, <input>, <hr>, <meta>, and <link>.

Why are HTML elements important?

HTML elements provide the structure and meaning of web content. They allow browsers, search engines, assistive technologies, and developers to understand how different pieces of content relate to each other.

Are HTML elements case-sensitive?

HTML element names are not case-sensitive, but lowercase is the standard convention and is recommended for writing clean, consistent HTML. For example, <P> and <p> are interpreted as the same HTML element, but <p> is the preferred style.

Can an HTML element contain another HTML element?

Yes. HTML elements can be nested inside other elements as long as the nesting follows the content rules defined for those elements. For example, a <strong> element can be placed inside a <p> element.

What is a semantic HTML element?

A semantic HTML element is an element whose name communicates the meaning or purpose of its content. Examples include <article>, <nav>, <main>, <header>, <section>, and <footer>. Semantic HTML helps make document structure clearer to browsers, developers, and assistive technologies.

Do HTML elements affect SEO?

HTML provides the structure and meaning that search engines can use when interpreting a page. Proper headings, meaningful links, semantic structure, descriptive image alternative text, and well-organized content can contribute to a technically sound and accessible page. However, simply replacing one HTML element with another does not guarantee higher search rankings.

What is the difference between HTML, CSS, and JavaScript?

HTML provides the structure and meaning of web content. CSS controls presentation, styling, and layout. JavaScript is commonly used to add behavior and interactivity. Together, these technologies form the foundation of modern web development.

External References

For technical accuracy and as useful references for readers, I recommend linking to these authoritative resources from the article or from an “HTML Resources” section:

All About HTML

HTML

All About HTMLAuthor posts

Avatar for All About HTML

<b>Hello</b> I’m Ahmed Haseeb, Back-end Web DeveloperAfter graduating in BS(Computer Science), I’ve been building websites for over 10 years both as a freelance web developer and designer and as part of a team in various companies across the world. I acquired project and time management skills, as well as the ability to communicate with team members and clients while effectively meeting milestones and deadlines.As a freelance web developer and designer I collaborated with several graphic designers, at the same time maintaining clients in Canada, America, Australia and the UK.

Related Posts ...

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *