What precisely is semantic HTML and why is it needed

A while ago, almost everyone made websites without considering what was under the hood. They relied on tables, used whatever was available, mostly <div> and <span> tags, and didn't care about accessibility.

But with the emergence of HTML5, things have changed. Semantic layout is an approach to markup that depends not on the content of the site but on the semantic purpose of each block and the logical structure of the document. Even in this article, there are headings of different levels, which helps the reader to build the structure of the document in their head.

Why semantics is important

To make a website accessible for all users, including those who are blind or partially blind, it is important to use semantic markup. This helps screen readers navigate the page and understand its content.

To make the site higher in search engines and also improve SEO optimisations. Search engines do not disclose ranking rules, but it's known that the presence of semantic page markup helps search bots better understand what is on the page and, depending on this, rank sites in search results.

The HTML standard has several semantic tags that are recommended for page markup instead of using <div> and <span>. Semantic elements describe their role, making it easier to read and understand the code.

Well, imagine how much easier it is to read <header></header> instead of <div class="header"></div>. Or here is the code. Look, and it is immediately clear what is here and why.

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Page title</title>
 </head>
 <body>
   <header class="header">
     <!- Page header ->
   </header>
   <main>
     <!- Main page content ->
   </main>
   <footer class="footer">
     <!- Footer content ->
   </footer>
 </body>
</html>

Basic semantic HTML tags

Within the realm of early HTML versions, some tags hold semantic value, such as the <p> tag representing a paragraph. In contrast, tags like <i> or <b> lack semantic significance as they solely dictate text styling rather than conveying meaningful information.

The latest HTML Living Standard has semantic tags for every major site component and should be used. Here are some examples:

<article>

Meaning: An independent, separable semantic unit, such as a comment, tweet, article, etc.
Features: Desirable heading inside.
Common mistakes: confused with <section> and <div> tags.

<section>

Meaning: semantic section of the document. Non-separable, unlike <article>.
Features: Desirable heading inside.
Common mistakes: confused with <article> and <div> tags.

<aside>

Meaning: side, indirect content for the page.
Features: may have its own title. May appear multiple times on a page.
Common mistakes: treat <aside> tag for "sidebar" and use this tag to mark the main content that is related to the elements surrounding it.

<nav>

Meaning: A navigational section with links to other pages or other parts of pages.
Features: Used for main navigation, not for all link groups. The main one is navigation or not - at the discretion of the layout designer. For example, the menu in the site's footer can be left unwrapped in <nav>. A short list of links usually appears in the footer (for example, a link to the main page, copyright and conditions) - this is not the main navigation, semantically, <footer> itself is intended for such information.
Common mistakes: Many people think that <nav> can only have a list of navigation links, but according to the specification, there can be navigation in any form.

<header>

Meaning: the introductory part of a semantic section or the entire site, usually contains hints and navigation. Most often repeated on all pages of the site.
Features: There can be several of these elements on a page.
Typical mistakes: use only as a site header.

<main>

Meaning: the main, not repeated on other pages, content of the page.
Features: Must be one per page, based on definition.
Common mistakes: include in this tag what is repeated on other pages (navigation, copyrights, and so on).

<footer>

Meaning: the final part of the semantic section or the entire site, usually contains information about the authors, a list of references, copyright, and so on. Most often repeated on all pages of the site.
Features: There can be several of these elements on a page. The <footer> tag does not have to be at the end of a section.
Typical mistakes: use only as a site footer.

How to mark up a page in terms of semantics

The process of markup can be segmented into multiple stages, each varying in levels of detail.

Large semantic blocks on each page of the site. Tags: <header>, <main>, <footer>.
Large semantic sections in blocks. Tags: <nav>, <section>, <article>, <aside>.
The title of the entire document and the titles of semantic sections. Tags: <h1>-<h6>.
Small elements in semantic sections. Lists, tables, demos, paragraphs and hyphens, forms, quotes, contact information and progress.
Phrase elements. Images, links, buttons, videos, time and small text elements.

Unsure which tags to use

There are simple rules for choosing the right tags:

It turned out to find the most appropriate semantic tag - use it.
For stream containers, <div>.
For small phrasal elements (word or phrase) — <span>.

Rule for defining <article>, <section> and <div>:

Can you give a name to the section and move this section to another site? - <article>
Can you give a name to a section, but can't post it to another site? - <section>
Can't give a name? It turns out something like "news and photo gallery" or "right column"? - <div>

How to avoid making mistakes

Do not use semantic tags for aesthetics. CSS is for styling.

It may seem that some tags are suitable for making a page prettier, moving text around, or adding spacing to it. But just because the default browser renders tags the way you want doesn't mean you should use it. Let's look at an example.

There are several errors here:

The <blockquote> tag should be used to highlight quotations in the text, not just random selection of text. Coincidentally, in browsers this block is highlighted by default, but this does not mean that you need to use it in this way.
The <ul> tag is also used to visually "shift" the text. This is incorrect, because this tag should only be used to denote lists, and secondly, only <li> tags can be nested in the <ul> tag and nothing else.
The <p> tag is used to visually expand the text. In fact, this tag is used to highlight paragraphs.

And any selection, shift or other text transformations can be done using CSS.
So use semantic tags as intended.

This article was originally posted on Dudych Blog

Blog