HTML Elements

HTML Elements: Anatomy, Nesting, and Void Tags

An HTML element consists of an opening tag, the content inside it, and a matching closing tag. Together, these pieces tell the browser what role a piece of text or media plays on the page.

flowchart LR
    A["Opening Tag"] --> B["Text or Child Elements"]
    B --> C["Closing Tag"]
    A --> D["Complete HTML Element"]
    B --> D
    C --> D

For example, a paragraph element starts with an opening p tag, contains a sentence, and ends with a closing /p tag. The browser treats the entire unit as one element node in the DOM tree.

Nested HTML Elements

HTML elements can live inside other elements. This pattern is called nesting, and it builds the parent-child hierarchy of every web page. The html element wraps body, body wraps section, and section wraps headings and paragraphs.

Always close nested tags in the exact reverse order you opened them. Closing an outer tag before an inner tag creates overlapping markup that forces browsers to guess your layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements Demo</title>
</head>
<body>
    <article>
        <h2>Clean Nesting Example</h2>
        <p>This paragraph contains <strong>important bold text</strong> inside it.</p>
        <hr>
        <p>First line of an address.<br>Second line after a line break.</p>
    </article>
</body>
</html>

Void Elements (Empty Elements)

Some HTML elements hold no inner text and have no closing tag. The HTML5 specification calls these void elements. Common void elements include br for line breaks, hr for thematic dividers, img for images, input for form fields, and meta for page metadata.

In HTML5, write void elements cleanly without a trailing slash, such as hr or br inside angle brackets.

Common Mistakes to Avoid

• Overlapping nested tags: Never open p then strong and close p first. Always close strong before closing p.
• Forgetting closing tags on container elements: Leaving a div or section unclosed pulls later sections inside it and breaks page styling.
• Using br tags to add vertical spacing: Use CSS margin or padding for layout gaps instead of stacking empty line breaks.

Frequently Asked Questions

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

A tag is the markup bracket syntax itself, while an element is the complete structure from opening tag through content to closing tag.

Do void elements need a closing slash in HTML5?

No. Standard HTML5 does not require a trailing slash on void elements like br, hr, or img, though parsers accept it.