Olá Habr! Apresento a você a tradução do artigo
"Os três principais elementos HTML que esquecemos" de Stas Melnikov.
Li recentemente as especificações e percebi que estamos usando um conjunto limitado de elementos HTML. Por isso, gostaria de falar sobre os três elementos que esquecemos, mas que estão em todos os projetos.
Elemento de endereço
Muitas vezes, você precisa marcar um bloco de redes sociais ou outras informações de contato em nossos projetos. Normalmente, os desenvolvedores usam o seguinte código:
<div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div>
Mas a especificação WHATWG contém um elemento de endereço especial para esta tarefa.
O elemento de endereço representa as informações de contato do elemento pai do artigo ou do corpo mais próximo. Se este é um elemento do corpo, as informações de contato se aplicam a todo o documento.
Assim, o seguinte código é mais verdadeiro:
<address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address>
Elemento Ol
Devemos usar listas para marcar itens de navegação, como trilha de navegação, paginação etc. Isso é necessário para ajudar os leitores de tela a ler o número de itens na navegação.
<nav class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav>
Geralmente usamos o elemento ul. Mas a especificação contém uma etiqueta mais adequada. A especificação WHATWG diz:
O elemento ol representa uma lista de itens em que os itens são ordenados deliberadamente, para que a alteração da ordem altere o significado do documento.
Se reordenarmos os itens na navegação de navegação, mudaremos o valor do site. Assim, o seguinte código é mais verdadeiro:
<nav class="breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav>
Elemento de hora
Usamos o elemento span para marcar as datas de várias publicações.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
Mas podemos usar a marcação de tempo para isso, contida na especificação WHATWG. É isso que a especificação WHATWG diz:
O elemento time representa seu conteúdo junto com a forma legível por máquina desse conteúdo no atributo datetime. O conteúdo é limitado por várias datas, horários, fusos horários e durações.
Portanto, devemos usar o elemento time para marcar datas.
<time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>