HTML Elements & Tag Names

HTML is built using elements, which are the building blocks of every webpage. Understanding how they work is essential for writing clean, functional HTML code.

In this guide, you’ll learn:
✔ What HTML elements are and how they differ from tags
✔ How to define and use HTML tag names correctly
✔ Types of HTML elements (block vs. inline, empty vs. container)
✔ Best practices for writing semantic HTML

Let’s break it down step by step.

1. What Are HTML Elements?

An HTML element is a component of an HTML document that defines its structure and content. It consists of:

  • An opening tag (<tagname>)

  • Content (text, images, or other elements)

  • A closing tag (</tagname>)

Example:

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

  • <p> → Opening tag

  • This is a paragraph element. → Content

  • </p> → Closing tag

HTML Element vs. HTML Tag

  • A tag is just the opening/closing marker (<p>, </p>).

  • An element includes the tag and its content.

2. How to Define HTML Tag Names

Every HTML element has a tag name, which tells the browser what kind of content it contains.

Rules for Writing HTML Tag Names

✅ Case-insensitive but prefer lowercase

  • Works: <div>, <DIV>, <Div>

  • Best practice: Always use lowercase (<div>)

✅ Must be enclosed in angle brackets (< >)

  • Correct: <h1>

  • Wrong: h1, [h1]

✅ Some tags are self-closing (void elements)

  • No closing tag needed: <img>, <br>, <input>

✅ Nesting must be correct

  • Wrong: <p><strong>Text</p></strong>

  • Right: <p><strong>Text</strong></p>

3. Types of HTML Elements

A. Block-Level vs. Inline Elements

Block-Level ElementsInline Elements
Start on a new lineStay in the same line
Take full widthOnly take needed space
Can contain other blocks/inlineUsually only contain text/data
Examples: <div>, <p>, <h1>Examples: <span>, <a>, <strong>

Example:

				
					<div>This is a block-level element.</div>  
<span>This is inline.</span> <a href="#">Link</a>

B. Container vs. Empty (Void) Elements

Container ElementsEmpty (Void) Elements
Have opening + closing tagsNo closing tag
Can hold content/textCannot hold content
Examples: <p>, <div>Examples: <img>, <br>, <hr>

Example:

				
					<p>This is a container element.</p>  
<img decoding="async" src="image.jpg" alt="Photo"> <!-- Void element -->

4. Semantic HTML Elements

Semantic elements clearly describe their meaning to browsers and developers:

TagPurpose
<header>Top section of a page
<nav>Navigation links
<main>Primary content
<section>Thematic grouping
<article>Independent content (blog post)
<footer>Bottom section

Example:

				
					<header>  
    <h1>Website Title</h1>  
    <nav>  
        <a href="/">Home</a>  
        <a href="/about">About</a>  
    </nav>  
</header>

5. Common Mistakes When Using HTML Elements

❌ Forgetting to close tags → <p>Hello (should be <p>Hello</p>)
❌ Incorrect nesting → <p><strong>Text</p></strong>
❌ Using deprecated tags → <center>, <font> (use CSS instead)
❌ Missing alt in images → <img src="pic.jpg"> (should be <img src="pic.jpg" alt="Description">)

6. Best Practices for Writing HTML Elements

✔ Use lowercase for tags (<div>, not <DIV>)
✔ Close all container tags (<p></p>, not just <p>)
✔ Use semantic tags when possible (<article>, <nav>)
✔ Validate your HTML (use W3C Validator)

7. How to Practice HTML Elements

  1. Create a simple HTML file and experiment with different elements.

  2. Try converting non-semantic HTML to semantic (e.g., replace <div class="header"> with <header>).

  3. Use developer tools (right-click → Inspect) to see how websites use elements.

Final Thoughts

Understanding HTML elements and tag names is crucial for building well-structured web pages. Whether you’re using block-level or inline elements, semantic tags, or void elements, following best practices ensures clean, maintainable code.

Next Steps:

  • Learn HTML attributes (e.g., class, id, style).

  • Explore CSS styling to enhance your elements.

  • Practice by building a small project (e.g., a personal bio page).

Scroll to Top