HTML semântico para conteúdo da Web

Com um pouco de esforço, podemos tornar nossa marcação mais significativa. Mas por que investir tempo e recursos extras para implementar HTML semântico? A maioria dos usuários não lê nosso HTML.

E eles só se importam com o que está na tela. HTML semântico é realmente apenas para máquinas. Eles não são tão inteligentes quanto você e eu, então precisamos ajudá-los.

Um exemplo de máquinas que se beneficiam do HTML semântico são os mecanismos de busca. 

Serviços da web de mídia social como Facebook, Pinterest e Twitter adoram marcação semântica. Especialmente quando nossos usuários compartilham nosso conteúdo neles. Esses serviços da web fazem parte de nossos artigos para serem exibidos em sua plataforma.

Se usarmos HTML semântico, eles poderão fazer um trabalho melhor. As ferramentas de tradução de idiomas examinam nossa marcação para que possam converter nossos artigos para outro idioma. Uma boa marcação HTML pode resultar em traduções mais precisas.

Por exemplo, existem distinções sutis entre o inglês americano e o inglês britânico. As pessoas podem entender as diferenças dialéticas e idiomáticas com facilidade. Mas as máquinas podem não.

O HTML semântico também melhora a acessibilidade na web. Tecnologias assistivas, como software de leitura de tela, analisam e interpretam nosso HTML. Com HTML semântico, pessoas com necessidades especiais poderão ler e navegar em nossos artigos com mais facilidade. Isso é apenas a ponta do iceberg.

Há um zilhão de outras máquinas que olham para o nosso HTML e tentam entendê-lo. Caramba, a Internet é feita de um monte de máquinas. Eles são uma grande parte da Web.

Devemos tentar o nosso melhor para alimentá-los com dados mais significativos. OK, então, agora, eu espero que você esteja a bordo. Agora você quer usar HTML semântico. Talvez no seu blog.

Ou em um projeto de desenvolvimento de CMS. Confira o clichê abaixo.

Modelo HTML

Aqui está um modelo HTML semântico para conteúdo da web. É um bom ponto de partida/boilerplate.

Basta preencher os espaços em branco. É geral o suficiente para funcionar em muitos tipos de conteúdo textual. Postagens de blog, artigos de notícias, ensaios e assim por diante.

Este modelo foi alterado devido ao uso incorreto dos elementos maine summaryHTML. Veja este comentário abaixo.

<!DOCTYPE html> <html itemscope itemtype=”https://schema.org/Article” lang=”” dir=””> <head> <title itemprop=”name”></title> <meta itemprop=”description” name=”description” content=””> <meta itemprop=”author” name=”author” content=””> </head> <body> <article> <header> <h1 itemprop=”headline”></h1> <time itemprop=”datePublished” datetime=””></time> <p><a itemprop=”author” href=””></a></p> </header> <div itemprop=”about”></div> <div itemprop=”articleBody”> <!– The main body of the article goes here –> </div> <footer> <time itemprop=”dateModified” datetime=””></time> <section itemscope itemtype=”http://schema.org/WebPage“> <!– Section heading–> <h2></h2> <p><a itemprop=”relatedLink” href=””></a></p> </section> </footer> </article> </body> </html>

O modelo de marcação HTML usa elementos HTML semânticos (ou seja  article, header, e footer).

Além disso, ele usa marcação de dados estruturados do Schema.org. Particularmente os esquemas Article e WebPage . Schema.org é um projeto conjunto do Google, Bing e Yahoo!.

Um objetivo do projeto é fornecer uma maneira para os mecanismos de pesquisa entenderem melhor nosso conteúdo.

Exemplo

Veja um exemplo preenchido:

<!DOCTYPE html> <html itemscope itemtype=”https://schema.org/Article” lang=”en” dir=”ltr”> <head> <title itemprop=”name”>Article’s Web Page Title</title> <meta itemprop=”description” name=”description” content=”Short description of the article.”> <meta itemprop=”author” name=”author” content=”Author Name”> </head> <body> <article> <header> <h1 itemprop=”headline”>The Article’s Headline</h1> <time itemprop=”datePublished” datetime=”1990-11-12″>November 12, 1990</time> <p>By <a itemprop=”author” href=”#author-profile.html”>Author Name</a></p> </header> <div itemprop=”about”>Summary of the article. This could be the lead, excerpt, abstract, or introductory paragraph.</div> <div itemprop=”articleBody”> <p>The main body of the article goes here.</p> </div> <footer> <p>This article was updated on <time itemprop=”dateModified” datetime=”2015-03-01″>March 30, 2015</time></p> <section itemscope itemtype=”http://schema.org/WebPage“> <h2>Related Articles</h2> <p><a itemprop=”relatedLink” href=”#related-article.html”>A Related Article</a></p> <p><a itemprop=”relatedLink” href=”#related-article-02.html”>Another Related Article</a></p> </section> </footer> </article> </body> </html>

Detalhes

Vamos falar sobre as várias partes do modelo HTML.

Especificando o tipo de conteúdo, idioma e direção do texto

O htmlelemento tem quatro atributos:

  • itemscopeindica que o esquema do artigo é usado em todo o documento HTML.
  • itemtypecontém o endereço da web do esquema que estamos usando.
  • langfornece informações sobre o idioma em que o conteúdo está escrito. O W3C diz que agora devemos usar os códigos de idioma listados no Registro de subtags de idioma da IANA .
    Por exemplo, se a página estiver escrita em alemão, devemos atribuir ao langatributo o valor de de.
  • dirfornece informações sobre a direção do texto do artigo. Você tem duas opções aqui. diré “da esquerda para a direita” ( ltr) ou “da direita para a esquerda” ( rtl).
    Se você quiser que o navegador decida por você, retire o diratributo.

Related Posts

Landing page vs. Website: qual é a melhor opção para o seu negócio?

Ter uma presença online é fundamental nos dias de hoje para qualquer negócio. É por meio da internet que muitas pessoas procuram por produtos, serviços e informações….

Anúncios colocados programaticamente para dezenas de organizações sem fins lucrativos e universidades estão aparecendo em sites de desinformação

Anúncios colocados programaticamente para dezenas de organizações sem fins lucrativos e universidades estão aparecendo em sites de desinformação.

Incluindo alguns que entram em conflito aberto com as missões das principais organizações que pagam por esses anúncios, de acordo com um novo relatório lançado hoje. Pesquisadores…

Estratégia de marketing B2B: publicidade paga por clique (PPC)

Estratégia de marketing B2B: publicidade paga por clique (PPC)

A publicidade PPC envolve a criação de anúncios pagos que aparecem no topo dos resultados da pesquisa. Você os verá marcados com a palavra “anúncio” para indicar…

Tipos de correspondência do Google Ads: 3 tipos de correspondência de palavras-chave PPC para seus anúncios

Tipos de correspondência do Google Ads: 3 tipos de correspondência de palavras-chave PPC para seus anúncios

Agora que abordamos quais são os tipos de correspondência de palavra-chave, vamos ver os três tipos de correspondência do Google Ads que você pode usar para suas…

Como projetar um logotipo: um processo de 5 etapas

Como projetar um logotipo: um processo de 5 etapas

Etapa 1: Resumo do projeto O tempo e o esforço necessários para concluir um briefing de design, bem como o conteúdo do briefing de design, dependerão do…

Veja quatro dicas úteis do Git para iniciantes

Veja quatro dicas úteis do Git para iniciantes

Dica 1: Passe algum tempo aprendendo o básico do Git Aprender o básico não significa que você tenha que ler toda a documentação do Git do início…

Deixe um comentário

O seu endereço de e-mail não será publicado.