HTML Semântico
Veja neste código-fonte um exemplo de uma página completamente organizada com o uso das principais tags do HTML semântico. Baixe agora!
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Tags estruturais
Você já sabe quando e como usar corretamente as tags <header>, <main>, <article>? Confira neste vídeo um exemplo prático do uso dessas e de outras tags semânticas estruturais da HTML, que foram empregadas da seguinte forma:
<header>
<nav>
<ul>
<li><a href="#">favorito</a></li>
<li><a href="#">anotar</a></li>
<li><a href="#">dúvida?</a></li>
</ul>
</nav>
<h1>Guia de referência de HTML</h1>
<p>Neste Guia de Referência você encontrará o conteúdo que precisa...</p>
</header>
- Linha 1: Estruturamos o cabeçalho da página utilizando o elemento <header>. Dentro deste contêiner incluímos uma navegação, um título e um parágrafo com uma descrição geral do que pode ser visto na página.
- Linha 2: Usamos o elemento <nav> como contêiner para a lista de navegação do cabeçalho. Essa lista, por sua vez, é criada com as tags <ul>, <li> e <a>.
- Linha 10: Comunicamos o tema central do documento com o elemento de título de maior relevância, o <h1>. É recomendado que um documento contenha apenas um <h1>, sendo os demais elementos de título, <h2>, <h3>, etc, usados para subtítulos e outros temas de menor relevância dentro da mesma página.
- Linha 11: Descrevemos brevemente o conteúdo da página com um parágrafo usando o elemento <p>. Também podemos descrever a página desta maneira usando elementos de título, como por exemplo o <h2>, de acordo com a necessidade.
<footer>
<nav>
<ul>
<li><a href="#">Publique</a></li>
<li><a href="#">Assine</a></li>
<li><a href="#">Fale conosco</a></li>
</ul>
</nav>
<p>Hospedagem web por Porta 80 Web Hosting</p>
</footer>
- Linha 1: Neste trecho adicionamos o rodapé do documento usando o elemento <footer> como contêiner. Dentro desta seção do documento incluímos uma lista de links de navegação e um parágrafo com as informações de hospedagem do site.
- Linha 2: Novamente utilizamos o elemento <nav> como contêiner, pois podemos utilizar esse elemento sempre que for necessário criar uma lista de navegação.
- Linha 10: Descrevemos outras informações de rodapé, como as informações de hospedagem neste caso, com um parágrafo usando o elemento <p>.
Esse projeto faz parte da Série Dê o próximo passo após o HTML/CSS!