O projeto está inativo

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!

1 - 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>.

Sugestão de conteúdo

Para aprofundar seus estudos sobre o tema, sugerimos que assista o DevCast sobre HTML Semântico.

Ficou com alguma dúvida?