Prácticas recomendadas de HTML para crear sitios web escalables y mantenibles

Las mejores prácticas de HTML ayudan a los desarrolladores a ofrecer sitios web y aplicaciones web innovadores y altamente interactivos. Estas mejores prácticas lo ayudan a desarrollar las aplicaciones más ricas en funciones y centradas en el negocio. Además, las organizaciones pueden aprovechar estas mejores prácticas para brindar una experiencia de usuario perfecta.

Hoy, cuando hablamos de HTML, normalmente hablamos de HTML5 (y no de sus predecesores inmediatos). HTML5 es un poderoso lenguaje de marcado que permite a los desarrolladores web crear un documento web. Es fácil de usar y comprender, y casi todos los navegadores lo admiten. Además, es la base de casi todos los sistemas de gestión de contenido (CMS).

Como desarrollador web con experiencia mínima, preguntas como «¿Cómo puedo escribir mejor HTML?» surgen a menudo. Este artículo tiene como objetivo ayudarlo a comenzar con el pie derecho.

Enfoque general de codificación HTML

Probablemente ya conozca este lenguaje de marcado, pero aquí hay algunas prácticas recomendadas de HTML5 que le permitirán codificar mejor.

Declare siempre un Doctype

Al crear un documento HTML, el DOCTYPE Se requiere una declaración para informar al navegador qué estándares está utilizando. Su propósito es representar su marcado correctamente.

Por ejemplo:

los <DOCTYPE> La declaración debe estar en la primera línea de su documento HTML. Aquí hay una comparación entre su implementación correcta e incorrecta:

<!DOCTYPE html>
<html>...</html>

<html>...</html>

Alternativamente, puede usar el tipo de documento correspondiente a la versión HTML / XHTML que desea usar. Obtenga información sobre la lista recomendada de declaraciones de tipos de documentos para ayudarlo 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 contenido HTML y 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 ubicación adecuada de las etiquetas, los elementos que requieren etiquetas de cierre o cuándo omitir las etiquetas.

Por ejemplo, ¿cuál es el mejor lugar para poner <script> etiquetas?

Las etiquetas de secuencia de comandos se colocan normalmente dentro del <head> elemento. Pero una práctica recomendada de HTML moderno es colocarlos en la parte inferior del documento, antes de cerrar el <body> etiqueta, para retrasar su descarga. La página web cargará primero el Modelo de objetos de documento (DOM), se lo mostrará al usuario y luego solicitará los scripts, reduciendo el tiempo al primer byte (TTFB).

El navegador interpreta su documento HTML línea por línea de arriba a abajo. Entonces, cuando lee el encabezado y se encuentra con una etiqueta de secuencia de comandos, inicia una solicitud al servidor para obtener el archivo. No hay nada intrínsecamente malo en este proceso, pero si la página está cargando un archivo enorme, llevará mucho tiempo y afectará en gran medida la experiencia del usuario.

El elemento raíz

Debajo del elemento raíz está el <lang>, o idioma, atributo. 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 usa principalmente en Japón. Por lo tanto, el código de país no es necesario cuando se orienta al idioma japonés.

Qué hacer y qué no hacer en HTML

Una de las mejores prácticas de HTML más comunes es verificar el hacer y no hacer. Aquí hay algunos conocidos no hacer en codificación HTML:

Mantenlo simple

Como cualquier práctica de codificación, el principio de «mantenerlo simple» es muy aplicable a HTML y HTML5. Generalmente, HTML5 es compatible con versiones anteriores de HTML y XHTML. Por esa razón, recomendamos 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 desee escribir un documento XHTML. Del mismo modo, no necesita atributos XML, como:

<p lang="en" xml:lang="en">...</p> 

Código con SEO en mente

Los desarrolladores deben codificar teniendo en cuenta el SEO. Los contenidos web que no se encuentran tampoco se indexan. Por esa razón, aquí hay algunas de las mejores prácticas de SEO para considerar:

Agregar metadatos significativos

los <base> La etiqueta es una etiqueta útil, pero su uso indebido puede resultar en algunos comportamientos no intuitivos. Por lo tanto, si 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 predeterminado de algunos enlaces. Por ejemplo, vincular a una página web externa con solo el nombre y la extensión de la página:

href="https://kinsta.com/blog/html-best-practices/coding.org"

O el navegador lo interpretará como:

