Professional Documents
Culture Documents
Mejores Practicas HTML
Mejores Practicas HTML
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.
Por ejemplo:
Versión Declaración del tipo de documento
HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
1.1 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 <!DOCTYPE html>
<!DOCTYPE html>
<html>...</html>
<html>...</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.
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 <p>Copyright © 2021 <p>Copyright © 2021
los caracteres W3C<sup>®</sup></p> W3C<sup>®</sup></p>
Unicode en lugar
del propio carácter.
Elimina los
espacios en blanco
alrededor de las <h1 class="title">HTML5 <h1 class=" title " >
etiquetas y los Best Practices</h1> HTML5 Best Practices </h1>
valores de los
atributos.
Practica la
coherencia y evita <a <a
mezclar casos de href="#status">Status</a> HREF="#status">Status</a>
caracteres.
No separes los
atributos con dos o <input type="text" <input type="text"
más espacios en name="LastName"> name="LastName">
blanco.
Mantén la sencillez
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:
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:
href="coding.org"
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.
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.
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
<
<img id="logo" src="images/kinsta_logo.png" alt="Kinsta logo" />
<
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 Pra
<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-
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>
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.
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.
Buena práctica
<section>
<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<ul>
<li><img src="img1
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2
<li><img src="img2.jpg" alt="description"></li>
</ul>
</ul>
</section>
</section>
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:
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:
Deja el atributo alt vacío si hay un texto complementario para explicar la imagen. Esto es
para evitar la redundancia:
<iframe src="/default.html">
<iframe src="/default.html"></iframe> <p>Lorem ipsum dolor sit ame
</iframe>
Buena práctica
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="//www.youtu
</video>
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:
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.
Lo que hay que hacer y lo que no hay que hacer en el trazado
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.
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.
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.
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>
<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.
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.
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.
Lo que hay que hacer y lo que no hay que hacer en los scripts
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.
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.