HTML básico e semântico: header, nav, main, aside e footer
Ao utilizar corretamente a estrutura e os recursos do HTML5, é possível criar sites modernos, acessíveis e atraentes.

Índice
Muito se fala sobre semântica HTML, boas práticas de formatação HTML, desenvolvimento HTML front =-end enxuto para SEO, e vou explicar como começar uma estrutura básica de um site usando HTML5, a versão mais recente da linguagem de marcação padrão para a criação de páginas web.
Vamos abordar diferentes elementos e recursos do HTML5 que ajudarão a construirpáginas bem vistas pelos crawler da internet, em especial o Google, tornando o código eficiente, tanto para os robôs quanto para os usuários, em especial que sofrem com alguma deficiência visual ou auditiva.
Cadastre-se para receber nossos conteúdos por e-mail
Estrutura Básica de um Documento HTML5
Um documento HTML5 possui uma estrutura básica que consiste em várias partes. Para entender melhor, vamos detalhar cada uma delas:
Doctype
O doctype é a primeira linha de um documento HTML5 e informa ao navegador que o documento está em conformidade com a especificação HTML5.
<!DOCTYPE html>
HTMLElemento html
O elemento <html>
é o elemento raiz de um documento HTML e contém todos os outros elementos.
<html>
...
</html>
HTMLElemento head
O elemento <head>
contém informações sobre o documento, como o título da página, metadados e referências a arquivos CSS e JavaScript.
<head>
<meta charset="UTF-8">
<title>Pink and Brain | Especialistas em SEO e Audiência Digital</title>
<link rel="stylesheet" href="estilos.css">
</head>
HTMLElemento body
O elemento <body>
contém o conteúdo visível do documento, como texto, imagens, links e outros elementos HTML.
<body>
...
</body>
HTMLOrganização da estrutura de um site em HTML5
Ao criar um site em HTML5, é importante organizar o conteúdo de maneira clara e fácil de navegar. Veja uma ideia base de como estruturar seu HTML semânticamente, vindo da estrutura principal.

Entenda os seguintes elementos, podemos estruturar o site de forma eficiente:
Cabeçalho <header>
O cabeçalho é geralmente colocado no topo da página e contém informações de identificação do site, como o logotipo e o slogan. Podemos utilizar o elemento <header>
para envolver o conteúdo do cabeçalho.
<header>
<h1>Meu logo</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
HTMLBarra de Navegação <nav>
A barra de navegação é usada para permitir que os usuários naveguem pelo site. Podemos criar uma barra de navegação utilizando o elemento <nav>
. Dentro do <nav>
, podemos usar elementos de lista, como <ul>
e <li>
, para criar os links de navegação.
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
HTMLConteúdo principal <main>
O conteúdo principal é o elemento central do site, onde a maior parte do conteúdo é exibida. Podemos envolver o conteúdo principal com o elemento <main>
.
<main>
<h2>Sobre</h2>
<p>Conheça os ratos do marketing digital e do desenvolvimento web.</p>
<h2>Serviços</h2>
<ul>
<li>Serviço 1</li>
<li>Serviço 2</li>
<li>Serviço 3</li>
</ul>
<img decoding="async" src="imagem.jpg" alt="Imagem do site">
</main>
HTMLConteúdo complementar <aside>
A barra lateral é opcional e geralmente é usada para exibir informações adicionais, como links relacionados, menus de navegação secundários ou anúncios. Podemos criar uma barra lateral usando o elemento <aside>
.
<aside>
<h3>Links úteis</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
HTMLRodapé <footer>
O rodapé é colocado na parte inferior da página e geralmente contém informações adicionais, como informações de contato, links de política de privacidade ou direitos autorais. Podemos usar o elemento <footer>
para envolver o conteúdo e criar o rodapé.
<footer>
<p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>
HTMLDicas para uma boa estrutura de um site em HTML5
- Use uma estrutura semântica: isso melhora a acessibilidade e o SEO do site.
- Mantenha o código HTML limpo e bem organizado: facilita a manutenção e a leitura do código.
- Utilize CSS para estilizar o site: torna o site mais atraente visualmente.
- Teste o site em diferentes navegadores e dispositivos: garantir a compatibilidade é crucial.
- Considere a usabilidade e a experiência do usuário: projetar uma navegação e layout intuitivos é fundamental.
Exemplo completinho
Aqui está um exemplo básico de estrutura de um site:
<!DOCTYPE html>
<html>
<head> <title>Pink and Brain | Especialistas em SEO e Audiência Digital</title> <link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Meu Site</h1>
<p>Bem-vindo ao Meu Site incrível!</p>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<h2>Sobre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor lacus sit amet ipsum lobortis, eu cursus sapien facilisis. Vivamus malesuada arcu lacus, sed efficitur nulla aliquam in.</p>
<h2>Serviços</h2>
<ul>
<li>Serviço 1</li>
<li>Serviço 2</li>
<li>Serviço 3</li>
</ul>
<img src="imagem.jpg" alt="Imagem do site">
</main>
<aside>
<h3>Links úteis</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>© 2024 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
</html>
HTMLAo utilizar corretamente a estrutura e os recursos do HTML5, é possível criar sites modernos, acessíveis e atraentes. Lembre-se de adaptar a estrutura às necessidades do seu projeto e explorar outros recursos avançados disponíveis no HTML5 para aprimorar ainda mais a experiência do usuário.
Essas são apenas algumas tags semânticas do HTML, existem outras centenas para você se aprofundar.