Web Development - HTML Semantics
HTML Semantic Elements
Semantic elements clearly describe their meaning in a way that both browsers and developers can understand. They make your HTML more structured, readable, and easier to maintain.
What Are Semantic Elements?
A semantic element tells the browser what kind of content it contains.
For example, <header> defines a header, and <article> defines an article.
Example
Before and after using semantic tags:
<!-- Non-semantic -->
<div id='header'>Header</div>
<div id='nav'>Navigation</div>
<div id='content'>Main content</div>
<div id='footer'>Footer</div>
<!-- Semantic -->
<header>Header</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
Try it Yourself »
Common Semantic Elements
HTML5 introduced many new semantic elements to define the structure of a web page.
| Element | Description |
|---|---|
| <header> | Defines a header for a document or section |
| <nav> | Defines navigation links |
| <main> | Defines the main content of a document |
| <section> | Defines a section in a document |
| <article> | Defines an independent piece of content |
| <aside> | Defines content related to the main content (like a sidebar) |
| <footer> | Defines a footer for a document or section |
| <figure> | Defines self-contained media, like an image or diagram |
| <figcaption> | Defines a caption for a <figure> |
Example of a Semantic Layout
Here's a complete example of how semantic elements can be used to structure a web page:
Example
Basic semantic page structure:
<header>
<h1>My Website</h1>
<nav>
<a href='#'>Home</a> |
<a href='#'>About</a> |
<a href='#'>Contact</a>
</nav>
</header>
<main>
<section>
<article>
<h2>About HTML</h2>
<p>HTML stands for HyperText Markup Language.</p>
</article>
</section>
<aside>
<p>Tip: Learn CSS to style your HTML pages.</p>
</aside>
</main>
<footer>
<p>Copyright 2025 - My Website</p>
</footer>
Try it Yourself »
Why Use Semantic Elements?
Semantic elements improve both accessibility and search engine optimization (SEO). They help screen readers, browsers, and search engines understand the structure of your content.
- Make code easier to read and maintain
- Improve accessibility for assistive technologies
- Help search engines identify important content
- Reduce the need for extra
<div>elements
Best Practices
- Use semantic tags whenever possible for structure.
- Do not use
<div>where a semantic tag fits better. - Use
<main>only once per page. - Use
<article>for self-contained content (e.g., blog posts).
Tip: Semantic HTML helps your website rank better in search results and is easier to maintain over time.
Next, you'll learn about HTML Multimedia - how to add images, audio, and video to bring your pages to life.
