{"id":43315,"date":"2021-09-02T07:34:26","date_gmt":"2021-09-02T05:34:26","guid":{"rendered":"https:\/\/kinsta.com\/?p=99189"},"modified":"2023-11-21T14:17:41","modified_gmt":"2023-11-21T13:17:41","slug":"mejores-practicas-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-html\/","title":{"rendered":"Las Mejores Pr\u00e1cticas de HTML para Construir Sitios Web Sostenibles y Escalables"},"content":{"rendered":"

Las mejores pr\u00e1cticas de HTML ayudan a los desarrolladores a ofrecer sitios y aplicaciones web innovadores y altamente interactivos. Estas pr\u00e1cticas recomendadas ayudan a desarrollar las aplicaciones m\u00e1s ricas en funciones y centradas en el negocio. Adem\u00e1s, las organizaciones pueden aprovechar estas pr\u00e1cticas recomendadas para ofrecer una experiencia de usuario perfecta.<\/p>\n

Hoy en d\u00eda, cuando hablamos de HTML<\/a>, solemos hablar de HTML5 (y no de sus predecesores inmediatos)<\/a>. HTML5 es un potente lenguaje de marcas que permite a los desarrolladores web crear un documento web. Es f\u00e1cil de usar y entender, y casi todos los navegadores lo soportan. Adem\u00e1s, es la base de casi todos los sistemas de gesti\u00f3n de contenidos (CMS)<\/p>\n

Como desarrollador web con un m\u00ednimo de experiencia, a menudo surgen preguntas como \u00ab\u00bfC\u00f3mo puedo escribir mejor HTML?\u00bb. Este art\u00edculo pretende ayudarte a empezar con buen pie.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

El enfoque general de la codificaci\u00f3n HTML<\/h2>\n

Es probable que ya conozcas este lenguaje de marcas, pero aqu\u00ed tienes algunas buenas pr\u00e1cticas de HTML5 que te permitir\u00e1n codificar mejor.<\/p>\n

Declara siempre un Doctype<\/h3>\n

Al crear un documento HTML, la declaraci\u00f3n DOCTYPE<\/code> es necesaria para informar al navegador<\/a> de los est\u00e1ndares que se est\u00e1n utilizando. Su objetivo es que el marcado se muestre correctamente.<\/p>\n

Por ejemplo:<\/p>\n

\n\n\n\n\n\n\n\n
Versi\u00f3n<\/th>\nDeclaraci\u00f3n del tipo de documento<\/th>\n<\/tr>\n<\/thead>\n
HTML 4.01<\/td>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/td>\n<\/tr>\n
XHTML 1.1<\/td>\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\"><\/code><\/td>\n<\/tr>\n
HTML5<\/td>\n<!DOCTYPE html><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

La declaraci\u00f3n <DOCTYPE><\/code> debe estar en la primera l\u00ednea de tu documento HTML. He aqu\u00ed una comparaci\u00f3n entre su implementaci\u00f3n correcta y la incorrecta:<\/p>\n

\n\n\n\n\n\n
Buena pr\u00e1ctica<\/th>\nMala pr\u00e1ctica<\/th>\n<\/tr>\n<\/thead>\n
\n
<!DOCTYPE html>\n<html>...<\/html><\/code><\/pre>\n<\/td>\n
\n
<html>...<\/html><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Tambi\u00e9n puedes utilizar el doctype correspondiente a la versi\u00f3n de HTML\/XHTML que quieras utilizar. Conozce la lista recomendada de declaraciones de doctype<\/a> para ayudarte a elegir la correcta.<\/p>\n
Colocaci\u00f3n de etiquetas HTML<\/h3>\n
Los desarrolladores saben que el prop\u00f3sito 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\u00f3n correcta de las etiquetas, los elementos que requieren etiquetas de cierre o cu\u00e1ndo omitirlas.<\/p>\n
Por ejemplo, \u00bfcu\u00e1l es el mejor lugar para colocar las etiquetas <script><\/code>?<\/p>\n
Las etiquetas de script suelen colocarse dentro del elemento <head><\/code>. Pero una buena pr\u00e1ctica moderna de HTML es colocarlos en la parte inferior del documento, antes de cerrar la etiqueta <body><\/code>, para retrasar su descarga<\/a>. La p\u00e1gina web cargar\u00e1 primero el Modelo de Objetos del Documento (DOM – Document Object Model), lo mostrar\u00e1 al usuario y solicitar\u00e1 los scripts despu\u00e9s, reduciendo el tiempo hasta el primer byte (TTFB – Time to first byte)<\/a>.<\/p>\n
El navegador interpreta el documento HTML l\u00ednea por l\u00ednea de arriba a abajo. As\u00ed, cuando lee el encabezado y se encuentra con una etiqueta de script, inicia una petici\u00f3n al servidor para obtener el archivo. No hay nada inherentemente malo en este proceso, pero si la p\u00e1gina est\u00e1 cargando un archivo enorme, tardar\u00e1 mucho tiempo y afectar\u00e1 mucho a la experiencia del usuario.<\/p>\n
El elemento ra\u00edz<\/h3>\n
Bajo el elemento ra\u00edz se encuentra el atributo <lang><\/code> , o idioma. Este atributo ayuda a traducir un documento HTML al idioma adecuado. La mejor pr\u00e1ctica es mantener el valor de este atributo lo m\u00e1s corto posible.<\/p>\n
Por ejemplo, el idioma japon\u00e9s se utiliza principalmente en Jap\u00f3n. Por lo tanto, el c\u00f3digo de pa\u00eds no es necesario cuando se dirige al idioma japon\u00e9s<\/a>.<\/p>\n
\n\n\n\n\n\n
Buena pr\u00e1ctica<\/th>\nMala pr\u00e1ctica<\/th>\n<\/tr>\n<\/thead>\n
<html lang=\"ja\"><\/code><\/td>\n<html lang=\"ja-JP\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Qu\u00e9 hacer y qu\u00e9 no hacer en HTML<\/h3>\n
Una de las mejores pr\u00e1cticas de HTML m\u00e1s comunes es comprobar lo que se debe y lo que no se debe hacer. A continuaci\u00f3n, se presentan algunos de los \u00abno hacer\u00bb conocidos en la codificaci\u00f3n de HTML:<\/p>\n
\n\n\n\n\n\n\n\n\n
Descripci\u00f3n<\/th>\nBuenas pr\u00e1cticas<\/th>\nMalas pr\u00e1cticas<\/th>\n<\/tr>\n<\/thead>\n
En el texto, utiliza el equivalente en c\u00f3digo HTML de los caracteres Unicode en lugar del propio car\u00e1cter.<\/td>\n<p>Copyright \u00a9 2021 W3C<sup>\u00ae<\/sup><\/p><\/code><\/td>\n<p>Copyright © 2021 W3C<sup>®<\/sup><\/p><\/code><\/td>\n<\/tr>\n
Elimina los espacios en blanco alrededor de las etiquetas y los valores de los atributos.<\/td>\n<h1 class=\"title\">HTML5 Best Practices<\/h1><\/code><\/td>\n<h1 class=\" title \" > HTML5 Best Practices <\/h1><\/code><\/td>\n<\/tr>\n
Practica la coherencia y evita mezclar casos de caracteres.<\/td>\n<a href=\"#status\">Status<\/a><\/code><\/td>\n<a HREF=\"#status\">Status<\/a><\/code><\/td>\n<\/tr>\n
No separes los atributos con dos o m\u00e1s espacios en blanco.<\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Mant\u00e9n la sencillez<\/h3>\n
Como cualquier pr\u00e1ctica de codificaci\u00f3n, el principio de \u00abmantener la sencillez\u00bb 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<\/a>.<\/p>\n
Por ejemplo:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<!DOCTYPE html>\n<\/code><\/pre>\n
No es necesario declarar el c\u00f3digo como tal, a menos que quieras escribir un documento XHTML. Del mismo modo, no necesita atributos XML, como:<\/p>\n
<p lang=\"en\" xml:lang=\"en\">...<\/p> <\/code><\/pre>\n
Codificar pensando en el SEO<\/h2>\n
Los desarrolladores deben codificar pensando en el SEO<\/a>. Los contenidos web que no se encuentran tampoco se indexan. Por esa raz\u00f3n, aqu\u00ed tienes algunas de las mejores pr\u00e1cticas de SEO a tener en cuenta:<\/p>\n
A\u00f1ade metadatos relevantes<\/h3>\n
La etiqueta <base><\/code> es una etiqueta \u00fatil, pero su uso incorrecto puede dar lugar a algunos comportamientos no intuitivos. As\u00ed, si se declara una etiqueta base, todos los enlaces del documento ser\u00e1n relativos a menos que se especifique expl\u00edcitamente:<\/p>\n
<base href=\"http:\/\/www.kinsta.com\/\" \/><\/code><\/pre>\n
Esta sintaxis cambia el comportamiento por defecto de algunos enlaces. Por ejemplo, enlazar a una p\u00e1gina web externa con solo el nombre de la p\u00e1gina y la extensi\u00f3n:<\/p>\n
href=\"coding.org\"<\/code><\/pre>\n
O el navegador lo interpretar\u00e1 como:<\/p>\n
href=\"http:\/\/www.kinsta.com\/coding.org<\/a>\"<\/code><\/pre>\n
Esta interpretaci\u00f3n se vuelve ca\u00f3tica, por lo que es m\u00e1s seguro utilizar siempre rutas absolutas para tus enlaces.<\/p>\n
Por otro lado, escribir descripciones de metatags no es estrictamente una parte de las mejores pr\u00e1cticas de HTML, pero sigue siendo igualmente importante. El atributo <meta name=\"description\"><\/code> es lo que los rastreadores de los motores de b\u00fasqueda consultan cuando indexan tu p\u00e1gina, por lo que es vital para la salud de tu SEO<\/a>.<\/p>\n
Establecer etiquetas de t\u00edtulo adecuadas<\/h3>\n
La etiqueta <title><\/code> hace que una p\u00e1gina web sea f\u00e1cil de buscar en los motores de b\u00fasqueda. Por un lado, el texto dentro de la etiqueta <title><\/code> aparece en las p\u00e1ginas de resultados del motor de b\u00fasqueda (SERP) de Google y en la barra del navegador y las pesta\u00f1as del usuario.<\/p>\n
Por ejemplo, cuando se busca la palabra clave \u00abHTML5\u00bb. El t\u00edtulo de este resultado de b\u00fasqueda indica el atributo espec\u00edfico del t\u00edtulo y el autor. Esto es muy importante en el SEO y la generaci\u00f3n de tr\u00e1fico del sitio<\/a>.<\/p>\n
Las im\u00e1genes deben tener un atributo Alt<\/h3>\n
Utilizar un atributo alt significativo<\/a> con los elementos <img><\/code> es imprescindible para escribir un c\u00f3digo v\u00e1lido y sem\u00e1ntico.<\/p>\n
En la tabla siguiente, la columna de mala pr\u00e1ctica muestra un elemento <img><\/code> sin atributo alt. Aunque el segundo ejemplo de la misma columna tiene un atributo alt, su valor no tiene sentido.<\/p>\n
\n\n\n\n\n\n
Buena pr\u00e1ctica<\/th>\nMala pr\u00e1ctica<\/th>\n<\/tr>\n<\/thead>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"Kinsta logo\" \/><\/code><\/pre>\n<\/td>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" \/>\n<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"kinsta_logo.png\" \/><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Meta atributos descriptivos<\/h3>\n
La meta descripci\u00f3n<\/a> es un elemento HTML que describe y resume el contenido de una p\u00e1gina web. Su prop\u00f3sito es que los usuarios encuentren el contexto de la p\u00e1gina. Aunque los metadatos ya no ayudan a la clasificaci\u00f3n SEO, la meta descripci\u00f3n sigue desempe\u00f1ando un papel importante en el SEO on-page.<\/p>\n
Aqu\u00ed hay un c\u00f3digo de muestra que incluye las palabras clave, la descripci\u00f3n, el nombre del autor y el conjunto de caracteres. El juego de caracteres se utiliza para soportar casi todos los caracteres y s\u00edmbolos de diferentes idiomas. Por otro lado, se pueden establecer cookies, a\u00f1adir una fecha de revisi\u00f3n y permitir que la p\u00e1gina se actualice.<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>HTML Best Practices in Website Design<\/title>\n    <meta name = \"keywords\" content = \"HTML, Website Design, HTML Best Practices\" \/>\n    <meta name = \"description\" content = \"Learn about HTML best practices.\" \/>\n    <meta name = \"author\" content = \"John Doe\" \/>\n    <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = UTF-8\" \/>\n  <\/head>\n  <body>\n    <p>Let's learn how to code HTML5!<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
Atributo de t\u00edtulo con enlaces<\/h3>\n
En los elementos de anclaje, la mejor pr\u00e1ctica es utilizar atributos de t\u00edtulo para mejorar la accesibilidad. El atributo de t\u00edtulo aumenta el significado de la etiqueta de anclaje. La etiqueta <a><\/code> (o elemento de anclaje) emparejada con su atributo href<\/code>, crea un hiperv\u00ednculo<\/a> a p\u00e1ginas web, direcciones de correo electr\u00f3nico y archivos. Se utiliza para enlazar lugares dentro de la misma p\u00e1gina o direcciones externas.<\/p>\n
Comprueba el ejemplo en la columna de mala pr\u00e1ctica: est\u00e1 ah\u00ed por ser redundante. Este tipo de pr\u00e1ctica 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\u00eda de asistencia que se proporciona a los discapacitados visuales o a los que tienen una discapacidad de aprendizaje. Como buena pr\u00e1ctica, si s\u00f3lo se repite el texto del ancla, es mejor no utilizar ning\u00fan t\u00edtulo.<\/p>\n
\n\n\n\n\n\n
Buena pr\u00e1ctica<\/th>\nMala pr\u00e1ctica<\/th>\n<\/tr>\n<\/thead>\n
<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Learn about our products.\">Click here<\/a><\/code><\/td>\n<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Click Here\">Click here<\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Las Mejores Pr\u00e1cticas HTML para Dise\u00f1os<\/h2>\n
El desarrollo de un sitio web no es simplemente una cuesti\u00f3n de crear un bloque de texto y encabezados, enlazar p\u00e1ginas<\/a> y ya est\u00e1. Hay que tener en cuenta algunas de las mejores pr\u00e1cticas en HTML para sacar el m\u00e1ximo partido a tu sitio web.<\/p>\n
Establece una estructura documental adecuada<\/h3>\n
Los documentos HTML seguir\u00e1n funcionando sin los elementos primarios: <html><\/code> , <head><\/code> y <body><\/code>. Sin embargo, es posible que las p\u00e1ginas no se muestren correctamente si faltan estos elementos. Para ello, es importante utilizar la estructura adecuada del documento de forma consistente.<\/p>\n
Agrupar las secciones relevantes<\/h3>\n
Para una agrupaci\u00f3n tem\u00e1tica de contenidos<\/a>, utiliza el elemento section. Seg\u00fan la especificaci\u00f3n del W3C, una <section><\/code> 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:<\/p>\n
\n\n\n\n\n\n
Buena pr\u00e1ctica<\/th>\nMala pr\u00e1ctica<\/th>\n<\/tr>\n<\/thead>\n
\n
<section>\n<h1>HTML Best Practices 2021<\/h1>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"description\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"description\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n
\n
<section>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"description\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"description\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Mejores pr\u00e1cticas de contenido integrado<\/h3>\n
La etiqueta <embed><\/code> sirve como contenedor de un recurso externo. Esto incluye p\u00e1ginas web, im\u00e1genes, v\u00eddeos<\/a> o plug-ins. Sin embargo, hay que tener en cuenta que la mayor\u00eda de los navegadores ya no soportan los Applets y plug-ins de Java. Adem\u00e1s, los controles ActiveX ya no son compatibles con ning\u00fan navegador, y la compatibilidad con Shockwave Flash tambi\u00e9n se ha desactivado en los navegadores modernos.<\/p>\n
Recomendamos lo siguiente:<\/p>\n