A long time ago (15 years), almost everyone made websites and did not worry about what was inside it. We coded in tables, used everything that came to hand, and didn’t really bother about accessibility. And then HTML5 happened and away we go.

A semantic layout is an approach to markup that is based not on the appearance 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 – this helps the reader to build the structure of the document in his head. So it is on the site page – only the readers will be slightly different.

TLTR: This article may offend those who are used to the layout by divs. But is not a verdict, and we do not urge to completely abandon it. Well, you can always agree.

Why semantics is important

To make the site accessible. Sighted users can easily understand at a glance where which part of the page is – where is the title, lists or images. For the blind or partially blind, everything is more difficult. The main tool for browsing sites is not a browser that renders a page, but a screen reader that reads text from a page aloud.

This tool “reads” the content of the page, and the semantic structure helps it to better determine which block is now, and to the user to understand what is at stake. This way, semantic markup helps more users interact with your site. For example, the presence of headings helps the blind to navigate the page. Screen readers have a heading navigation feature that speeds up the familiarity with the information on the site.

To make the site higher in search engines. The companies that create search engines do not disclose the ranking rules, but it is known that the presence of semantic page markup helps search bots to better understand what is on the page, and depending on this, rank sites in the search results.

The semantics are spelled out in the standards. Many developers use constructs like the old-fashioned way to refer to navigation or other structural elements of a page <div id="nav">  . In the meantime, the HTML standard has several semantic tags that are recommended to be used for page markup instead of and . The specification describes a role for each semantic element.

So imagine how much easier it is to read <nav></nav> instead of <div class=”nav”></div> . Or this code. Look and it is immediately clear what is here and why.

Basic semantic HTML tags

Among the “old” tags from earlier versions of HTML, there are also semantic tags – for example, the <p> tag, which denotes a paragraph. At the same time, the <i>  or <b> tags are not semantic, because they do not add meaning to the selected text, but simply determine its appearance. But in the current version of the HTML Living Standard, there are semantic tags for almost all the main parts of the site, and it is better to use them. Here are some examples of semantic tags.

<article>

Meaning: an independent, separable semantic unit, for example, a comment, tweet, article and so on.

Features: a heading inside is desirable.

Typical errors: confused with <section> and <div> tags.

<section>

Meaning: the semantic section of the document. Non-detachable, unlike <article> .

Features: a heading inside is desirable.

Common mistakes: confused with <article>and <div> tags.

<aside>

Meaning: side content, indirect for the page.

Features: can have its own title. May occur multiple times on the page.

Common mistakes: consider <aside> as a tag for the “sidebar” and mark up the main content that is associated with the surrounding elements with this tag.

<nav>

Meaning: a navigation section with links to other pages or other parts of the pages.

Features: Used for main navigation, not all link groups. The main one is the navigation or not – at the discretion of the layout designer. For example, the menu in the footer of the site may not be wrapped in <nav> . A shortlist of links usually appears in the footer (for example, home link, copyright and terms) – this is not the main navigation, semantically, the <footer> itself is intended for such information.

Typical mistakes: Many people think that a <nav> can only contain a list of navigation links, but according to the spec, there can be any form of navigation.

<header>

Meaning: the introductory part of the 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 the page.

Typical mistakes: use only as a site header.

<main>

Meaning: the main, not repeated on other pages, the content of the page.

Features: there should be one per page, based on the definition.

Typical mistakes: include in this tag what is repeated on other pages (navigation, copyright, etc.).

<footer>

Meaning: the final part of the semantic section or the entire site, usually contains information about the authors, bibliography, copyright, and so on. Most often repeated on all pages of the site.

Features: there can be several of these elements on the 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 marking process can be divided into several steps with varying degrees 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 heading of the entire document and the headings of the semantic sections. Tags: <h1>-<h6> .
  • Small elements in semantic sections. Lists, tables, demos, paragraphs and hyphens, forms, quotes, contact information and progress.
  • Phrasal elements. Images, links, buttons, videos, time and small text elements.

If you doubt which tags to use

There are simple rules for choosing the right tags.

It turned out to find the most suitable semantic tag – to use it.

For streaming containers – <div>.

For small phrasal elements (word or phrase) – <span>.

The rule for defining <article>, <section> and <div>:

Can you give a name to a section and move this section to another site? – <article>

Can you give a name to a section, but you can’t bring it to another site? – <section>

Can’t give a name? Is it something like “news and photo gallery” or “right column”? – <div>

How exactly not to do

Don’t use semantic tags for embellishments. There is CSS for that.

It may seem that some tags are suitable in order to make the page prettier, move the text or add spacing to it. But just because the browser by default renders the tags somehow the way you want it to, doesn’t mean you need to use it.

Therefore, use semantic tags as intended.