What Are HTML Elements? How to Define HTML 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 Elements	Inline Elements
Start on a new line	Stay in the same line
Take full width	Only take needed space
Can contain other blocks/inline	Usually 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 Elements	Empty (Void) Elements
Have opening + closing tags	No closing tag
Can hold content/text	Cannot 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:

Tag	Purpose
`<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

Create a simple HTML file and experiment with different elements.
Try converting non-semantic HTML to semantic (e.g., replace <div class="header"> with <header>).
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: