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.
