Following a discussion with a colleague about accessibility and the correct tags on a website, I thought it appropriate to create this short article about semantic HTML and make it clear that it is more than just well-structured code.
Using HTML tags correctly not only improves the user experience, but also significantly boosts SEO rankings, accessibility and loading speed.
What is semantic HTML?
Semantic HTML uses tags that describe the meaning and purpose of the content, not just its appearance.
Instead of using <div> for everything, we must use specific tags such as <header>, <nav>, <main>, <article>, <section> and <footer> that clearly indicate the function of each part of the content.
Advantages for accessibility
Intuitive navigation for screen readers
Visually impaired users rely on assistive technologies that interpret semantic structure. A <nav> allows to jump directly to the menu, while <main> identifies the main content without getting lost in secondary elements.
Key points
Semantic tags establish “key points” or points of reference that simplify navigation..:
<header>– Identifies the header<main>– Mark the main content<aside>– Points out complementary content<footer>– Delimit the footer
Better Understanding of the Context
Tags such as <article>, <section> and <time> provide semantic context to help understand hierarchies and relationships between content, benefiting all users, especially those with cognitive difficulties.
Impact on SEO
Search engines understand content better
Google and other search engines use semantic structure to understand the relevance and hierarchy of content. A <h1> followed by <h2> and <h3> creates a clear structure that algorithms can interpret and evaluate.
Rich Snippets and structured data
Semantic HTML facilitates the implementation of structured data, which can result in rich snippets in search results, increasing visibility and CTR (Click-Through Rate).
Better content indexing
Tags such as <article> help search engines identify unique and valuable content, while <time> with datetime attributes provides accurate temporal information for articles and news items.
Benefits for WPO (Web Performance Optimization)
Cleaner and more efficient code
Semantic HTML reduces the need for additional CSS and JavaScript to create functionality that semantic tags provide natively, resulting in lighter files.
Reduced dependence on Frameworks
Many features that previously required JavaScript libraries are now available natively in HTML5, reducing overall page weight and improving load times.
Improved pat-down and understanding
Well-structured HTML code compresses more efficiently, reducing transfer size and improving loading speed.
Key semantic tags and their uses
Main structure
<header>Page or section header<nav>: Main navigation (inside or outside the header)<main>: Unique main content<footer>Footer with secondary information
Content Organization
<section>Groups thematically related content<article>Independent and autonomous content<aside>Supplementary or secondary information
Specific Content
<time>Date and time with datetime format<address>Contact information-
<figure>and<figcaption>: Images with descriptions
Practical implementation
To maximize the benefits of semantic HTML:
- Plan the structure before writing code
- Use only one
<main>tag per page - Include appropriate headings in each
<section> - Combines with ARIA attributes for greater accessibility
- Validate your code regularly to ensure compliance
Semantic HTML is not a trend, it is a fundamental methodology that benefits all of us: users, developers and search engines. Investing time in structuring HTML correctly from the start saves resources in the long run and creates more inclusive, efficient and advantageous web experiences for search engines.
P.S. This article has arisen from a conversation with Juanra from Diseñarte and is just a brief introduction to semantic HTML, with about 100 elements. The initial motive started from the script that brings by default the WordPress Twenty Twenty-Five theme (among others) so that screen readers can jump directly to the content and that assumes that our page will have a tag main. Thanks Juanra.