href="https://kinsta.com/blog/html-best-practices/http://www.kinsta.com/coding.org"

Esta interpretación se vuelve caótica, por lo que es más seguro usar siempre rutas absolutas para sus enlaces.

Por otro lado, escribir descripciones de metaetiquetas no es estrictamente parte de las mejores prácticas de HTML, pero sigue siendo igualmente importante. los <meta name="description"> El atributo es lo que los rastreadores de los motores de búsqueda hacen referencia cuando indexan su página, por lo que es vital para la salud de su SEO.

Establecer etiquetas de título adecuadas

los <title> hace que una página web sea compatible con los motores de búsqueda. Por un lado, el texto dentro del <title> aparece en las páginas de resultados del motor de búsqueda (SERP) de Google y en las pestañas y la barra del navegador web del usuario.

Tomemos, por ejemplo, cuando busque la palabra clave «HTML5». El título en este resultado de búsqueda indica el atributo de título específico y el autor. Esto es muy importante para el SEO y la generación de tráfico del sitio.

Las imágenes deben tener un atributo Alt

Usando un atributo alt significativo con <img> elementos es imprescindible para escribir código válido y semántico.

En la siguiente tabla, la columna de malas prácticas muestra una <img> elemento sin un atributo alt. Aunque el segundo ejemplo de la misma columna tiene un atributo alt, su valor no tiene sentido.

<img id="logo" src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" alt="Kinsta logo" />

<img id="logo" src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" />
<img id="logo" src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" alt="kinsta_logo.png" />

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 con las clasificaciones de SEO, la meta descripción sigue desempeñando un papel importante en el SEO en la página.

A continuación, se muestra 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 admitir casi todos los caracteres y símbolos de diferentes idiomas. Por otro lado, puede configurar cookies, agregar 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. los <a> etiqueta (o elemento de anclaje) emparejado con su href atributo, crea un hipervínculo a páginas web, direcciones de correo electrónico y archivos. Se utiliza para vincular ubicaciones dentro de la misma página o direcciones externas.

Consulte el ejemplo en la columna de malas prácticas: está ahí por ser redundante. Este tipo de práctica es evidente si un usuario usa 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 las personas con discapacidad visual o con problemas de aprendizaje. Como buena práctica, si solo está repitiendo el texto del ancla, entonces es mejor no usar un título en absoluto.

Prácticas recomendadas de HTML en el diseño

El desarrollo de sitios web no es simplemente una cuestión de crear un bloque de texto y encabezados, páginas de enlaces y listo. Existen algunas prácticas recomendadas en HTML que debe considerar para aprovechar al máximo su sitio web.

Establecer una estructura de documento adecuada

Los documentos HTML seguirán funcionando sin los elementos principales: <html>, <head>, y <body>. Sin embargo, es posible que las páginas no se muestren correctamente si faltan estos elementos. Con ese fin, es importante utilizar la estructura del documento adecuada de forma coherente.

Secciones relevantes del grupo

Para una agrupación temática de contenido, use el elemento de sección. Según la especificación W3C, un <section> debe contener un encabezado (H1, H2, etc.). Algunos desarrolladores omiten el uso del elemento de encabezado por completo, pero recomendamos incluirlo para llegar a aquellos que usan mejor los lectores de pantalla:

<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<li><img src="https://kinsta.com/blog/html-best-practices/img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>

<section>
<ul>
<li><img src="https://kinsta.com/blog/html-best-practices/img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>

Mejores prácticas de contenido integrado

los <embed> La etiqueta sirve como contenedor para un recurso externo. Esto incluye páginas web, imágenes, videos o complementos. Sin embargo, debe tener en cuenta que la mayoría de los navegadores ya no son compatibles con complementos y subprogramas 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, use el <img> etiqueta.
• Para HTML extraído de otro sitio, use el <iframe> etiqueta.
• Para videos o audios, use el <video> y <audio> etiquetas.

El atributo alt en el<img> El elemento proporciona una descripción de imagen útil para motores de búsqueda y lectores de pantalla. Puede resultar especialmente útil para los usuarios cuando las imágenes no se pueden procesar:

Deje el atributo alt vacío si hay texto complementario para explicar la imagen. Esto es para evitar la redundancia:

Dejar <iframe> elementos vacíos si existen algunas restricciones en su contenido. Un elemento iframe vacío siempre es seguro:

