- <hr> tag
- <nav> tag
- <pre> tag
- Anchor tag
- Article tag
- Attributes
- Audio tag
- Blink tag
- Block elements
- Blockquote
- Bold
- Buttons
- Canvas element
- Center text
- Checkbox
- Comment
- Data attribute
- Div
- Doctype
- Entities
- Font color
- Font size
- Footer
- Form
- Global attributes
- Header tag
- iFrame
- Images
- Inline elements
- Inline style attribute
- Input element
- Italic
- Label
- Lang attribute
- Line break
- Linking local webpages
- Links
- Marquee tag
- Metadata
- Ordered lists
- Paragraph tag
- Script tag
- Select
- Semantic elements
- Space
- Span tag
- Strikethrough
- Style tag
- Subscript
- Superscript
- Table
- Textarea
- Tooltip
- Underline
- Unordered lists
- Video tag
- What is HTML?
HTML
HTML Semantic Elements: Syntax, Usage, and Examples
HTML semantic elements give meaningful structure to a webpage, helping browsers, search engines, and users understand the content more easily. Unlike non-semantic elements that don’t describe their purpose, semantic elements clearly define the role of the content they contain.
How to Use HTML Semantic Elements
You can build well-structured web pages by using semantic elements instead of generic <div> and <span> elements. Here’s an example of how you can structure a webpage with semantic HTML:
Learn HTML on Mimo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>What Are Semantic Elements in HTML?</h2>
<p>Semantic elements give meaning to webpage structure.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">HTML Forms</a></li>
<li><a href="#">HTML Metadata</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
<header>holds the website’s title and navigation links.<nav>contains navigation menus.<main>wraps the core content of the page.<article>represents a self-contained section, like a blog post.<aside>provides additional information, such as related links.<footer>defines the bottom section of the page.
When to Use HTML Semantic Elements
Use semantic HTML whenever you want to improve a webpage’s structure and accessibility. Here are three key situations where semantic elements enhance a website:
1. Improving SEO and Accessibility
Search engines and screen readers rely on semantic elements to interpret page content. When you use <main>, search engines know where the primary content starts, helping with indexing and ranking.
<main>
<h1>About Our Company</h1>
<p>We build high-quality web applications using modern technologies.</p>
</main>
2. Making Code Easier to Read and Maintain
Instead of using <div class="nav">, you can use <nav> to make your code more understandable. This makes it easier to read and modify later.
<nav>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</nav
3. Structuring Blog Posts and Articles
You can use <article>, <section>, and <aside> to organize content more effectively.
<article>
<h2>Understanding HTML Semantic Elements</h2>
<p>HTML5 introduced semantic elements to improve web development.</p>
</article>
Examples of HTML Semantic Elements
Example 1: Using Semantic Elements in a Blog Layout
This example structures a simple blog page with semantic HTML.
<header>
<h1>Web Development Blog</h1>
</header>
<main>
<article>
<h2>Introduction to Semantic HTML</h2>
<p>Semantic elements improve webpage structure and readability.</p>
</article>
</main>
<footer>
<p>Contact us at contact@example.com</p>
</footer>
Example 2: Replacing Non-Semantic Elements with Semantic HTML
Before semantic elements, many web pages used generic <div> elements for structure.
Non-Semantic Approach (Not Recommended)
<div class="header">
<h1>Welcome</h1>
</div>
<div class="content">
<p>This is an example of non-semantic HTML.</p>
</div>
Semantic Approach (Best Practice)
<header>
<h1>Welcome</h1>
</header>
<main>
<p>This is an example of semantic HTML.</p>
</main>
Example 3: Using <nav> for Menus
The <nav> element explicitly defines navigation menus.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Learn More About HTML Semantic Elements
1. Common Semantic Elements
Here are some of the most frequently used semantic elements:
- Structural Elements:
<header>,<main>,<footer>,<section>,<article>,<aside>,<nav> - Text Content Elements:
<figure>,<figcaption>,<mark>,<time> - Form Elements:
<fieldset>,<legend>
2. Comparing Non-Semantic and Semantic Elements
Non-semantic elements like <div> and <span> don’t describe their content, while semantic elements like <section> and <header> provide clear meaning.
Non-Semantic Example:
<div class="footer">
<p>All rights reserved.</p>
</div>
Semantic Example:
<footer>
<p>All rights reserved.</p>
</footer>
3. Using Semantic Elements in Forms
Even forms benefit from semantic HTML, making them easier to understand.
<form>
<fieldset>
<legend>Sign Up</legend>
<label for="name">Name:</label>
<input type="text" id="name">
</fieldset>
</form>
Using semantic HTML elements ensures your webpage is well-structured, accessible, and SEO-friendly. By applying semantic tags instead of generic <div> elements, you make your content clearer for search engines, assistive technologies, and other developers.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot