Modern layout fundamentals
2026-02-21 02:57 Diff
https://hexlet.io/courses/layout-designer-basics/lessons/semantic-html/theory_unit

When you design a layout, you need to consider semantics, i.e., the semantic or logical meaning of the elements.

The main goal of any HTML layout is to convey the meaning of the blocks. Often robots visit our page, as well as users. They collect and analyze page information. For example, search engine crawlers look at the entire page and determine its usefulness, as well as its uniqueness. And although a person can quite simply divide the page into parts and find the header, main content, and footer, robots find it significantly harder. The robot sees only our layout and break it into parts.

The second important reason for creating a semantic layout is to make it easier for people with disabilities to use the page. Visually impaired users use screen readers - devices or apps that read page elements out loud. For the screen reader to correctly understand where the main information, menus, explanatory blocks, and so on are contained, we must mark the page up correctly. This will help devices properly divide the page into logical blocks and allow visitors to correctly navigate the page. This concept is called "Accessible Web".

Remember: minimal accessibility is better than no accessibility.

To address these issues, the HTML5 standard has many semantic tags that you can use. In this lesson, we'll learn basic semantic tags and mark up an entire HTML page.

Site header

The top area of the layout is often called the "site header". It contains the name of the company, the main menu, and contact information. This area is very important for quickly navigating the site, as it usually contains a menu with the site's main sections.

To create a header for the site, use a paired <header> tag, which contains the necessary information.

One example of a website header:

The <header> tag's behavior is the same as that of a simple <div> tag. Almost all semantic elements are block elements and have no default styles. This allows you to add semantics to existing projects very quickly. If the styles in these projects are not tied to the tags, then you can simply change the name from <div> to <header>, and we'll get a semantic website header.

Navigation

Try looking at the site header from the example above through the eyes of a computer. What does it see there?

  • Picture
  • A block-level <div> element
  • A bulleted list
  • Some links

If you haven't yet created your own language, then you might not realize that the set of links is nothing more than the main site menu. And it's not always easy for robots to work that out. Of course, they're already trained enough to find menus in a simple set of links like this, but you may have more than one menu, and it may be context-sensitive. So, the bot might not be able to work out what the main menu is.

How can we help it? For this purpose, the HTML5 standard has introduced the <nav> tag. It marks the navigation area. You can also separate the main menu from the section menu using other tags, which we'll discuss below.

Replace the simple <div> block element with its semantic brother <nav>:

The main thing about using <nav> is that you don't have to wrap the entire menu on the page. Usually, you only need to wrap the main menu and not, for example, wrap the menu in the footer. You're also allowed to have more than one <nav> element on the page. Use them to highlight the main menus on the page.

Unique content

The main point of each page is having unique content. This is the most important thing that should be on your page. The user can probably manage without a menu or footer, but if the page doesn't have its own unique content, then it's useless.

HTML5 has a special <main> tag for marking up unique content. That's what'll help designate the area with the most important content on the page. Try to keep only content in it. Usually, menus, sidebars, and the footer excluded from this area. The only exception would be if these blocks are truly unique to this page. For example, the menu can lead to sections of the page. In this case, it has every right to be considered unique content.

Let's add an area like this to our layout:

Having the <main> tag is also very important for mobile browsers. You may have seen that many of them have a "Reading Mode" feature. When you turn it on, the browser will automatically remove all the design and all unnecessary blocks, leaving only the main content. This content will be the area enclosed in the <main> tag. This mode is great for people who, at the given moment, have a weak Internet connection.

Since the <main> contains unique page content, only one such tag per page is allowed.

Sections

The content on the page isn't uniform by any means. Usually, it's a chain of logical areas, each describing something specific. For example, a given page may contain an area with a description of advantages, prices, forms, and so on. You want to make them stand out in some way. There are several reasons for this:

  • Properly positioned content is easy to work with. We can easily move these areas, swap them around, or delete them. They'll be easy to find in the code
  • Properly grouping sections is an important part of creating an accessible web

For these independent logical units, we have a special <section> tag, which can contain one specific section. Let's add it to our example:

Notice how easy it has become to look for the advantages in the code because they are in a separate section. You may also have noticed the header inside the section. Since a section is an independent unit, it almost always has its own header. Although this is not always the case, and the standard doesn't require us to include a header in the section but try to stick to this rule.

How do I quickly determine if a piece of content is worth including in a separate section? It's very simple; if you can describe a section of content in one or two words (advantages, prices, order form, catalog, contacts, and so on), then in all likelihood this section is independent.

Independent sections

Another way to highlight a text piece logically is to use the <article> tag. You might be wondering what is the point of having two different tags to highlight the same thing.

There's one important difference between a <section> and an <article>: an <article> is an independent section, which means that it can be moved to any page of the site or even to another site, and it won't lose its context.

Imagine a blog and a separate article in it. Can we understand the article if it gets shifted from the blog to the services page, for example? Of course! After all, an article is a finished text. Therefore, this kind of article can be wrapped in the <article> tag.

Let's add a news column to our example layout. Consider how it might be divided straight away. The news itself is quite a unique element because even if it's transferred to another page, it won't lose its relevance. In this case, every news story can be wrapped in an <article> tag. What about wrapping the block? It combines the meaning of several different pieces of news, it can safely be described in one word, and it will definitely have its own headline. Consequently, the <section> tag will work for it.

Additional sections

Another large container for our content is the <aside> tag. This is an area with additional information which may or may not be related to the current page. You can meet similar sections in the form of sidebars on websites. It contains additional menus, banners, ads, and other information.

Note that <aside> doesn't have to look like a sidebar. It can even be additional information within the article. But most often, this tag does look like a sidebar.

Let's add that information to our layout. Inside this additional section, we'll have another menu, which we won't wrap in the <nav>, as it's not the main one.