<iframe src="https://kinsta.com/default.html"></iframe>

<iframe src="https://kinsta.com/default.html">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</iframe>

Los desarrolladores deben proporcionar contenido de respaldo o enlaces de respaldo para cualquier <audio> o <video> elementos, al igual que con las imágenes. Se necesita contenido alternativo, especialmente para elementos recién introducidos en HTML:

<video>
<source src="https://kinsta.com/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</video>

<video>
<source src="https://kinsta.com/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...</video>

Reducir el número de elementos

Los documentos HTML se vuelven complicados, especialmente para páginas web con mucho contenido. Es mejor reducir el número de elementos de una página al mínimo que pueda administrar. Aprenda a usar los elementos de encabezado con prudencia y siga cómo <h1> para <h6> los elementos denotan la jerarquía de contenido de HTML. Esto hace que su contenido sea más significativo para sus lectores, software de lectura de pantalla y 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 desarrolladores de WordPress y creadores de contenido, use el <h1> elemento para el título de la publicación del blog en lugar del nombre del sitio. Esto ayuda en el rastreo de motores de búsqueda, y este enfoque es compatible con SEO.

Además, utilice el elemento HTML correcto para transmitir la información que contiene para lograr una estructura de contenido semántica y significativa. Por ejemplo, use <em> para enfatizar y <strong> para un énfasis pesado en lugar de sus predecesores <i> o <b>, que ahora están en desuso.

Ejemplo:

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Igual de importante, use <p> para los párrafos y evite usar <br /> para agregar una nueva línea entre párrafos. En su lugar, utilice las propiedades de margen y / o relleno de CSS para posicionar mejor su contenido. A veces, puede que se sienta tentado a utilizar el <blockquote> etiqueta con fines de sangría. Evite este escollo: utilícelo exclusivamente al citar texto.

Lo que se debe y no se debe hacer en el diseño

Una de las mejores prácticas de HTML es utilizar elementos semánticamente apropiados en el diseño de su página. Varios elementos le ayudarán a organizar su diseño en secciones.

Con la amplia variedad de temas en el diseño HTML, es mejor resaltar rápidamente lo que se debe y no se debe hacer en el diseño. Por ejemplo, HTML da más significado semántico a los elementos de encabezado y pie de página, así que no descuide el uso de la <header> etiqueta tal como se utiliza en cualquier sección o artículo determinado. Aparte de controlar el <title> y <meta> etiquetas y otros elementos estilísticos del documento, se usa en encabezados, fechas de publicación y otro contenido introductorio de su página o sección. Del mismo modo, puede eliminar la noción de que los pies de página pertenecen solo a la sección de derechos de autor; ahora, puede usarlo en casi todas partes.

Para el <nav> elemento, debe utilizarlo para la navegación en todo el sitio. No es necesario declarar un rol, ya que el uso ya está implícito en la etiqueta.

En cuanto a <main> elemento, ya forma parte de las últimas versiones de HTML5, que denotan el contenido principal del cuerpo del documento. Entonces, ya no es necesario usar <div> cuando tenemos una etiqueta más específica para nuestro contenido principal.

los <article> se utiliza para un bloque de contenido. Es independiente y tiene sentido sin la necesidad de dar más explicaciones, mientras que el <section> La etiqueta se utiliza para dividir una página en diferentes áreas temáticas o para seccionar un artículo individual. Desafortunadamente, muchos desarrolladores todavía usan los dos indistintamente.

Considere que el <section> es una etiqueta más genérica que la <article> etiqueta. Esto significa que el primero denota contenido relacionado con el tema en cuestión, pero no necesariamente autónomo. Este último, a la inversa, es una propiedad independiente.

Pero cuando no hay una etiqueta de marcado adecuada para sus propósitos, ¿qué debería usar? La respuesta es usar <div> cuando ningún otro elemento funciona o cuando se trata de un elemento específicamente estilístico. Para nuestros propósitos, usando <div> también es una mala práctica.

Volvamos al <section> etiqueta, que es una etiqueta de marcado semántico. No es estilístico y es importante enfatizarlo. En efecto, una buena práctica de codificación debería incluir una etiqueta de encabezado.

Ahora, lo que no se debe hacer con <section> De ello se deduce que no debería utilizarlo para etiquetar una envoltura, un contenedor o cualquier otro bloque puramente estilístico. A continuación se muestra un ejemplo de una mala práctica de codificación con el <section> etiqueta:

