Conheça as principais TAGs semânticas do HTML5

23/04/2020 às 16:21 Novidades

Conheça as principais TAGs semânticas do HTML5

A linguagem HTML (HyperText Markup Language), com tradução Linguagem de Marcação de Hipertexto, surgiu com o objetivo de dar estrutura aos conteúdos da internet.

Ela foi criada em 1991, por Tim Berners Lee, e teve rápida popularidade desde então. Informações dos navegadores de internet são renderizados com o CSS, JavaScript e outras linguagens de desenvolvimento web.

Separamos hoje uma lista com as principais tags semânticas do HTML5. Quer saber quais são? Então confira agora!

Um pouco mais sobre o HTML

Em outras palavras, o HTML é como um esqueleto que dá forma às páginas web, sendo sua estrutura mais básica. Ele destina cada parte de uma página a um setor diferente, de acordo com o conteúdo.

Textos, imagens, links, menus de navegação, entre outros, são especificamente endereçados dentro da engenharia de uma página web. Em outro momento, ele também vai auxiliar o funcionamento de outras aplicações em um site.

A 5a versão do HTML trouxe modificações principalmente na estrutura semântica das várias seções da página. A nova versão da linguagem manteve a estrutura de divs, mas trouxe novas TAGs semânticas para cada grande seção.

Além disso, o HTML 5 ampliou o suporte de áudio e vídeo para um alto nível, o que só existia nas versões anteriores com o uso de plugins. Atualizações constantes ao longo do tempo é outra característica da nova linguagem, que também dispõe de novos recursos para suporte gráfico 2D e 3D, com a adoção do Canvas.

Diversas áreas tecnológicas foram contempladas nessa nova versão, como a conectividade, multimídia, performance e integração, estilização.

Neste artigo, vamos dar ênfase à semântica, que é um importante mecanismo para otimização do posicionamento da página nos buscadores, o SEO.

Conheça agora as principais TAGs semânticas do HTML5

<section> 

A seção do documento é definida pelo elemento <section>. Uma seção é um agrupamento de conteúdo, segundo a documentação HTML5 do W3C.

Por exemplo, a página de uma empresa pode ser dividida da seguinte forma: introdução, serviços oferecidos pela marca, informações a respeito da empresa, depoimentos e contato.

Desse modo, é possível adicionar, a cada uma dessas divisões, uma seção com objetivos distintos.

Essa estratégia ajuda a facilitar e muito na hora do desenvolvimento de uma página HTML, já que  permite distribuir seu conteúdo de modo adequado, com o valor semântico mantido.

<header>

Com o significado de cabeçalho, a tag <header> indica que todo seu conteúdo é integrante do cabeçalho da seção. É usualmente aplicada para inserir o conteúdo inicial de uma página, e em geral contém uma logo e um menu.

 Já conhece o nosso serivço de Hospedagem de SiteOs planos básico de hospedagem é o produto ideal para quem está começando na internet, os planos são a partir de R$ 9,90 (pagamento mínimo trimestral para esse plano).

Observe o exemplo: 

<header>

  <div class="logo">

    <h1>Minha página</h1>

    <img src="logo.jpg"/>

  </div>

  <nav>

    <ul>

      <li>Home</li>

      <li>Sobre</li>

      <li>Contato</li>

    </ul>

  </nav>

</header>

O exemplo inclui uma logo, um título de página e ainda uma tag <nav> para incluir a estrutura de um menu através de listas.

O item também pode ser usado como uma postagem de blog, dentro das seções de conteúdo, de modo que o <header> vai especificar o cabeçalho da postagem. 

<nav> 

O elemento <nav> indica um menu de navegação na página em desenvolvimento. É comum que seja o elemento inicial da página, porém, atenção: qualquer que seja o local escolhido para posicionar o navbar, a dica é envolver o agrupamento de links com esta TAG.

Observe o exemplo: 

<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>  

<article> 

A posição de um artigo em um documento é definida pelo elemento semântico <article>. É uma divisão que segmenta um conteúdo independente, específico, com texto, geralmente acompanhado por elementos gráficos e de multimídia. Veja os exemplos de onde um elemento <article> pode ser usado:

> artigo de jornal

> postagem no blog

> postagem no fórum

Para evitar dúvidas com o elemento <section> ou <article>, perceba que, enquanto o primeiro define a seção de um documento HTML5, o segundo é específico para criação de conteúdo independente e completo.

É possível unir sections dentro de articles e vice-versa. Para evitar confusão entre um e outro, faça a seguinte pergunta: caso você extraia esse elemento do seu contexto, ele permanece fazendo sentido? Se a resposta for afirmativa, é provável que seja um <article>, do contrário, é possível ser um <section>. 

<main>

Essa é uma das principais tags semânticas do HTML5. É responsável por definir o principal conteúdo da página, que deve ser exclusivo para o documento.

O <main> não deve conter nenhum conteúdo a ser replicado em documentos como logotipos de sites, formulários de pesquisa, links de navegação e barras laterais.

Sendo o elemento principal, não deve ser aninhado dentro de header, footer, sections e outros. Deve estar situado no body.

 Você também pode se interessar: Principais vantagens de ter um blog

<aside>

Utilizado quando buscamos destacar um trecho de um conteúdo ou artigo à parte, esse elemento também serve quando queremos chamar atenção para um dado adicional.

Ao utilizarmos essa TAG semântica do HTML 5, a informação é separada do conteúdo principal.

<footer>

Por fim, o <footer> define o rodapé da página web. É nele que inserimos informações sobre direitos autorais, informações do autor, mídias sociais, política de privacidade, termos de serviço, entre outros.

Veja um exemplo de código com a TAG:

<body>

    ...

    <footer>

        <img src="logo.png">

        <p>Endereço: ...</p>

        <p>Telefone:(XX)XXXX-XXXX</p>

        <p>Todos os direitos reservados</p>

    </footer>

</body>

Dica: fique de olho na compatibilidade com os navegadores

O uso das TAGs semânticas em HTML5 abordadas neste artigo nem sempre é reconhecido pelos navegadores, como o Internet Explorer 6, 7 e 8. Nesse caso, você pode usar o html5shiv. Trata-se de um hack desenvolvido para solucionar as falhas do IE. Basta colar o comando abaixo na <head>:

Leia também: Hospedagem de site gratuita

E aí, gostou de conhecer as principais tags semântica do HTML5? Você já usou ou ainda não sabia o que era o HTML Semântico? Deixe sua dúvida nos comentários!

Gostou de nosso post? Compartilhe: