Elementos de estrutura (header, nav, main e footer)
Nessa aula, vamos aprender sobre os elementos de estrutura do HTML.
Os elementos de estrutura são usados para organizar o conteúdo de uma página da web.
Eles fornecem informações sobre o significado do conteúdo, o que ajuda os navegadores a renderizar as páginas da web de forma mais eficiente e acessível.
Os elementos de estrutura mais comuns são:
- Cabeçalho (header): contém informações gerais sobre a página, como o título, logotipo e menu de navegação.
- Barra de navegação (nav): contém links para outras páginas do site.
- Conteúdo principal (main): contém o conteúdo principal da página, como o texto, imagens e vídeos.
- Rodapé (footer): contém informações de contato, direitos autorais e outras informações gerais.
Vamos aprender sobre cada um desses elementos em detalhes.
Cabeçalho (header)
O elemento header é usado para definir o cabeçalho de uma página da web.
Ele geralmente contém informações gerais sobre a página, como o título, logotipo e menu de navegação.
O elemento header é um elemento filho do elemento body.
Por exemplo, o seguinte código cria um cabeçalho com o título “Minha página da web“:
<header> <h1>Minha página da web</h1> </header>
Barra de navegação (nav)
O elemento nav é usado para definir a barra de navegação de uma página da web.
Ele geralmente contém links para outras páginas do site.
O elemento nav é um elemento filho do elemento header ou do elemento body.
Por exemplo, o seguinte código cria uma barra de navegação com links para as páginas “Início“, “Sobre” e “Contato“:
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
Conteúdo principal (main)
O elemento main é usado para definir o conteúdo principal de uma página da web.
Ele geralmente contém o texto, imagens e vídeos que são o foco principal da página.
O elemento main é um elemento filho do elemento body.
Por exemplo, o seguinte código cria um conteúdo principal com um parágrafo de texto e uma imagem:
<main> <p>Este é o conteúdo principal da página.</p> <img src="image.jpg" alt="Uma imagem"> </main>
Rodapé (footer)
O elemento footer é usado para definir o rodapé de uma página da web.
Ele geralmente contém informações de contato, direitos autorais e outras informações gerais.
O elemento footer é um elemento filho do elemento body.
Por exemplo, o seguinte código cria um rodapé com informações de contato e direitos autorais:
<footer> <p>Copyright © 2023 Minha página da web</p> <p>Contato: <a href="#">contato@minhapaginadaweb.com</a></p> </footer>
Essa é uma introdução básica aos elementos de estrutura do HTML.
Exemplo completo de elementos de estrutura do HTML
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de elementos de estrutura do HTML</title>
</head>
<body>
<header>
<h1>Exemplo de elementos de estrutura do HTML</h1>
</header>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<main>
<p>Este é o conteúdo principal da página.</p>
<img src="image.jpg" alt="Uma imagem">
</main>
<footer>
<p>Copyright © 2023 Exemplo de elementos de estrutura do HTML</p>
<p>Contato: <a href="#">contato@exemplo.com</a></p>
</footer>
</body>
</html>
Código CSS
<style>
/* Cabeçalho */
header {
background-color: #332d2d;
color: #f2f2f2;
padding: 20px;
text-align: center;
}
h1 {
font-size: 2em;
}
/* Barra de navegação */
nav {
background-color: #874B46;
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
color: #f2f2f2;
text-decoration: none;
}
/* Conteúdo principal */
main {
background-color: #fff;
padding: 20px;
}
p {
font-size: 1em;
}
img {
width: 200px;
height: 200px;
}
/* Rodapé */
footer {
background-color: #874B46;
padding: 20px;
text-align: center;
color: #f2f2fe;
}
p {
font-size: 0.8em;
}
