Santos Romero
HTML Style Guide

HTML Style Guide

La ruta del desarrollador web frontend autónomo🤹‍♂️

Santos Romero's photo
Santos Romero
·

9 min read

Table of contents

Un código HTML coherente, limpio y ordenado, facilita que otros lean y comprendan su código.

Aquí hay algunas pautas y consejos para crear un buen código HTML.

Siempre declare el tipo de documento

Siempre declare el tipo de documento en la primera línea del documento.

El tipo de documento correcto para HTML es:

<!DOCTYPE html>

Use nombres de elementos en minúsculas

HTML permite combinar letras mayúsculas y minúsculas en los nombres de los elementos.

Sin embargo, se recomienda usar nombres de elementos en minúscula, porque:

  • Combinar 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

  • Los nombres en minúsculas son más fáciles de escribir

Bueno:

<body>
    <p>Este es un párrafo.</p>
</body>

Malo:

<BODY>
    <P>Este es un párrafo.</P>
</BODY>

Cierre 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:

Bueno:

<section>
  <p5>Este es un parrafo.</p>
  <p>Este es un parrafo.</p>
</section>

Malo:

<section>
  <p>Este es un parrafo.
  <p>Este es un parrafo.
</section>

Use nombres de atributos 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:

  • Combinar 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

  • Los nombres en minúsculas son más fáciles de escribir

Bueno:

<a href="https://www.w3schools.com/html/">Visita nuestro tutorial de HTML</a>

Malo:

<a HREF="https://www.w3schools.com/html/">Visita nuestro tutorial de HTML</a>

Use comillas en valores de atributos

HTML permite valores de atributo sin comillas.

Sin embargo, recomendamos usar comillas en los valores de los atributos porque:

  • Los desarrolladores normalmente usan comillas en los valores de atributos

  • Los valores entre comillas son más fáciles de leer

  • DEBES usar comillas si el valor del atributo contiene espacios

Bueno:

<table class="striped">

Malo:

<table class=striped>

Muy malo:

Esto no funcionará, porque el valor contiene espacios:

<table class=table striped>

Siempre especifique los atributos alt, width y height para las imágenes

Siempre especifique el atributo alt. Este atributo es importante si por alguna razón la imagen no se puede mostrar.

Además, siempre defina el width y height de las imágenes. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.

Bueno:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Malo:

<img src="html5.gif">

Espacios y el signo igual

HTML permite espacios alrededor de los signos iguales. Pero sin espacio es más fácil de leer y agrupa mejor las entidades.

Bueno:

<link rel="stylesheet" href="styles.css">

Malo:

<link rel = "stylesheet" href = "styles.css">

Evite líneas de código largos

Al usar un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML.

Trate de evitar líneas de código demasiado largas.

Tip: En Visual Studio Code, puedes usar la opción word-wrap para ajustar el código.

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 tab.

Bueno:

<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 una tabla:

<table>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Juan</td>
    <td>Perez</td>
  </tr>
</table>

Buen ejemplo de una lista:

<ul>
  <li>Lima</li>
  <li>Santiago</li>
  <li>Buenos Aires</li>
</ul>

Nunca omita el elemento title

El elemento <title> es requerido 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 de la página cuando se agrega a favoritos

  • Muestra un título de la página en los resultados del motor de búsqueda

Por lo tanto, intente que el título sea lo más preciso y significativo posible:

Ejemplo:

<title>Un Titulo Significativo para la Pagina</title>

¿Puedo omitir html y body?

Una página HTML será válida si omites las etiquetas <html> y <body>:

Ejemplo:

<!DOCTYPE html>
<head>
  <title>Titulo Pagina</title>
</head>

<h1>Este es un encabezado</h1>
<p>Este es un parrafo.</p>

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.

¿Puedo omitir head?

La etiqueta <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>Titulo Pagina</title>
<body>

<h1>Este es un encabezado</h1>
<p>Este es un parrafo.</p>

</body>
</html>

Sin embargo, recomendamos usar la etiqueta <head>.

¿Cerrar los elementos vacíos?

En HTML, es opcional cerrar los elementos vacíos.

Permitido:

<meta charset="utf-8">

Permitido también:

<meta charset="utf-8" />

Si esperas que XML/XHTML acceda al documento, entonces, manten la barra inclinada de cierre (/), ya que se requiere en XML y XHTML.

Agrega 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.

Ejemplo:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Titulo Pagina</title>
</head>
<body>

<h1>Este es un encabezado</h1>
<p>Este es un parrafo.</p>

</body>
</html>

Meta datos

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>Titulo Pagina</title>
</head>

Configura el viewport

El viewport 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 instrucciones al navegador 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 varía 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 HTML

Los comentarios cortos deben escribirse en una sola línea, como esto:

<!-- 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 identados con dos espacios.

Use hojas de estilos

Use 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: 16em;
  color: black;
}

  • Coloque la llave de apertura{ en la misma línea que el selector

  • Use un espacio antes de la llave de apertura

  • Use dos espacios de sangría/indentación

  • Use punto y coma después de cada property:value, incluido el último

  • Solo use comillas alrededor de los valores, si el valor contiene espacios "PT Sans"

  • Coloque la llave de cierre{ en una nueva línea, sin espacios iniciales

Cargando JavaScript en HTML

Use una sintáxis simple para cargar archivos JavaScript externos (el atributo type no es necesario)

<script src="myscript.js">

Acceso a elementos HTML con JavaScript

El uso "desordenado" de código HTML puede generar errores de JavaScript.

Estas dos declaraciones de JavaScript producirán resultados diferentes:

getElementById("Demo").innerHTML = "Hola";

getElementById("demo").innerHTML = "Hola";

Use nombres de archivo en minúscula

Algunos servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivo: "london.jpg" no se puede acceder 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" sin ningún problema.

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 sí distingue entre mayúsculas y minúsculas, incluso los errores más pequeños pueden romper tu web.

Para evitar estos problemas, siempre utilice nombres de archivo en minúsculas.

Extensiones de archivo

Los archivos HTML deben tener una extensión .html(.htm está permitido)

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 web y servidor web.

Nombres de archivo predeterminados

Cuando una URL no especifica un nombre de archivo al final (como "w3schools.com"), el servidor simplemente agregará 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; por lo general, puedes configurar tantos nombres de archivo predeterminados como desees.

Resumen

Adoptar buenas prácticas al momento de escribir código HTML, nos permitirá tener un código coherente, limpio y ordenado, y facilitará que otros lean y comprendan nuestro código.

Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!

#w3schools-html-spanish#w3schools-html#html-style-guide