Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
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!

76

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>.
Série

Esse projeto faz parte da Série Dê o próximo passo após o HTML/CSS!

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.