Un código HTML coherente, limpio y ordenado facilita que otros lean y comprendan tu código. Aquí hay algunas pautas y consejos para crear un buen código HTML.
Siempre declarar el tipo de documento
El tipo de documento correcto para HTML es el siguiente:
<!DOCTYPE html>
Usa elementos en minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los elementos.
Sin embargo, recomendamos usar nombres de elementos en minúsculas, porque:
- Mezclar nombres en mayúsculas y minúsculas se ve mal
- Los desarrolladores normalmente usan nombres en minúsculas
- Las minúsculas se ven más limpias
- Minúsculas son más fáciles de escribir
Cierra todos los elementos HTML
En HTML, no tienes que cerrar todos los elementos (por ejemplo, el elemento <p>). Sin embargo, recomendamos encarecidamente cerrar todos los elementos HTML.
Usar nombres de atributo en minúscula
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los atributos. Sin embargo, recomendamos usar nombres de atributos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas se ve mal
- Los desarrolladores normalmente usan nombres en minúsculas
- Las minúsculas se ven más limpias
- Las minúsculas son más fáciles de escribir.
Valores de atributo entre comillas
HTML permite valores de atributo sin comillas. Sin embargo, recomendamos citar los valores de los atributos porque:
- Los desarrolladores normalmente citan valores de atributos
- Los valores citados son más fáciles de leer
- DEBES usar comillas si el valor contiene espacios
Siempre especificar alt, width y height para las imágenes
Especifica siempre el atributo alt para las imágenes. Este atributo es importante si la imagen por alguna razón no se puede mostrar. Además, define siempre el ancho y el alto de las imágenes. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Espacios y signos de igual
HTML permite espacios alrededor de signos iguales. Pero sin espacio es más fácil de leer y agrupa mejor las entidades.
Evita líneas de código largas
Al usar un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML. Trata de evitar líneas de código demasiado largas.
Líneas en blanco y sangría
No agregues líneas en blanco, espacios o sangrías sin una razón. Para facilitar la lectura, agrega líneas en blanco para separar bloques de código grandes o lógicos. Para facilitar la lectura, agrega dos espacios de sangría. No utilices la tecla de tabulación.
Nunca omitas el elemento <title>
El elemento <title> es obligatorio en HTML.
¡El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden al enumerar las páginas en los resultados de búsqueda.
El elemento <title>:
- define un título en la barra de herramientas del navegador
- proporciona un título para la página cuando se agrega a favoritos
- muestra un título para la página en los resultados del motor de búsqueda
- Por lo tanto, intenta que el título sea lo más preciso y significativo posible:
Omitir <html> y <body>?
Una página HTML se validará sin las etiquetas <html> y <body>. Sin embargo, recomendamos enfáticamente agregar siempre las etiquetas <html> y <body>. Omitir <body> puede producir errores en navegadores más antiguos. Omitir <html> y <body> también puede bloquear el software DOM y XML.
Omitir <head>?
La etiqueta HTML <head> también se puede omitir. Los navegadores agregarán todos los elementos antes de <body>, a un elemento <head> predeterminado. No obstante SIEMPRE recomendamos utilizar la etiqueta <head>.
Cerrar elementos vacíos?
En HTML es opcional cerrar elementos vacíos.
<meta charset="utf-8">
También
<meta charset="utf-8" />
Si esperas que el software XML/XHTML acceda a tu página, mantén la barra inclinada de cierre (/), ya que se requiere en XML y XHTML.
Añadir el atributo lang
Siempre debes incluir el atributo lang dentro de la etiqueta <html>, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
Ejm
<!DOCTYPE html> <html lang="en-us"> <head> <title>Page Title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Datos meta
Para garantizar una interpretación adecuada y una indexación correcta en los motores de búsqueda, tanto el idioma como la codificación de caracteres <meta charset=»charset»> deben definirse lo antes posible en un documento HTML:
Ejm
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head>
Configuración de la ventana gráfica (viewport)
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora.
Debes incluir el siguiente elemento <meta> en todas tus páginas web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página. La parte width=device-width establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo). La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Comentarios en HTML
Comentarios cortos deben ser escritos en una sóla línea.
<!-- This is a comment -->
Los comentarios que ocupan más de una línea deben escribirse así:
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
Los comentarios largos son más fáciles de observar si están sangrados con dos espacios.
Usando hojas de estilo
Usa una sintaxis simple para vincular hojas de estilo (el atributo type no es necesario):
<link rel="stylesheet" href="styles.css">
Las reglas cortas de CSS se pueden escribir comprimidas, así:
p.intro {font-family:Verdana;font-size:16em;}Las reglas CSS largas deben escribirse en varias líneas:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size<script src="myscript.js">16em;
color: black;
}- Coloca el soporte de apertura en la misma línea que el selector
- Usa un espacio antes del corchete de apertura
- Usa dos espacios de sangría
- Usa punto y coma después de cada par propiedad-valor, incluido el último
- Solo usa comillas alrededor de los valores si el valor contiene espacios
- Coloca el corchete de cierre en una nueva línea, sin espacios iniciales
Cargando Javascript en HTML
Usa una sintaxis simple para cargar scripts externos (el atributo type no es necesario).
<script src="myscript.js">
Acceso a elementos HTML con JavaScript
El uso de código HTML «desordenado» puede generar errores de JavaScript.
Usar nombres de archivo en minúsculas
Algunos servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivo: «londres.jpg» no se puede acceder como «Londres.jpg».
Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: se puede acceder a «london.jpg» como «London.jpg».
Si usas una combinación de mayúsculas y minúsculas, debes tener esto en cuenta. Si pasas de un servidor que no distingue entre mayúsculas y minúsculas a uno que distingue entre mayúsculas y minúsculas, ¡incluso los errores más pequeños romperán tu web!. Para evitar estos problemas, ¡utiliza siempre nombres de archivo en minúsculas!.
Extensiones de archivo
- Los archivos HTML deben tener una extensión .html (se permite .htm).
- Los archivos CSS deben tener una extensión .css.
- Los archivos JavaScript deben tener una extensión .js.
Diferencias entre .html y .htm
¡No hay diferencia entre las extensiones de archivo .htm y .html!. Ambos serán tratados como HTML por cualquier navegador web y servidor web.
Nombres de archivo por defecto
Cuando una URL no especifica un nombre de archivo al final (como «https://sutilweb.com/»), el servidor simplemente agrega un nombre de archivo predeterminado, como «index.html», «index.htm», » predeterminado.html» o «predeterminado.htm».
Si tu servidor está configurado solo con «index.html» como nombre de archivo predeterminado, tu archivo debe llamarse «index.html» y no «default.html».
Sin embargo, los servidores se pueden configurar con más de un nombre de archivo predeterminado, por lo general, puedes configurar tantos nombres de archivo predeterminados como desee.