<section id="wrapper">
  <section class="container-fluid">
    <div id="main">
    </div>
  </section>
</section>

Este es un enfoque mejor, pero usa en exceso el <div> etiqueta:

<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 <figure> El elemento se usa principalmente 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 <figure> elemento. Algunos ejemplos incluyen ilustraciones, tablas o diagramas en un libro.

Una característica interesante de <figure> es que no contribuye al esquema del documento. Por lo tanto, puede usarlo para agrupar elementos con un tema común, por ejemplo, varias imágenes con un tema común. <figcaption>, o incluso un bloque de código.

Al agrupar elementos con <figure>, usar <figcaption>. los <figcaption> el título debe ir directamente después de la apertura <figure> etiqueta, o directamente antes del cierre </figure> etiqueta :

<figure>
  <img src="https://kinsta.com/blog/html-best-practices/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>

Prácticas recomendadas de HTML en secuencias de comandos

HTML es una de las tecnologías centrales en el desarrollo web. Tiene un poder y características asombrosos que lo hicieron popular entre los desarrolladores y propietarios de negocios. El desarrollo de frontend sigue innovando y, para mantenerse al día, los desarrolladores deben conocer las mejores prácticas en secuencias de comandos HTML.

Usar hojas de estilo externas

Los estilos en línea harán que su código esté desordenado e ilegible. Con ese fin, siempre utilice y vincule las hojas de estilo externas. Además, evite el uso de declaraciones de importación en sus archivos CSS, ya que producen una solicitud adicional al servidor.

Lo mismo ocurre con CSS y JavaScript en línea. Además de los problemas de legibilidad, esto hará que su documento sea más pesado y más difícil de mantener para que pueda evitar el código en línea.

Usar marcado en minúsculas

El uso de caracteres en minúscula en el código es una práctica estándar de la industria. Aunque el uso de mayúsculas u otros casos de texto seguirá representando su 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 fáciles de mantener y seguras. No solo eso, el desarrollo web se compone principalmente de un equipo. Hacer que su código sea legible hace que su trabajo y el de su equipo sean menos complicados.

<div id="test">
<img src="https://kinsta.com/blog/html-best-practices/images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>

<DIV>
<IMG SRC="https://kinsta.com/blog/html-best-practices/images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>

Qué hacer y qué no hacer en las secuencias de comandos

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:

• Escriba códigos bien sangrados y formateados de manera coherente: El código limpio y bien escrito promueve una mejor legibilidad en su sitio, lo cual es de gran ayuda para su desarrollador y otras personas que podrían trabajar con el sitio. También muestra una gran profesionalidad y atención al detalle, reflejándose bien en su actitud como desarrollador.
• Abstenerse de incluir comentarios excesivos: Los comentarios son esenciales y hacen que su código sea más fácil de entender. Sin embargo, la sintaxis HTML se explica por sí misma, por lo que no es necesario comentar a menos que tenga que aclarar la semántica y las convenciones de nomenclatura.

Validar y Minificar

Los códigos de validación y minimización se utilizan para identificar errores desde el principio. No espere hasta que termine su documento HTML; conviértase en un hábito de validar e identificar errores con frecuencia. Puede realizar la validación manualmente o utilizar cualquier herramienta de validación conocida como W3C Markup Validator.

Al mismo tiempo, practique la minificación eliminando todo lo que no sea esencial, como comentarios o espacios en blanco. Asegúrese de escribir códigos limpios y concisos para reducir el tamaño de su archivo HTML. Puede utilizar herramientas como HTML Minifier y otros.

Resumen

Muchos recursos de mejores prácticas de HTML5 para 2021 están disponibles en línea para ayudarlo. Sin embargo, recuerde la regla general de codificación: coherencia. Este artículo ha proporcionado información básica y le ha ayudado a poner en marcha ese viaje de desarrollo de frontend. Con esta guía, se convertirá en un experto en HTML5 semánticamente correcto en poco tiempo.

Cuando esté listo, mire más allá de lo que HTML puede ofrecer y explore algunos marcos HTML de código abierto también para crear 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.

¿Perdimos alguna de las mejores prácticas de HTML que utiliza en su propia codificación? ¡Infórmenos en la sección para comentarios!