More than Semantic HTML

Introduction

As a front-end engineer, while we don't need to memorize all HTML tags, it's essential to have a solid understanding of common HTML tags and their usage scenarios, such as <section>, <main>, <article>, h1~h6, <aside>, <footer>, <a>, <button>, etc., and to use them appropriately in different contexts.

However, what is the purpose of using semantic tags? I find that many articles only skim the surface of semantic tags, discussing where specific tags should be used, leading to a colorful array of tags on web pages without a corresponding enhancement in user experience.

This can easily lead front-end developers to mistakenly believe that not using semantic tags is a grave error, even subconsciously avoiding <div> and <span>. Therefore, I’d like to share some of my thoughts on this matter.

Some Historical Context

In the early days of HTML, there were many non-semantic tags like <b>, <font>, and <center>. These tags lacked meaning and were simply used for styling purposes. With the advent of CSS, styling could be handled separately from HTML tags. This provides the backdrop for the term "semantic tags," and HTML5 has since eliminated these purely decorative tags.

The Purpose of Semantic Tags

For me, the primary purposes of semantic tags are threefold:

• Accessibility, allowing screen readers to better interpret content through appropriate HTML tags.
• Helping search engines understand the structure of a page, thereby improving SEO.

Thus, this article will revolve around these two points.

Insufficient Use of HTML Tags

When building web pages, experienced developers typically categorize elements based on their nature into main, nav, aside, footer, etc., delineating the primary structure of the page. When creating forms, seasoned developers will also include labels and corresponding inputs, making the most of the browser's native functionality.

These distinctions are certainly valid, but this approach often overlooks the most crucial aspect: the diverse interactions on a web page. Many UI components cannot be easily expressed using the existing HTML tags.

Front-end engineers can build layouts based on these broad principles, but if the UI components aren't covered by HTML tags, it can lead to confusion about which tags to use. For example, for UI components like tooltips, carousels, notification bars, and chat windows, which tag should be used?

This is a common issue in development, yet many articles fail to address it.

Approaching from an Accessibility Perspective

Semantic tags are not the goal; they are a means to an end. For me, the most significant purpose of semantic tags is to achieve accessibility. By using native HTML tags, we can reduce the hassle and inconsistency of custom implementations, achieving the best results at minimal cost.

From the perspective of accessible design, the solutions become clearer.

If accessibility features are well implemented, a site could be designed entirely with <div> tags and still offer a good experience (theoretically feasible, but there are many considerations and nuances; practically, this is unlikely to happen).

Ignoring accessibility while promoting semantic tags feels to me like a mere pursuit of political correctness.

Take the example of a notification bar. In such a case, which HTML tag should I use? This ambiguity often arises with semantic tags, or there may simply not be a suitable tag to describe the UI.

However, when you approach the issue from an accessibility standpoint, you will find that the problem revolves around a few key points:

• Can the screen reader detect changes in the notification bar?
• Can users close the notification bar using non-mouse interactions? (or other methods)

These factors significantly influence user experience.

In this situation, rather than focusing on which tag to use, prioritizing how to provide a better user experience is far more important. Using a "fancier" HTML tag doesn't automatically mean a successful implementation.

This does not mean that HTML semantic tags are unimportant; tags like main, section, article, header, and footer greatly assist search engines in recognizing page structure.

Implementing Structured Data (ld-json)

ld-json involves adding a corresponding <script> tag within the webpage and defining the structure of the page through JSON, making it easier for search engines to parse the content.

In addition to simplifying content parsing, pages related to ratings, news, FAQs, etc., can allow Google or other search engines to directly generate a specialized results page, helping users find the information they need more easily.

Semantic Tags and SEO

Crawlers refer to the structure of elements like h1, h2, h3, etc., and also attempt to interpret content through tags like main. Therefore, developers must, to some extent, understand HTML tags.

However, if the emphasis on using HTML semantic tags is primarily for SEO, as a front-end engineer, you should focus on other factors that have a more significant impact on SEO:

• Are title, description, sitemap, and other SEO-enhancing meta tags included in the <head>?
• Are appropriate Open Graph meta tags added for previews on platforms like Twitter or Facebook?
• Is SSR implemented?
• Can structured data (ld-json) be applied to the page?

The aspects mentioned above have a more pronounced effect on SEO.

The structure of HTML tags is the final piece in perfecting SEO. If search engines place great importance on h1 tags, should we all just use h1 tags for our websites?

Future Outlook

We can anticipate that more HTML tags will be introduced in the future, with an increasing number of native UI components supported by browsers. The UI components mentioned in this article, such as tabs and notifications, may have corresponding tags available for use in the future. However, the guiding principle remains the same: as long as we think about how users will interact with the UI and what functionalities the browser can provide during development, using the correct tags will naturally follow, rather than blindly pursuing semantic tags.

Conclusion

Overemphasizing HTML semantic tags is a misguided approach.

Semantic tags should be a natural outcome of developers considering SEO and accessibility design. If these factors are taken into account from the outset, developers will naturally choose appropriate tags and incorporate corresponding accessibility designs.

References

• Create semantic sites with json-ld
• On web semantics: discusses only the advantages without addressing the impact on SEO
• SEO Starter Guide: mentions that using semantic tags like <picture> can help with SEO for image search, but does not cover other aspects
• Multiple H1 Headings: states that using multiple h1 tags within a site does not significantly impact SEO, emphasizing the appropriate use of h1 tags.