What is HTML 5.
HTML (HyperText Markup Language) is a markup language that makes web page creation possible. Along with CSS (Cascading Style Sheets), they will create the structure with a page displayed by browsers.
HTML is the skeleton of the page, which defines the order in which the elements will be inside it, whereas CSS is responsible for creating all the appearance that the elements will have on the page and can also influence the order in which they are displayed.
HTML has semantics that aim to define areas of a web page. So from there, you can tell where the header, menu, section, content and footer will be on the page. At first you might be asking why is this so important?
What's important is that the page will be more accessible to both search engines and screen readers aimed at special people. so with a correct semantics, search engines can determine what is the relevance of the page's content, which allows a better ranking of it.
HTML 5 Semantics
HTML 5 has the following semantic elements to define the regions of a page:
<header>
The header element represents an introduction group or navigation elements. The header element can be used to group content indexes, search fields or even the website brand.
<header>
<img src="page_logo.png" alt="page logo">
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">menu 2</a></li>
</ul>
</nav>
</header>
<nav>
The nav element represents a section of the page that contains links to other parts of the website. Not all link groups should be nav elements, just those groups that contain important links. This can be applied to those link units that are usually placed in the Footer and also to compose the main menu of the site.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">menu 2</a></li>
</ul>
</nav>
<main>
The main element specifies the main content of the page, semantically this element will only be on the page once.
<main>
<section>
<h2>Computing</h2>
</section>
</main>
<section>
The section tag defines a new generic section in the document. For example, a website home can be divided into several sections: introduction or highlight, news, contact information and calls to internal content
<section>
<h2>Computing</h2>
<article>
<h3>Notebook</h3>
<p>This equipment is state-of-the-art</p>
</article>
</section>
<article>
The article element represents a part of the page that can be distributed and reusable in FEEDs for example. This can be a post, article, a user comment block or just plain text block.
<article>
<h3>Notebook</h3>
<p>Latest generation notebook</p>
</article>
<figure>
The figure element represents a part of the page where this image is linked to some content. It can also be associated with the `<figurecaption> element to describe the image.
<figure>
<img src="image_notebook.jpg" alt="image of a notebook">
<figurecaption>
<p>Latest generation notebook</p>
</figurecaption>
</figure>
<aside>
The aside element represents a content block that references the content surrounding the aside element. The aside can be represented by content in sidebars in printed text, advertising or even to create a group of nav elements and other information separate from the main content of the website.
<aside>
<section>
<h2>Link to other partner sites</h2>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<\section>
</aside>
<footer>
The footer element literally represents the page footer. It would be the last element before closing the HTML tag. The footer element does not necessarily need to appear at the end of a section.
<footer>
<p>All rights reserved to so and so.</p>
</footer>
Basic structure of a page in HTML 5
Understanding the semantics, then it's time to learn the basic structure of an html page.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>page name</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
The Doctype must be the first line of code in the document, it is the one that will tell the browser and other means which code specification to use.
<html lang=”pt-br”>
The <html> tag is the parent element of all the other elements in the page structure. The LANG attribute is required for browsers and screen readers to know the main language of the document.
<head>
The head tag is that you load css styles, page title, metadata and besides the java-scripts (which will give the behavior to the page).
Below I'm displaying the metadata of this page.
<meta name="description" content="Entenda a importância da Semântica HTML e como isso ajuda na acessíbilidade e no Rankeamento da página pelos motores de busca."/> <meta name="abstract" content="Entenda a importância da Semântica no  e como isso ajuda na acessíbilidade e no Rankeamento da página pelos motores de busca." /> <meta name="keywords" content="HTML, semântica, CSS" /> <meta content="article" property="og:type" /> <meta content="A Estrutura e semântica do HTML 5 e a sua importância" property="og:title" /> <meta content="Entenda a importância da Semântica no HTML e como isso ajuda na acessíbilidade e no Rankeamento da página pelos motores de busca." property="og:description" /> <meta content="pt_BR" property="og:locale" /> <meta content="https://programarweb.mrab.com.br/sites/default/files/logo_programar_web_final_qualidade.png" property="og:image" /> <meta content="Programar WEB | MRab" property="og:site_name" /> <meta content="pt_BR" property="og:locale" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
The body tag is where all page contents will be, such as headers, menus, sections, contents and footers. In summary everything that is visible on the page.
So what would a semantically correct page look like. See the example below:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset=”UTF-8”>
<link rel="stylesheet" type=”text/css" href=”estilo.css”>
<script src="/scripts/comportamento_menu.js"></script>
<title>Nome da página</title>
</head>
<body>
<header>
<img src="logo_page.png" alt="logo page">
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">Menu 2</a></li>
</ul>
</nav>
</header>
<main>
<h1>page title</h1>
<section>
<h2>Computing</h2>
<article>
<figure>
<img src="notebook.jpg" alt="image of a notebook">
<figurecaption>
<p>Latest generation notebook</p>
</figurecaption>
</figure>
<h3>Notebook</h3>
<p>Latest generation notebook</p>
</article>
<article>
<h3>Mouse</h3>
<p>Are you tired of your mouse. Buy this one.</p>
</article>
</section>
</main>
<aside>
<section>
<h2>Link to other partner sites</h2>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<\section>
</aside>
<footer>
<p>All rights reserved to so-and-so.</p>
</footer>
</body>
</html>
Hope you understand the importance of semantics in HTML pages.
Referência: https://www.w3c.br/