O que é HTML 5
HTML (HyperText Markup Language) é uma linguagem de marcação que possibilita a criação de página web. Juntamente com o CSS (Cascading Style Sheets), eles vão criar a estrutura com uma página será exibida pelos navegadores.
O HTML é o esqueleto da página, onde definirá a ordem como os elementos estarão dentro dela, já o CSS é responsável por criar toda a aparência que os elementos terão na página e também pode influir na ordem da exibição deles.
O HTML possui uma semântica que tem por objetivo definir áreas de uma página web. Então a partir dele é possível dizer onde o cabeçalho, menu, seção, conteúdo e rodapé estará na páginar. A princípio você deve estar perguntando por que isso é tão importante?
A importancia é que a página será mais acessível tanto para os motores de busca, quanto para os leitores de telas voltados para pessoas especiais. assim com uma semântica correta os motores de buscas podem deteminar qual é a relevância do conteúdo da página o que possibilita um melhor rankiamento dela.
Semântica do HTML 5
O HTML 5 têm os seguintes elementos semânticos para definir as regiões de uma página:
<header>
O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo a marca do site.
<header>
<img src="logotipo_da_pagina.png" alt="logotip da página">
<nav>
<ul>
<li><a href="/">Início</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">menu 2</a></li>
</ul>
</nav>
</header>
<nav>
O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site
<nav>
<ul>
<li><a href="/">Início</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">menu 2</a></li>
</ul>
</nav>
<main>
O elemento main especifica o contéudo principal da página, Semanticamente este elemento só estar na página uma única vez.
<main>
<section>
<h2>Informática</h2>
</section>
</main>
<section>
A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno
<section>
<h2>Informática</h2>
<article>
<h3>Notebook</h3>
<p>Este equipamento é de última geração</p>
</article>
</section>
<article>
O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas em bloco de texto comum.
<article>
<h3>Notebook</h3>
<p>Este equipamento é de última geração</p>
</article>
<figure>
O elemento figure representa uma parte da pagina onde esta imagem que esta liga a algum contéudo. Também pode ser vir associado ao elemento <figurecaption> para descreve a imagem.
<figure>
<img src="figura_notebook.jpg" alt="imagem de um notebook">
<figurecaption>
<p>Notebook de ultima geração</p>
</figurecaption>
</figure>
<aside>
O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
<aside>
<section>
<h2>Link para outros site parceiros</h2>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<\section>
</aside>
<footer>
O elemento footer representa literalmente o rodapé da página. Seria o último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção
<footer>
<p>Todos diretos reservado a fulando de tal.</p>
</footer>
Estrutura básica de uma página em HTML 5
Entendendo a semântica, então chegou a hora de aprender a estrutura básica de uma página em html.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
<title>Nome da página</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
O Doctype deve ser a primeira linha de código do documento, ele é que vai dizer para o navegador e para outros meios qual a especificação de código a utilizar.
<html lang=”pt-br”>
A tag <html> é elemento pai de todas dos os outros elementos na estrutura da página. O atributo LANG é necessário para que os navegadores e leitores de tela saibam qual a linguagem principal do documento.
<head>
A tag head é que se carregas estilos de css, título da página, metadados e além dos java-scripts (que darão o comportamento para a página).
Logo abaixo estou exibindo os metadados desta página.
<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>
A tag body é onde ficarão todos os conteúdos da página como cabeçalhos, menus, seçãos, conteúdos e rodapés. Em resumo tudo que é visível na página.
Então como ficaria uma página semânticamente correta. Veja no exemplo abaixo:
<!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="logotipo_da_pagina.png" alt="logotip da página">
<nav>
<ul>
<li><a href="/">Início</a></li>
<li><a href="/menu1>Menu 1</a></li>
<li><a href="/menu2">menu 2</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Informática</h2>
<article>
<figure>
<img src="figura_notebook.jpg" alt="imagem de um notebook">
<figurecaption>
<p>Notebook de ultima geração</p>
</figurecaption>
</figure>
<h3>Notebook</h3>
<p>Este equipamento é de última geração</p>
</article>
<article>
<h3>Mouse</h3>
<p>Você está cansado do seu mouse. Compre este.</p>
</article>
</section>
</main>
<aside>
<section>
<h2>Link para outros site parceiros</h2>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
<\section>
</aside>
<footer>
<p>Todos diretos reservado a fulando de tal.</p>
</footer>
</body>
</html>
Espero que você tenha entendido a importancia da semântica em páginas HTML.
Referência: https://www.w3c.br/