Las mejores prácticas de HTML ayudan a los desarrolladores a ofrecer sitios y aplicaciones web innovadores y altamente interactivos. Estas prácticas recomendadas ayudan a desarrollar las aplicaciones más ricas en funciones y centradas en el negocio. Además, las organizaciones pueden aprovechar estas prácticas recomendadas para ofrecer una experiencia de usuario perfecta.
Hoy en día, cuando hablamos de HTML, solemos hablar de HTML5 (y no de sus predecesores inmediatos). HTML5 es un potente lenguaje de marcas que permite a los desarrolladores web crear un documento web. Es fácil de usar y entender, y casi todos los navegadores lo soportan. Además, es la base de casi todos los sistemas de gestión de contenidos (CMS)
Como desarrollador web con un mínimo de experiencia, a menudo surgen preguntas como «¿Cómo puedo escribir mejor HTML?». Este artículo pretende ayudarte a empezar con buen pie.
El enfoque general de la codificación HTML
Es probable que ya conozcas este lenguaje de marcas, pero aquí tienes algunas buenas prácticas de HTML5 que te permitirán codificar mejor.
Declara siempre un Doctype
Al crear un documento HTML, la declaración DOCTYPE es necesaria para informar al navegador de los estándares que se están utilizando. Su objetivo es que el marcado se muestre correctamente.
Por ejemplo:
| Versión | Declaración del tipo de documento |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
La declaración <DOCTYPE> debe estar en la primera línea de tu documento HTML. He aquí una comparación entre su implementación correcta y la incorrecta:
| Buena práctica | Mala práctica |
|---|---|
|
|
También puedes utilizar el doctype correspondiente a la versión de HTML/XHTML que quieras utilizar. Conozce la lista recomendada de declaraciones de doctype para ayudarte a elegir la correcta.
Colocación de etiquetas HTML
Los desarrolladores saben que el propósito de las etiquetas es ayudar a los navegadores web a distinguir entre el contenido HTML y el contenido ordinario. Las etiquetas HTML contienen una etiqueta de apertura, un contenido y una etiqueta de cierre. Sin embargo, a menudo se confunden sobre la colocación correcta de las etiquetas, los elementos que requieren etiquetas de cierre o cuándo omitirlas.
Por ejemplo, ¿cuál es el mejor lugar para colocar las etiquetas <script>?
Las etiquetas de script suelen colocarse dentro del elemento <head>. Pero una buena práctica moderna de HTML es colocarlos en la parte inferior del documento, antes de cerrar la etiqueta <body>, para retrasar su descarga. La página web cargará primero el Modelo de Objetos del Documento (DOM – Document Object Model), lo mostrará al usuario y solicitará los scripts después, reduciendo el tiempo hasta el primer byte (TTFB – Time to first byte).
El navegador interpreta el documento HTML línea por línea de arriba a abajo. Así, cuando lee el encabezado y se encuentra con una etiqueta de script, inicia una petición al servidor para obtener el archivo. No hay nada inherentemente malo en este proceso, pero si la página está cargando un archivo enorme, tardará mucho tiempo y afectará mucho a la experiencia del usuario.
El elemento raíz
Bajo el elemento raíz se encuentra el atributo <lang> , o idioma. Este atributo ayuda a traducir un documento HTML al idioma adecuado. La mejor práctica es mantener el valor de este atributo lo más corto posible.
Por ejemplo, el idioma japonés se utiliza principalmente en Japón. Por lo tanto, el código de país no es necesario cuando se dirige al idioma japonés.
| Buena práctica | Mala práctica |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
Qué hacer y qué no hacer en HTML
Una de las mejores prácticas de HTML más comunes es comprobar lo que se debe y lo que no se debe hacer. A continuación, se presentan algunos de los «no hacer» conocidos en la codificación de HTML:
| Descripción | Buenas prácticas | Malas prácticas |
|---|---|---|
| En el texto, utiliza el equivalente en código HTML de los caracteres Unicode en lugar del propio carácter. | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| Elimina los espacios en blanco alrededor de las etiquetas y los valores de los atributos. | <h1 class="title">HTML5 Best Practices</h1> |
<h1 class=" title " > HTML5 Best Practices </h1> |
| Practica la coherencia y evita mezclar casos de caracteres. | <a href="#status">Status</a> |
<a HREF="#status">Status</a> |
| No separes los atributos con dos o más espacios en blanco. | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
Mantén la sencillez
Como cualquier práctica de codificación, el principio de «mantener la sencillez» es muy aplicable a HTML y HTML5. Por lo general, HTML5 es compatible con versiones anteriores de HTML y XHTML. Por ello, se recomienda evitar el uso de declaraciones o atributos XML.
Por ejemplo:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
No es necesario declarar el código como tal, a menos que quieras escribir un documento XHTML. Del mismo modo, no necesita atributos XML, como:
<p lang="en" xml:lang="en">...</p> Codificar pensando en el SEO
Los desarrolladores deben codificar pensando en el SEO. Los contenidos web que no se encuentran tampoco se indexan. Por esa razón, aquí tienes algunas de las mejores prácticas de SEO a tener en cuenta:
Añade metadatos relevantes
La etiqueta <base> es una etiqueta útil, pero su uso incorrecto puede dar lugar a algunos comportamientos no intuitivos. Así, si se declara una etiqueta base, todos los enlaces del documento serán relativos a menos que se especifique explícitamente:
<base href="http://www.kinsta.com/" />Esta sintaxis cambia el comportamiento por defecto de algunos enlaces. Por ejemplo, enlazar a una página web externa con solo el nombre de la página y la extensión:
href="coding.org"O el navegador lo interpretará como:
href="http://www.kinsta.com/coding.org"Esta interpretación se vuelve caótica, por lo que es más seguro utilizar siempre rutas absolutas para tus enlaces.
Por otro lado, escribir descripciones de metatags no es estrictamente una parte de las mejores prácticas de HTML, pero sigue siendo igualmente importante. El atributo <meta name="description"> es lo que los rastreadores de los motores de búsqueda consultan cuando indexan tu página, por lo que es vital para la salud de tu SEO.
Establecer etiquetas de título adecuadas
La etiqueta <title> hace que una página web sea fácil de buscar en los motores de búsqueda. Por un lado, el texto dentro de la etiqueta <title> aparece en las páginas de resultados del motor de búsqueda (SERP) de Google y en la barra del navegador y las pestañas del usuario.
Por ejemplo, cuando se busca la palabra clave «HTML5». El título de este resultado de búsqueda indica el atributo específico del título y el autor. Esto es muy importante en el SEO y la generación de tráfico del sitio.
Las imágenes deben tener un atributo Alt
Utilizar un atributo alt significativo con los elementos <img> es imprescindible para escribir un código válido y semántico.
En la tabla siguiente, la columna de mala práctica muestra un elemento <img> sin atributo alt. Aunque el segundo ejemplo de la misma columna tiene un atributo alt, su valor no tiene sentido.
| Buena práctica | Mala práctica |
|---|---|
|
|
Meta atributos descriptivos
La meta descripción es un elemento HTML que describe y resume el contenido de una página web. Su propósito es que los usuarios encuentren el contexto de la página. Aunque los metadatos ya no ayudan a la clasificación SEO, la meta descripción sigue desempeñando un papel importante en el SEO on-page.
Aquí hay un código de muestra que incluye las palabras clave, la descripción, el nombre del autor y el conjunto de caracteres. El juego de caracteres se utiliza para soportar casi todos los caracteres y símbolos de diferentes idiomas. Por otro lado, se pueden establecer cookies, añadir una fecha de revisión y permitir que la página se actualice.
<!DOCTYPE html>
<html>
<head>
<title>HTML Best Practices in Website Design</title>
<meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
<meta name = "description" content = "Learn about HTML best practices." />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>Atributo de título con enlaces
En los elementos de anclaje, la mejor práctica es utilizar atributos de título para mejorar la accesibilidad. El atributo de título aumenta el significado de la etiqueta de anclaje. La etiqueta <a> (o elemento de anclaje) emparejada con su atributo href, crea un hipervínculo a páginas web, direcciones de correo electrónico y archivos. Se utiliza para enlazar lugares dentro de la misma página o direcciones externas.
Comprueba el ejemplo en la columna de mala práctica: está ahí por ser redundante. Este tipo de práctica es evidente si un usuario utiliza un lector de pantalla para leer la etiqueta de anclaje y leer el mismo texto dos veces al oyente. Un lector de pantalla es una tecnología de asistencia que se proporciona a los discapacitados visuales o a los que tienen una discapacidad de aprendizaje. Como buena práctica, si sólo se repite el texto del ancla, es mejor no utilizar ningún título.
| Buena práctica | Mala práctica |
|---|---|
<a href="http://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> |
<a href="http://kinsta.com/our-pricing" title="Click Here">Click here</a> |
Las Mejores Prácticas HTML para Diseños
El desarrollo de un sitio web no es simplemente una cuestión de crear un bloque de texto y encabezados, enlazar páginas y ya está. Hay que tener en cuenta algunas de las mejores prácticas en HTML para sacar el máximo partido a tu sitio web.
Establece una estructura documental adecuada
Los documentos HTML seguirán funcionando sin los elementos primarios: <html> , <head> y <body>. Sin embargo, es posible que las páginas no se muestren correctamente si faltan estos elementos. Para ello, es importante utilizar la estructura adecuada del documento de forma consistente.
Agrupar las secciones relevantes
Para una agrupación temática de contenidos, utiliza el elemento section. Según la especificación del W3C, una <section> debe contener un encabezado (H1, H2, etc.). Algunos desarrolladores omiten por completo el uso del elemento heading, pero nosotros recomendamos incluirlo para llegar mejor a quienes utilizan lectores de pantalla:
| Buena práctica | Mala práctica |
|---|---|
|
|
Mejores prácticas de contenido integrado
La etiqueta <embed> sirve como contenedor de un recurso externo. Esto incluye páginas web, imágenes, vídeos o plug-ins. Sin embargo, hay que tener en cuenta que la mayoría de los navegadores ya no soportan los Applets y plug-ins de Java. Además, los controles ActiveX ya no son compatibles con ningún navegador, y la compatibilidad con Shockwave Flash también se ha desactivado en los navegadores modernos.
Recomendamos lo siguiente:
- Para una imagen, utiliza la etiqueta
<img>. - Para el HTML extraído de otro sitio, utiliza la etiqueta
<iframe>. - Para vídeos o audios, utiliza las etiquetas
<video>y<audio>.
El atributo alt en el elemento <img> proporciona una descripción de la imagen útil para los motores de búsqueda y los lectores de pantalla. Puede ser especialmente útil para los usuarios cuando las imágenes no pueden ser procesadas:
| Buena práctica | Mala práctica |
|---|---|
<img alt="HTML Best Practices" src="/img/logo.png"> |
<img src="/img/logo.png"> |
Deja el atributo alt vacío si hay un texto complementario para explicar la imagen. Esto es para evitar la redundancia:
| Buena práctica | Mala práctica |
|---|---|
<img alt="" src="/img/icon/warning.png"> Warning |
<img alt="Warning Sign" src="/img/icon/warning.png"> Warning |
Deja los elementos <iframe> vacíos si hay algunas restricciones en su contenido. Un elemento iframe vacío es siempre seguro:
| Buena prácticas | Mala práctica |
|---|---|
|
|
Los desarrolladores deben proporcionar contenido de reserva, o enlaces de respaldo, para cualquier elemento <audio> o <vídeo>, al igual que con las imágenes. El contenido alternativo es necesario, especialmente para los elementos recién introducidos en HTML:
| Buena práctica | Mala práctica |
|---|---|
|
|
Reducir el número de elementos
Los documentos HTML se complican, sobre todo cuando se trata de páginas web con mucho contenido. Lo mejor es reducir el número de elementos de una página al mínimo posible. Aprende a utilizar los elementos de encabezamiento con prudencia y sigue cómo los elementos <h1> a <h6> denotan la jerarquía de contenido de HTML. Esto hace que tu contenido sea más significativo para tus lectores, el software de lectura de pantalla y los motores de búsqueda.
Ejemplo:
<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</h6>Para los desarrolladores y creadores de contenido de WordPress, utiliza el elemento <h1> para el título de la entrada del blog en lugar del nombre del sitio. Esto ayuda en el rastreo de los motores de búsqueda, y este enfoque es amigable con el SEO.
Además, utiliza el elemento HTML adecuado para transmitir la información que contiene para lograr una estructura de contenido semántica y significativa. Por ejemplo, utiliza <em> para el énfasis y <strong> para el énfasis fuerte en lugar de sus predecesores <i> o <b> , que ahora están obsoletos.
Ejemplo:
<em>emphasized text</em>
<strong>strongly emphasized text</strong>Igualmente importante es utilizar <p> para los párrafos, y evitar el uso de <br /> para añadir una nueva línea entre párrafos. En su lugar, haz uso de las propiedades de margen y/o relleno de CSS para posicionar mejor tu contenido. A veces, puedes encontrarte con la tentación de utilizar la etiqueta <blockquote> para la sangría. Evita esta trampa: úsala exclusivamente cuando cites texto.
Qué Hacer y Qué No Hacer con los Diseños
Una de las mejores prácticas de HTML es utilizar elementos semánticamente apropiados en el diseño de tu página. Varios elementos te ayudarán a organizar tu diseño en secciones.
Con la gran amplitud de temas que hay en la maquetación HTML, lo mejor es destacar rápidamente lo que hay que hacer y lo que no hay que hacer en la maquetación. Por ejemplo, HTML da más significado semántico a los elementos de cabecera y pie de página, por lo que no hay que descuidar el uso de la etiqueta <header> según se utilice en una sección o artículo determinado. Además de controlar las etiquetas <title> y <meta> y otros elementos estilísticos del documento, se utiliza en los encabezados, las fechas de publicación y otros contenidos introductorios de tu página o sección. Del mismo modo, puedes acabar con la idea de que los pies de página pertenecen únicamente a la sección de derechos de autor: ahora puede utilizarlos en casi todas partes.
En el caso del elemento <nav>, debes utilizarlo para la navegación de todo el sitio. No es necesario declarar una función, ya que el uso está implícito en la etiqueta.
| Buena práctica | Mala práctica |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
En cuanto al elemento <main>, ya forma parte de las últimas versiones de HTML5, que denotan el contenido principal del cuerpo del documento. Por lo tanto, ya no es necesario utilizar <div> cuando tenemos una etiqueta más específica para nuestro contenido principal.
| Buenas prácticas | Mala práctica |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
La etiqueta <article> se utiliza para un bloque de contenido. Es independiente y tiene sentido sin necesidad de dar más explicaciones, mientras que la etiqueta <section> se utiliza para dividir una página en diferentes áreas temáticas o para seccionar un artículo individual. Desgraciadamente, muchos desarrolladores siguen utilizando las dos indistintamente.
Considere que la etiqueta <section> es una etiqueta más genérica que la etiqueta <article>. Esto significa que la primera denota un contenido relacionado con el tema en cuestión, pero no necesariamente autónomo. La segunda, por el contrario, es una propiedad independiente.
Pero cuando no hay una etiqueta de marcado apropiada para tus propósitos, ¿qué debes usar? La respuesta es usar <div> cuando ningún otro elemento funciona o cuando es un elemento específicamente estilístico. Para nuestros propósitos, usar <div> también es una mala práctica.
Volvamos a la etiqueta <section>, que es una etiqueta de marcado semántico. No es estilística, y es importante destacarla. En efecto, una buena práctica de codificación debería incluir una etiqueta de encabezamiento.
Ahora, lo que no se debe hacer con <section> es que no se debe usar para etiquetar un envoltorio, un contenedor o cualquier otro bloque puramente estilístico. A continuación se muestra un ejemplo de mala práctica de codificación con la etiqueta <section>:
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>Aquí hay un enfoque mejor, pero que utiliza en exceso la etiqueta <div>:
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>Por lo tanto, una práctica de codificación mucho mejor es:
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>Una parte popular de muchos diseños son las figuras para la representación de datos, y el elemento <figure> se utiliza sobre todo con imágenes. Sin embargo, tiene una gama más amplia de usos posibles, ya que cualquier cosa relacionada con el documento podría colocarse en cualquier lugar y envolverse en un elemento <figure>. Algunos ejemplos son ilustraciones, tablas o diagramas en un libro.
Una característica interesante de <figure> es que no contribuye al esquema del documento. Por lo tanto, puedes utilizarlo para agrupar elementos con un tema común – por ejemplo, varias imágenes con un <figcaption> común, o incluso un bloque de código.
Al agrupar elementos con <figure> , utiliza <figcaption>. La leyenda <figcaption> debe ir directamente después de la etiqueta <figure> de apertura o directamente antes de la etiqueta </figure> de cierre:
<figure>
<img src="image1.jpg" alt="Bird Image">
<img src="image2.jpg" alt="Tree Image">
<img src="image3.jpg" alt="Sun Image">
<figcaption>Three images related to a topic</figcaption>
</figure>Mejores prácticas de HTML en la creación de scripts
HTML es una de las tecnologías centrales en el desarrollo web. Tiene una potencia y unas características impresionantes que lo han hecho popular entre los desarrolladores y los empresarios. El desarrollo del frontend sigue innovando y, para mantenerse al día, los desarrolladores deben conocer las mejores prácticas de scripting en HTML.
Utiliza hojas de estilo externas
Los estilos en línea harán que tu código sea desordenado e ilegible. Por ello, enlaza siempre con hojas de estilo externas y utilízalas. Además, evita utilizar declaraciones de importación en tus archivos CSS, ya que producen una solicitud adicional al servidor.
Lo mismo ocurre con el CSS y el JavaScript inline. Aparte de los problemas de legibilidad, esto hará que tu documento sea más pesado y más difícil de mantener, por lo que puede evitar el código inline.
Utiliza las minúsculas
El uso de minúsculas en el código es una práctica estándar en la industria. Aunque el uso de mayúsculas u otros casos de texto seguirá renderizando tu página, el problema no es la estandarización sino la legibilidad del código.
La legibilidad del código es un aspecto importante de la codificación, ya que ayuda a que las aplicaciones sean mantenibles y seguras. Y no solo eso, el desarrollo web se compone principalmente de un equipo. Hacer que tu código sea legible hace que tu trabajo y el de tu equipo sean menos complicados.
| Buena prácticas | Mala práctica |
|---|---|
|
|
Lo que hay que hacer y lo que no hay que hacer en los scripts
Si bien hay muchas cosas que no se deben hacer en la codificación de HTML, compartiremos dos cosas básicas que no se deben hacer en la creación de scripts:
- Escribe códigos bien sangrados y con un formato coherente: Un código limpio y bien escrito promueve una mejor legibilidad en tu sitio, lo cual es una gran ayuda para tu desarrollador y otras personas que podrían trabajar con el sitio. También demuestra una gran profesionalidad y atención al detalle, lo que refleja bien tu actitud como desarrollador.
- No incluye demasiados comentarios: Los comentarios son esenciales y facilitan la comprensión del código. Sin embargo, la sintaxis de HTML se explica por sí misma, por lo que los comentarios no son necesarios a menos que tengas que aclarar la semántica y las convenciones de nomenclatura.
Validación y minificación
La validación y la minificación de los códigos sirven para identificar los errores desde el principio. No esperes a terminar tu documento HTML: convierte en un hábito la validación y la identificación de errores con frecuencia. Puedes hacer la validación manualmente o utilizar cualquier herramienta de validación conocida, como el W3C Markup Validator.
También puedes aprovechar la función de minificación de código integrada en el panel de control de MyKinsta. Esto permite a los clientes habilitar la minificación automática de CSS y JavaScript con un simple clic, lo que acelerará tus sitios sin ningún esfuerzo manual.
Al mismo tiempo, practica la minificación eliminando todo lo que no sea esencial, como los comentarios o los espacios en blanco. Asegúrate de escribir códigos limpios y concisos para reducir el tamaño de tu archivo HTML. Puedes utilizar herramientas como HTML Minifier y otras.
Resumen
Hay muchos recursos de mejores prácticas de HTML5 para 2021 disponibles en línea para ayudarte. Sin embargo, recuerda la regla general de la codificación: la coherencia. Este artículo te ha proporcionado una visión básica y te ha ayudado a iniciar ese viaje de desarrollo del frontend. Con esta guía, serás un experto en HTML5 semánticamente correcto en poco tiempo.
Cuando estés preparado, mira más allá de lo que puede ofrecer el HTML y explora también algunos frameworks HTML de código abierto para construir aplicaciones web modernas de una sola página. Ofrecen una excelente sincronización entre los datos y la interfaz de usuario y funcionan a la perfección con CSS y JavaScript.
¿Nos hemos olvidado de alguna de las mejores prácticas de HTML que utilizas en tu propia codificación? Háznoslo saber en la sección de comentarios.
Deja una respuesta