Scribd
Carregar
6 visualizações3 páginas

Tags Semânticas em HTML: Guia Prático

O documento explica o uso das tags semânticas <header>, <nav> e <main> em HTML. A tag <header> define áreas de cabeçalho, <nav> agrupa links de navegação e <main> envolve o conteúdo principal da página. Exemplos práticos são fornecidos para cada tag, destacando suas funções e regras de uso.

Enviado por

ismael.levi9746
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
6 visualizações3 páginas

Tags Semânticas em HTML: Guia Prático

O documento explica o uso das tags semânticas <header>, <nav> e <main> em HTML. A tag <header> define áreas de cabeçalho, <nav> agrupa links de navegação e <main> envolve o conteúdo principal da página. Exemplos práticos são fornecidos para cada tag, destacando suas funções e regras de uso.

Enviado por

ismael.levi9746
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Tags Semânticas

​
<header>

O que é?

A tag <header> define uma área de cabeçalho que geralmente contém informações
introdutórias ou de navegação.

Onde pode ser usada?

No início da página (cabeçalho principal)

Dentro de seções como <article>, <section> ou <aside>, para criar cabeçalhos locais

O que costuma conter?

Logotipo

Nome do site

Slogan

Barra de navegação (às vezes)

Título da seção

Exemplo:

<header>
<img src="[Link]" alt="Logotipo do site">
<h1>Meu Site Incrível</h1>
<p>Aprenda programação do zero</p>
</header>

---

<nav>

O que é?

A tag <nav> representa uma área de navegação. É usada para agrupar links que ajudam
o usuário a navegar pelo site.

Quando usar?
Para menus principais

Para menus laterais

Para links entre páginas ou seções importantes

Evite usar para todos os links. Só use para links de navegação principal.

Exemplo:

<nav>
<ul>
<li><a href="[Link]">Início</a></
<li><a href="[Link]">Sobre</a></
<li><a href="[Link]">Contato</
</ul>
</nav>

---

<main>

O que é?

A tag <main> envolve o conteúdo principal da página, ou seja, o que é mais importante
para o usuário.

Regras importantes:

Deve existir apenas uma tag <main> por página.

Não pode estar dentro de <header>, <footer>, <article>, <nav>, etc.

É o foco do conteúdo — se fosse removido, o restante da página ainda seria acessório.

Exemplo:

<main>
<article>
<h2>Aprenda HTML do zero</h2>
<p>HTML é a base de qualquer página web...</p>
</article>
</main>

---

Exemplo completo com as três tags:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meu Site</title>
</head>
<body>

<header>
<h1>Meu Site de Programação</h1>
<p>Dicas e tutoriais para aprender a programar</p>
</header>

<nav>
<ul>
<li><a href="[Link]">Início</a></
<li><a href="[Link]">Sobre</a></
<li><a href="[Link]">Cursos</a><
<li><a href="[Link]">Contato</
</ul>
</nav>

<main>
<h2>Bem-vindo ao nosso site!</h2>
<p>Aqui você encontrará conteúdo gratuito sobre HTML, CSS e JavaScript.</p>
</main>

</body>
</html>

Você também pode gostar