domingo, 4 de octubre de 2020

Etiquetas, atributos y estilos HTML / CSS que no debes usar o debes usar bien

Alambre de espino en una valla

En cada fila de la siguiente tabla encontrarás una etiqueta, atributo o estilo y las observaciones al respecto. Están listados alfabéticamente y agrupados por tipo.

Etiquetas, atributos y estilos que no debes usar o debes usar bien
Etiquetas HTML Observaciones
<b>

El estándar HTML5 mantiene la etiqueta <b> para marcar texto resaltado pero que no transmite mayor importancia, pero en la práctica se sigue usando de manera incorrecta para resaltar contenido relevante en negrita. Se debe separar el diseño de la presentación y evitar las etiquetas no semánticas.

Si quieres destacar una palabra, o conjunto de palabras, importante usa <strong>.

No destaques demasiada cantidad de texto o, de lo contrario, no solo no se destacará sino que producirá fatiga y ralentizará la velocidad de lectura.

<basefont>

Obsoleta. Usa estilos para definir las fuentes.

<blink>

Obsoleta. No se debe provocar parpadeos en pantalla.

<br>

Usa estilos para definir la separación entre líneas y párrafos. Puede usarse en <address>

<center>

Obsoleta. Usa estilos para centrar.

<font>

Obsoleta. Usa estilos para definir las fuentes.

<i>

Puedes usarlo con su verdadero valor semántico, es decir, para marcar una designación taxonómica, un término técnico o un término en otro idioma (sin olvidar acompañarlo de lang). En castellano puede sustituirse por el uso de comillas.

No debe usarse para simular un encabezado. Tampoco debe usarse para enfatizar el texto, para ello se usa en su lugar <em>. No uses <i> con background-image para incluir iconos. Si se quiere formatear el texto en itálica por diseño, se deben usar estilos, pero recuerda que el texto en itálica se lee peor y debería evitarse.

<marquee>

Obsoleta. No provoques movimiento si no puede pararse.

<s>

Su función semántica en el estándar HTML5 es marcar texto que ya no es preciso o relevante. Si lo que quieres es indicar texto corregido, debes usar <del> y <ins>

<strike>

Obsoleto. En HTML 4 definía texto tachado.

<u>

Puede usarse con su verdadero valor semántico en HTML5, es decir, para marcar un texto con una anotación no textual, por ejemplo, con un estilo diferente para reflejar una falta ortográfica:

<p>Un error ortográfico común es <u>llendo</u>

Un error ortográfico común es llendo

Pero no debe usarse para subrayar un texto simplemente para resaltarlo o para simular un encabezado. Solo deberías subrayar de manera estándar los enlaces, pues cualquier texto subrayado se tiende a identificar como enlace.

Atributos HTML Observaciones
align

No uses <p align="center"> sino el estilo CSS text-align

bgcolor

No uses <p bgcolor="#000"> sino el estilo CSS background-color

border

No uses <table border="1"> sino el estilo CSS border

cellspacing

No uses <table cellspacing="1"> sino el estilo CSS border-spacing / border-collapse

cellpadding

No uses <table cellpadding="1"> sino el estilo CSS padding

frameborder

No uses <frame frameborder="1"> sino el estilo CSS border

height

Es mejor que definas el alto en los estilos.

summary

Obsoleto en HTML5. Consultar artículo Descripción de las tablas en HTML5. Alternativa a "summary"

width

Es mejor que definas el ancho en los estilos.

Estilos CSS Observaciones
::after/::before content:

No debes usarlos para incluir contenido informativo en la página, por ejemplo, el asterisco de los campos obligatorios, pues sin CSS o con CSS personales no estará disponible esa información.

outline:0/none

No debes ocultar el foco visual de los elementos de interacción.

Artículos relacionados:

1 comentario: