Why Accessible HTML Matters

How we choose to articulate our thoughts online is important. Beyond the words and sentences we create, there's another language quietly operating in the background—shaping the way our online content is experienced by both users and search engines: HTML 🧱

There are "rules" for speaking and writing in a way that people can understand. The same goes for structuring content with HTML.

Semantic HTML helps you communicate effectively with other technology on the web.

What Is Semantic HTML?

Semantic HTML is the structural foundation that gives a website the ability to be intuitive and user-friendly for all people and web crawlers.

HTML, often known as the "skeleton" of the web, has loads of elements you can use to shape your content. Semantic HTML structures your content based on what each HTML element means, not just how it looks. This turns a mishmash of code (e.g. <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code>) into a neat and tidy outline (e.g. <code>&lt;section&gt;</code> and <code>&lt;h1&gt;</code>).

‍

Versus

Semantic Code:

‍
Notice how much clearer and organized a page looks when it's coded semantically? It's like each element has its own place and purpose, making the webpage easier to understand and navigate. Now imagine these semantic tags being applied to a website's banner, the navigation menu, page content, related links, the footer, etc.

Wow, the clarity!

HTML Accessibility: A Win-Win

But, we're not focusing on semantic HTML because it theoretically provides clarity. It's not just about making code cleaner either. It helps search engines and assistive devices (aka Web Accessibility Tools) understand a webpage's content better.

• Semantic HTML 🤝 Users
• Semantic HTML 🤝 Crawlers

Here's the technical explanation:

As the browser processes the content, it generates several models, including the Document Object Model (DOM), CSS Object Model (CSSOM), and the Accessibility Object Model (AOM). Assistive devices like screen readers leverage the AOM to understand and interpret content. A semantically rich AOM can be the difference between an accessible webpage and a confusing one.

5 Specific SEO Benefits of Semantic HTML

This semantic information isn't just valuable for assistive technologies—it's also helpful for search engines. A well-structured, semantically coherent webpage allows search engines to understand the content of a webpage better.

<div class=post-note">You've spent time and resources on creating great content, do yourself a favor and make sure it's complimented by good, semantic HTML. You'll drive more organic visibility of your content.</div>

‍

1. Better Crawling and Indexing

Help crawlers and users access your content. Our goal is to make it simple for search engine bots to crawl, understand, and index your content. By using accessible HTML elements like <code>&lt;main&gt;</code> for main content, <code>&lt;aside&gt;</code> for extra information, and <code>&lt;nav&gt;</code> for navigation, crawlers can easily figure out your page's layout. This leads to better indexing and gives your website the advantage it needs.

2. Content Targeting

Help search engines match your content to user queries effectively. The goal is to show context to crawlers, allowing search engines to link your content precisely to user searches. For example, using <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements to label an image and its caption helps search engines understand the connection between the image and its description, improving the image's SEO performance.

3. Complements JSON-LD (Schema.org) Markup

Create consistent signals for search engine crawlers. Semantic HTML and JSON-LD structured data work together to provide clear context and simplicity for your webpages. Semantic HTML guides both your website visitors and search engines by improving readability and comprehension of your content. JSON-LD operates behind the scenes, offering a well-organized summary of a webpage's context to search engines. When semantic HTML supports and adds to the context provided by Schema.org markup, your webpage is in an excellent position to achieve Rich Results and Featured Snippets.

4. Assists Entity Optimization

Send clear signals to search engines about your content's context and relevance. Semantic HTML helps search engines recognize the elements within content and their connections more effectively. In SEO, an entity can range from a person, place, or organization to a distinct idea or concept. Semantic HTML tags offer clear hints about the meaning of these entities in a way search engines can understand, leading to improved comprehension during indexing and a clearer grasp of the subject matter.

5. Improved Compatibility with Search Generative Experiences (SGEs) - Possibly

Semantic HTML is likely to play a crucial role in future search "ranking" algorithms. It may lead to better representation in AI-generated search experiences. For example, using tags like <code>&lt;section&gt;</code>, <code>&lt;article&gt;</code>, or <code>&lt;header&gt;</code> clearly indicates content structure, assisting AI in generating search results based on user queries. Investing time in semantic HTML now could put your website ahead as AI and search continue to evolve.

A Perfect Semantic HTML Page

‍

List of 13 Semantic HTML Elements

1. <code>&lt;article&gt;</code>: Defines content that forms an independent part of a document or site page, like a blog post, a forum post, or a news story.
2. <code>&lt;aside&gt;</code>: Defines content aside from the content it is placed in. The aside content should be related to the surrounding content, such as a pull quote or sidebars.
3. <code>&lt;details&gt;</code>: Defines additional details that the user can view or hide on demand. Often used to create an interactive widget that the user can open and close.
4. <code>&lt;figcaption&gt;</code>: Defines a caption for a <code>&lt;figure&gt;</code> element. It can be placed as the first or last child of a <code>&lt;figure&gt;</code> block.
5. <code>&lt;figure&gt;</code>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
6. <code>&lt;footer&gt;</code>: Defines a footer for a document or a section. It typically contains information about the author of the document, copyright information, etc.
7. <code>&lt;header&gt;</code>: Represents introductory content or a set of navigational links. It typically contains the section's heading (an h1–h6 element or an hgroup element), but can also contain other content like a logo, wrapped section's heading, a search form, or any relevant widgets.
8. <code>&lt;main&gt;</code>: Specifies the main content of a document. The content inside the <code>&lt;main&gt;</code> element should be unique to the document and should not be replicated across a set of documents.
9. <code>&lt;mark&gt;</code>: Defines text that is highlighted for reference or notation purposes, due to its relevance in another context.
10. <code>&lt;nav&gt;</code>: Defines a section of a page that contains navigation links that appear often on a site.
11. <code>&lt;section&gt;</code>: Defines a section in a document. It is a thematic grouping of content, typically with a heading.
12. <code>&lt;summary&gt;</code>: Defines a visible heading for a <code>&lt;details&gt;</code> element. The heading can be clicked to view/hide the details
13. ‍<code>&lt;time&gt;</code>: Defines a specific time (or a date, or a duration). It can be used together with the datetime attribute to represent a machine-readable version of the date/time.

At the end of the day, semantic HTML about clear communication. It helps your content be more accessible and understandable for your audience, search engines, and assistive technologies. As you move forward with your web development practices, remember the power of accessible HTML - it's not just a best practice, it's a commitment to communication. 🤝

PS—Remember, HTML should be used to structure content, not to style it—that's the job of CSS. 😎