HTML semântico: práticas recomendadas para 2019
Publicados: 2019-08-31O HTML semântico é mais importante agora do que nunca, especialmente porque o Google muda os algoritmos de classificação de página constantemente. Os primeiros lugares em cada consulta estão se tornando cada vez mais competitivos. Você precisa de uma arma secreta, e HTML semântico é uma boa arma para se ter em seu arsenal. Você pode usar algum código semântico em seus sites, mas quanto mais você inserir para o conteúdo importante, melhores os mecanismos de pesquisa poderão rastrear seu site e saber o que você oferece aos visitantes em potencial.
O que é HTML semântico?
Em suma, o HTML semântico é um HTML que os humanos podem ler e compreender. Qualquer ser humano, não apenas programadores e desenvolvedores, e se os humanos podem ler mais facilmente, os robôs também podem. Se os robôs puderem ler a estrutura do seu site com mais facilidade, eles poderão tomar uma decisão mais informada sobre como o seu site resiste a várias consultas de pesquisa.
Basicamente, você está dizendo aos rastreadores do mecanismo de pesquisa "esta é uma postagem de blog" ou "este é um menu de navegação" ou
Mas como isso acontece? Bem, ele usa uma série de tags HTML5 especiais que são muito específicas. Vamos examinar alguns exemplos e você poderá ver por si mesmo.
Formatação de Texto
A formatação de texto é o HTML semântico mais comum que existe e você o vê todos os dias. Anteriormente, letras simples eram usadas para indicar a formatação, significando negrito , itálico , sublinhado e assim por diante.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Com HTML semântico, você usa texto forte para negrito e mostra sua importância forte ou em para itálico (ou enfatizar) o texto. Curiosamente, U ainda é usado para sublinhar texto; no entanto, o MDN sugere estilizá-lo via CSS com decoração de texto: sublinhado; para diferenciá-lo.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
Também gostam de del para mostrar tachado texto excluído.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
E pensamos que terminaríamos nossa análise da formatação de texto HTML semântico com um destaque. Literalmente. Se você usar a marca ao redor do texto, destacará tudo o que incluir.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
O MDN diz que isso não deve ser usado da mesma forma que você usa o forte . Você usa forte para indicar algo importante no texto, e você usa marca para destacar algo que é relevante para a compreensão do mesmo.
Seções, cabeçalhos e menus
Talvez a melhor maneira de começar seja usando cabeçalhos e rodapés. Você sabe, as partes favoritas de todos os sites para construir e lidar. Com o HTML tradicional, você pode ter um cabeçalho codificado assim:
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Olhando para esse código, você pode ver o que tudo é. No entanto, isso só acontece se você souber o que está olhando. Você tem alguns divs (contêineres) aninhados que separam o título, o slogan e o menu (incrivelmente básico). Não há nada de errado com essa configuração, mas certamente não há nada realmente certo sobre isso. Se você for um pouco além, poderá usar o código CSS e a marcação de classe para manter as coisas um pouco mais legíveis.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Com HTML semântico, as coisas parecem muito mais limpas e fáceis de ler, você não precisa depender de divs e as classes e ids que você escolhe podem ser apenas para estilização.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
Não é muito mais fácil ler e dizer o que está acontecendo? Você tem uma tag de cabeçalho que permite saber que este é o cabeçalho da página e uma tag de navegação que indica um menu de navegação. (É até inteligente o suficiente para não precisar de um estilo extra para listar as entradas horizontalmente.)
Tecnicamente, você também pode usar o código a seguir, se quiser garantir que seus estilos sejam aplicados corretamente, além de ter uma maneira de vincular a uma seção específica do site. Nesse caso, a tag de seção funciona de maneira semelhante à forma como a tag div funciona nos exemplos anteriores. Exceto, é claro, que é legível e faz sentido para os olhos humanos.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
Além disso, observe o uso de id = ”hero-section” , que é uma etapa opcional da etapa opcional, mas você pode estilizar a seção como um seletor CSS por conta própria.
Aprendizado
- Use a seção em lugares onde você pode ficar tentado a usar um div externo.
- Use pode usar cabeçalho para indicar que parte da página é o seu cabeçalho. Você também pode usar isso em um artigo ou postagem para indicar o cabeçalho dessa postagem, que é separado do próprio site.
- Use nav ao definir um menu de navegação principal para o site. Nav não é uma forma de os mecanismos de pesquisa encontrarem links, mas a principal maneira pela qual os usuários podem navegar em seu site. Qualquer coleção de links (como breadcrumbs, etc.) também pode ser incluída no nav
Rodapé
Não é preciso dizer muito sobre o rodapé, mas temos que mencioná-lo. De muitas maneiras, é um análogo direto ao cabeçalho. Um rodapé básico tradicional pode ter a seguinte aparência:
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
Considerando que um rodapé semântico pode ter a seguinte aparência:
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
É certo que não há muita diferença aqui na configuração básica, mas os robôs que veem seu site irão apreciar o esclarecimento. Além disso, lembre-se de que você pode usar rodapé para páginas, postagens ou rodapés de sites.
Principal, artigos e aparte
Outro componente principal do HTML semântico é a tag do artigo . Ao lado disso, o aparte também. Ambos permitem que você estruture o conteúdo real do seu site para que os mecanismos de pesquisa saibam qual é o texto principal, o que, por sua vez, permite que eles se concentrem no problema que você está resolvendo e no tópico em que se concentra.
Normalmente, uma postagem de blog ou página é um documento HTML simples, mas o cabeçalho, rodapé, conteúdo, barras laterais, inserções, etc. podem ser todos agrupados.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
Agora, esse não é um código bonito, mas funciona. No entanto, não é bonito e requer uma quantidade razoável de CSS para parecer quase legível quando renderizado. Usando main , article e aparte , você pode facilmente estruturar a página para ser mais legível.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
Você deve observar, no entanto, que só pode indicar o conteúdo principal da página uma única vez. O que significa que você só pode usar um principal por página. Você pode aninhar vários artigos em um único principal para indicar um índice analítico ou diretório de conteúdo autônomo (você pode até usar várias tags H1 dessa forma para mostrar aos mecanismos de pesquisa que essas postagens são autônomas.
Aprendizado
- Use uma única tag principal por página
- Várias tags de artigo podem ser usadas por página para identificar conteúdo separado e autônomo (incluindo vários H1 s por página)
- À parte pode ser usado como uma barra lateral ou inserir em uma postagem ou página
Outros elementos menos usados
É certo que os elementos e tags que discutimos acima são as partes mais usadas do HTML semântico. Afinal, quase todos os sites da Internet contêm alguma combinação deles, enquanto as demais tags semânticas suportadas são mais específicas e limitadas. No entanto, eles não são menos úteis quando atendem a seu propósito e ajudam imensamente na interação e na indexação de pesquisa.
Detalhes e Resumo
Os detalhes e elementos de resumo criam uma camada de conteúdo em expansão que pode ser oculta para os usuários, a menos que eles a ativem especificamente (como um módulo de acordeão no Divi ou em outros criadores de páginas).
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
Quaisquer filhos do resumo serão ocultados e expansíveis, e você pode adicionar texto adicional fechando o elemento de detalhes .
Figura e Figcaption
Eles são bastante autoexplicativos. Figura é algum tipo de auxílio visual em sua postagem. Foto, gráfico, um vídeo do YouTube embutido, talvez. O figcaption, então, é a legenda que você adicionar ao explicar o uso da figura acima. Embora sejam de natureza técnica para o uso da semântica, você pode usar isso para qualquer conteúdo que deseja indexar especificamente como um auxílio na postagem ou página principal.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Essas tags são uma excelente maneira de obter um snippet em destaque no Google, por exemplo, quando você está indicando especificamente a solução ou explicação de um problema. Aconselhamos usá-los porque não apenas reduz o código que você usa para adicionar uma legenda e estilizá-la, mas também mantém a figura e a legenda como um único elemento da página, não como elementos separados.
Tempo
O tempo é uma das tags mais raramente usadas, mas quando você tem um evento ou ocasião especial em que precisa especificamente do mecanismo de pesquisa para saber que há uma hora ou data envolvida, use isso em vez de simplesmente colocar em negrito ou enfatizar o texto.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
Usar datetime com o elemento time oferece ao seu desenvolvimento uma visão muito melhor do tempo, o que permitirá a integração com calendários e várias outras APIs. Você poderá enviar lembretes de seu site e as pessoas voltarão com mais frequência.
Conclusão
Embora não seja errado usar HTML não-semântico, se você adquirir o hábito enquanto trabalha, verá que sua classificação no mecanismo de pesquisa aumentará. Isso é importante, mas o que pode ser ainda mais importante, no entanto, é que você economizará tempo na forma como estruturar e estilizar seu site, além de evitar muitas dores de cabeça e dívidas técnicas para as pessoas que vierem depois de você no projeto .
Quais práticas recomendadas para HTML semântico você segue?
Imagem de destaque do artigo por whiteMocca / shutterstock.com