Hola Habr! Les presento la traducción del artículo
"Los 3 principales elementos HTML que olvidamos" de Stas Melnikov.
Hace poco leí las especificaciones y me di cuenta de que estamos usando un conjunto limitado de elementos HTML. Por lo tanto, me gustaría hablar sobre los tres elementos que olvidamos, pero que están en cada proyecto.
Elemento de dirección
A menudo, debe marcar un bloque de redes sociales u otra información de contacto en nuestros proyectos. Por lo general, los desarrolladores usan el siguiente 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>
Pero la especificación WHATWG contiene un elemento de dirección especial para esta tarea.
El elemento de dirección representa la información de contacto para el artículo más cercano o el elemento principal del cuerpo. Si este es un elemento del cuerpo, la información de contacto se aplica a todo el documento.
Por lo tanto, el siguiente código es más cierto:
<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
Deberíamos usar listas para marcar elementos de navegación tales como migas de pan, paginación, etc. Esto es necesario para ayudar a los lectores de pantalla a leer la cantidad de elementos en la navegación.
<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>
Usualmente usamos el elemento ul. Pero la especificación contiene una etiqueta más adecuada: ol. La especificación WHATWG dice:
El elemento ol representa una lista de elementos donde los elementos se ordenan deliberadamente para que cambiar el orden cambie el significado del documento.
Si reordenamos los elementos en la navegación de ruta de navegación, cambiamos el valor del sitio web. Por lo tanto, el siguiente código es más cierto:
<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 tiempo
Usamos el elemento span para marcar las fechas de varias publicaciones.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
Pero podemos usar la etiqueta de tiempo para esto, que está contenida en la especificación WHATWG. Esto es lo que dice la especificación WHATWG:
El elemento de tiempo representa su contenido junto con la forma legible por máquina de este contenido en el atributo datetime. El contenido está limitado por varias fechas, horas, zonas horarias y duraciones.
Por lo tanto, debemos usar el elemento tiempo para marcar fechas.
<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>