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 completa as principais tags semânticas do HTML5 para te auxiliar a ter uma boa estrutura HTML na hora de criar um blog.
Quer saber quais são? Então confira agora!
Um pouco mais sobre o HTML
Em outras palavras, o HTML semântico é 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.
TAGs HTML5
Vamos ver agora uma lista de tags 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.
Observe o exemplo:
<header>
<div class="logo">
<h1>Minha página</h1>
<img src="logo.webp"/>
</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.
<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.webp">
<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>:
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:
