Tags Semânticas

As tags semânticas em HTML ajudam a definir o significado do conteúdo, tornando o código mais claro tanto para desenvolvedores quanto para navegadores. Diferentemente de <div> e <span>, elas fornecem contexto ao conteúdo delimitado.

Tags semânticas comuns:

• <header>: Conteúdo introdutório, geralmente no topo.
• <nav>: Contém links de navegação.

• <main>: Conteúdo principal da página.
• <article>: Um conteúdo independente, como uma publicação de blog.

• <section>: Agrupa conteúdo relacionado, geralmente com um título.
• <footer>: Seção inferior com informações como direitos autorais ou detalhes de contato.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Essa estrutura fornece um layout claro e significativo para o conteúdo.