HTML Guía de estilo
Un código HTML coherente, limpio y ordenado facilita que otros lean y comprendan su código.
Aquí se incluyen algunas pautas y consejos para crear un buen código HTML.
Declarar siempre el tipo de documento
Declare siempre el tipo de documento como la primera línea de su documento.
El tipo de documento correcto para HTML es:
<!DOCTYPE html>
Utilice nombres de elementos en minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los elementos.
Sin embargo, recomendamos utilizar nombres de elementos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas queda 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
Bien:
<body>
<p>This is a paragraph.</p>
</body>
Malo:
<BODY>
<P>This is a paragraph.</P>
</BODY>
Cerrar todos los elementos HTML
En HTML, no es necesario cerrar todos los elementos (por ejemplo, el elemento <p>).
Sin embargo, recomendamos encarecidamente cerrar todos los elementos HTML, como este:
Bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Malo:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Utilice nombres de atributos en minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en los nombres de atributos.
Sin embargo, recomendamos utilizar nombres de atributos en minúsculas porque:
- Mezclar nombres en mayúsculas y minúsculas queda 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
Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Malo:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Cita siempre valores de atributos
HTML permite valores de atributos 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
Bien:
<table class="striped">
Malo:
<table class=striped>
Muy malo:
Esto no funcionará porque el valor contiene espacios:
<table class=table striped>
Especifique siempre alt, ancho y alto para las imágenes
Especifique siempre el atributo alt para las imágenes. Este atributo es importante si la imagen por algún motivo no se puede mostrar.
Además, defina siempre el width y el height de las imágenes. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.
Bien:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Malo:
<img src="html5.gif">
Espacios y signos iguales
HTML permite espacios alrededor de los signos iguales. Pero sin espacio es más fácil de leer y agrupa mejor las entidades.
Bien:
<link rel="stylesheet" href="styles.css">
Malo:
<link rel = "stylesheet" href = "styles.css">
Evite líneas de código largas
Cuando se utiliza un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML.
Intenta evitar líneas de código demasiado largas.
Líneas en blanco y sangría
No agregue líneas en blanco, espacios ni sangrías sin un motivo.
Para facilitar la lectura, agregue líneas en blanco para separar bloques de código grandes o lógicos.
Para facilitar la lectura, agregue dos espacios de sangría. No utilice la tecla de tabulación.
Bien:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Malo:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Buen ejemplo de mesa:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Buen ejemplo de lista:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Nunca te saltes el elemento <title>
El elemento <title> es obligatorio en HTML.
¡El contenido del título de una página es crucial 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>:
- definir 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:
<title>Guía de estilo HTML y convenciones de codificación</title>
¿Omitir <html> y <body>?
Una página HTML se validará sin las etiquetas <html> y <body>:
Ejemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Inténtalo tú mismo »
Sin embargo, recomendamos encarecidamente agregar siempre las etiquetas <html> y <body>.
Omitir <body> puede producir errores en navegadores antiguos.
Omitir <html> y <body> también puede bloquear el software DOM y XML.
¿Omitiendo <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.
Ejemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inténtalo tú mismo »
Sin embargo, recomendamos utilizar la etiqueta <head>.
¿Cerrar elementos HTML vacíos?
En HTML, es opcional cerrar elementos vacíos.
Permitido:
<meta charset="utf-8">
También permitido:
<meta charset="utf-8" />
Si espera que el software XML/XHTML acceda a su página, mantenga la barra diagonal de cierre (/), porque es obligatoria en XML y XHTML.
Añade el atributo de idioma
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.
Ejemplo
<!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>
Inténtalo tú mismo »
Metadatos
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:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Configuración de la ventana gráfica
La ventana gráfica es el área visible para el 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 la 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.
A continuación se muestra un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
Consejo: Si estás navegando por esta página con un teléfono o una tableta, puedes hacer clic en los dos enlaces siguientes para ver la diferencia.
HTML Comentarios
Los comentarios breves deben escribirse en una línea, como esta:
<!-- Este es un comentario -->
Los comentarios que abarcan más de una línea deben escribirse así:
<!--
Este es un ejemplo de comentario largo. Este es un ejemplo de comentario largo.
Este es un ejemplo de comentario largo. Este es un ejemplo de comentario largo.
-->
Los comentarios largos son más fáciles de observar si tienen una sangría de dos espacios.
Usar hojas de estilo
Utilice una sintaxis simple para vincular a hojas de estilo (el atributo type no es necesario):
<link rel="stylesheet" href="styles.css">
Las reglas CSS cortas 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: 16em;
color: black;
}
- Coloque el corchete de apertura en la misma línea que el selector
- Utilice un espacio antes del corchete de apertura
- Utilice dos espacios de sangría
- Utilice punto y coma después de cada par propiedad-valor, incluido el último
- Utilice comillas alrededor de los valores únicamente si el valor contiene espacios
- Coloque el corchete de cierre en una nueva línea, sin espacios iniciales
Cargando JavaScript en HTML
Utilice una sintaxis simple para cargar scripts externos (el atributo type no es necesario):
<script src="myscript.js">
Accediendo a elementos HTML con JavaScript
El uso de código HTML "desordenado" puede provocar errores de JavaScript.
Estas dos declaraciones de JavaScript producirán resultados diferentes:
Ejemplo
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
Inténtalo tú mismo »
Visita la guía de estilo de JavaScript.
Utilice nombres de archivos en minúsculas
Algunos servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivos: no se puede acceder a "london.jpg" como "London.jpg".
Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: se puede acceder a "london.jpg" como "London.jpg".
Si utilizas una combinación de mayúsculas y minúsculas, debes tenerlo en cuenta.
Si pasas de un servidor que no distingue entre mayúsculas y minúsculas a otro que sí lo hace, ¡incluso los errores más pequeños dañarán tu web!
Para evitar estos problemas, utilice siempre nombres de archivos 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 .htm y .html?
¡No hay diferencia entre las extensiones de archivo .htm y .html!
Ambos serán tratados como HTML por cualquier navegador y servidor web.
Nombres de archivos predeterminados
Cuando una URL no especifica un nombre de archivo al final (como "https://www.w3schools.com/"), el servidor simplemente agrega un nombre de archivo predeterminado, como "index.html", "index.htm", "default.html" o "default.htm".
Si su servidor está configurado solo con "index.html" como nombre de archivo predeterminado, su 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; normalmente puedes configurar tantos nombres de archivos predeterminados como quieras.
