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:
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<div id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</div>
</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>:
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</nav>
</header>
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:
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<h1>Hexlet - hands-on programming courses</h1>
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
<p>Hexlet is a ready-made path from absolute beginner to your first job.</p>
</main>
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:
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<h1>Hexlet - hands-on programming courses</h1>
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
<p>Hexlet is a ready-made path from absolute beginner to your first job.</p>
<section>
<h2>Advantages</h2>
<ul>
<li>Lots of theory</li>
<li>Lots of practice</li>
<li>Lots of mentors</li>
</ul>
</section>
</main>
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.
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<h1>Hexlet - hands-on programming courses</h1>
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
<p>Hexlet is a ready-made path from absolute beginner to your first job.</p>
<section>
<h2>Advantages</h2>
<ul>
<li>Lots of theory</li>
<li>Lots of practice</li>
<li>Lots of mentors</li>
</ul>
</section>
<section>
<h2>News</h2>
<article>
<h3>Item 1</h3>
<p>News text 1</p>
<a href="#">More</a>
</article>
<article>
<h3>Item 2</h3>
<p>News text 2</p>
<a href="#">More</a>
</article>
<article>
<h3>Item 3</h3>
<p>News text 3</p>
<a href="#">More</a>
</article>
</section>
</main>
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.
<header>
<img src="/logo.png" alt="Logo"> <!-- Website logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact us</a></li>
</ul>
</nav>
</header>
<aside>
<div>
<a href="#">Optional item 1</a>
<a href="#">Optional item 2</a>
<a href="#">Optional item 3</a>
</div>
</aside>
<main>
<h1>Hexlet - hands-on programming courses</h1>
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
<p>Hexlet is a ready-made path from absolute beginner to your first job.</p>
<section>
<h2>Advantages</h2>
<ul>
<li>Lots of theory</li>
<li>Lots of practice</li>
<li>Lots of mentors</li>
</ul>
</section>
<section>
<h2>News</h2>
<article>
<h3>Item 1</h3>
<p>News text 1</p>
<a href="#">More</a>
</article>
<article>
<h3>Item 2</h3>
<p>News text 2</p>
<a href="#">More</a>
</article>
<article>
<h3>Item 3</h3>
<p>News text 3</p>
<a href="#">More</a>
</article>
</section>
</main>
Do it yourself
Create an index.html file on your computer and create your own CV. Use the tags you learned in this lesson.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
