Topic 4 of 57 2. HTML Basics Interactive Tutorial

HTML Elements: Types, Structure, and Examples

12 mins read Last updated: 12 Nov 2026 15,900 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What is an HTML element and what is its internal structure?

Direct Answer & Overview

An HTML element is the fundamental building block of an HTML document. It typically consists of a start tag (with optional attributes), inner content (text, child elements, or media), and an end tag. For example:

Welcome to web design

Comprehensive Step-by-Step Concepts

1) Anatomy of an HTML Element: A standard element comprises three parts: the opening tag with element name (

), any attributes (class="lead"), the enclosed content ("Hello World"), and the closing tag with forward slash (

). 2) Container vs Leaf Elements: Container elements (like

, , ) primarily contain text nodes or atomic content. 3) Void Elements (Self-Closing): Some elements cannot hold child content or closing tags. These are termed void elements, including ,
,

, , , and . In HTML5, trailing slashes (e.g. ) are optional. 4) Nested Elements: Elements can be nested inside other elements to create document hierarchies (e.g., an

tag inside an

inside an

). Proper nesting requires closing child tags before parent tags. 5) Empty vs Non-Empty Elements: An empty element is an element without any text or child nodes between its tags. A non-empty element encloses text nodes or subordinate elements.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements Structure</title>
</head>
<body>
    <!-- Container Element: article -->
    <article>
        <!-- Leaf Element with Attribute -->
        <h1 class="heading-primary">Mastering HTML Elements</h1>
        <!-- Nested Elements: strong inside p -->
        <p>HTML elements are the <strong>building blocks</strong> of all modern web pages.</p>
        <!-- Void Element: hr -->
        <hr>
        <!-- Nested List Structure -->
        <ul>
            <li>Opening Tag</li>
            <li>Content &amp; Attributes</li>
            <li>Closing Tag</li>
        </ul>
    </article>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always close elements in the reverse order they were opened to maintain a predictable, accessible DOM tree.

Common Technical & Interview Questions

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

A1: An HTML tag is the syntactical marker enclosed in angle brackets (such as

). An HTML element encompasses the entire unit: opening tag, attributes, enclosed content, and closing tag combined.

Q2: What is an overlapping tag error and how do browsers handle it?

A2: Overlapping occurs when tags are closed out of order, like '

Text

'. HTML5 parsing rules automatically reconstruct the tree into valid parent-child relationships, but this may cause unintended styling or DOM mutations.