Semantic HTML5
Category: Design
What is Semantic HTML5?
Semantic HTML5 refers to the use of HTML elements that have meaning and describe the exact purpose of the content, rather than just visually formatting it. These elements clearly describe their role to both browsers and search engines, as well as developers.
Semantic HTML helps create better structured, accessible and SEO-optimized web content.
Semantic vs Non-Semantic HTML
Semantic HTML
- Elements have meaning
- Better code readability
- Improved SEO optimization
- Better accessibility
- Easier maintenance
- Example: <header>, <nav>, <article>
Non-Semantic HTML
- Elements have no meaning
- Worse code readability
- Worse SEO optimization
- Worse accessibility
- Worse maintenance
- Example: <div>, <span>
Main Semantic HTML5 elements
<header>
Represents the header of a document or section. Usually contains titles, logo and navigation.
<nav>
Defines a section with navigation links. Used for the main menu of the website.
<main>
Represents the main content of the document. It must be unique for the page.
<article>
Represents independent, self-contained content like an article, blog post or news.
<section>
Defines a thematic group of content, usually with a title.
<aside>
Represents content that is indirectly related to the main content (sidebar).
<footer>
Represents the footer of a document or section. Contains information about the author, copyright and other.
<figure> и <figcaption>
Used to group images, diagrams or code with their heading text.
<time>
Represents a time or date. It can include the datetime attribute for machine-readable format.
<mark>
Represents text that is marked or underlined for reference or important purposes.
Structure of Semantic HTML5 document
Typical structure of Semantic HTML5 page
- <header> - Header
- <nav> - Navigation
- <main> - Main content
- <main> - Main content
- <section> - Section
- <article> - Article
- <aside> - Sidebar
- <footer> - Footer
Advantages of using Semantic HTML5
- Improved SEO: Search engines understand the structure and content of your website better
- Better accessibility: Assistive technologies (screen readers) can more easily navigate and understand the content
- Easier maintenance: The code is more readable and easier to understand by other developers
- Better compatibility: Semantic elements are standardized and work well in all modern browsers
- Better structure: The website has a clear, logical structure that is easy to understand
- Future-proof: Semantic code is more resistant to changes in technologies
Common mistakes and good practices
| Mistake | Good practice | Explanation |
|---|---|---|
| Using <div> for everything | Using appropriate semantic elements | Semantic elements give meaning to the content |
| Many <header> and <footer> in <body> | One <header> and <footer> in <body>, but can be used in other semantic elements | <header> and <footer> can be used in <article> and <section> |
| Confusion between <section> and <article> | <article> for independent content, <section> for thematic groups | <article> must have meaning by itself |
| Using <section> instead of <div> for styling | <section> only when it has semantic meaning | <div> is for grouping without semantics, <section> has meaning |
| Missing <main> element | Always use <main> for main content | <main> helps assistive technologies to identify the main content |