Convenciones de código HTML(5)

Convenciones de código HTML

Muchos desarrolladores web saben muy poco sobre las convenciones de código HTML.

Entre 2000 y 2010, muchos desarrolladores web migraron de HTML a XHTML.

Al usar XHTML, los desarrolladores adquirieron gradualmente mejores hábitos de escritura de HTML.

Para HTML5, deberíamos adoptar buenas convenciones de código; a continuación se ofrecen algunas sugerencias.

Usar el tipo de documento correcto

La declaración del tipo de documento se encuentra en la primera línea del documento HTML:

<!DOCTYPE html>

Si quieres usar minúsculas como con otras etiquetas, puedes usar el siguiente código:

<!doctype html>

Usar nombres de elementos en minúsculas

Los nombres de los elementos HTML5 pueden usar letras mayúsculas y minúsculas.

Se recomienda usar letras minúsculas:

  • El estilo que mezcla mayúsculas y minúsculas es muy malo.
  • Los desarrolladores suelen usar minúsculas (similar a XHTML).
  • El estilo en minúsculas se ve más limpio.
  • Las letras minúsculas son fáciles de escribir.

No recomendado:

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

Muy mal:

<Section>
  <p>Este es un párrafo.</p>
</SECTION>

Recomendado:

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

Cerrar todos los elementos HTML

En HTML5, no es obligatorio cerrar todos los elementos (por ejemplo, el elemento <p>), pero recomendamos añadir una etiqueta de cierre a cada elemento.

No recomendado:

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

Recomendado:

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

Cerrar elementos HTML vacíos

En HTML5, los elementos HTML vacíos tampoco es obligatorio cerrarlos:

Podemos escribirlo así:

<meta charset="utf-8">

También podemos escribirlo así:

<meta charset="utf-8" />

En XHTML y XML, la barra (/) es obligatoria.

Si esperas que el software XML use tu página, es muy bueno usar este estilo.

Usar nombres de atributos en minúsculas

Los nombres de atributos HTML5 permiten letras mayúsculas y minúsculas.

Recomendamos usar nombres de atributos en minúsculas:

  • Usar mayúsculas y minúsculas a la vez es un mal hábito.
  • Los desarrolladores suelen usar minúsculas (similar a XHTML).
  • El estilo en minúsculas se ve más limpio.
  • Las letras minúsculas son fáciles de escribir.

No recomendado:

<div CLASS="menu">

Recomendado:

<div class="menu">

Valores de atributos

Los valores de atributos HTML5 pueden no llevar comillas.

Recomendamos usar comillas para los valores de atributos:

  • Si el valor del atributo contiene espacios, se necesitan comillas.
  • No se recomienda mezclar estilos; se sugiere unificar el estilo.
  • Usar comillas en los valores de atributos facilita la lectura.

El siguiente ejemplo tiene un valor de atributo con espacios y sin comillas, por lo que no funciona:

<table class=table striped>

El siguiente usa comillas dobles, es correcto:

<table class="table striped">

Atributos de imágenes

Las imágenes suelen usaraltel atributo. Cuando la imagen no se puede mostrar, este se muestra en su lugar.

<img src="html5.gif" alt="HTML5">

Definir el tamaño de la imagen permite reservar el espacio especificado durante la carga y reducir el parpadeo.

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

Espacios y signo igual

Se pueden usar espacios antes y después del signo igual.

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

Pero recomendamos usar menos espacios:

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

Evitar líneas de código demasiado largas

Con un editor HTML, desplazarse horizontalmente por el código es incómodo.

Cada línea de código debe tener menos de 80 caracteres en lo posible.

Líneas en blanco y sangría

No añadas líneas en blanco sin motivo.

Añade líneas en blanco a cada bloque funcional lógico para que sea más fácil de leer.

Usa dos espacios para la sangría; no se recomienda usar TAB.

Entre fragmentos de código cortos no uses líneas en blanco o sangrías innecesarias.

Líneas en blanco y sangrías innecesarias:

<body>

  <h1>Ejemplo</h1>

  <h2>HTML</h2>

  <p>
Ejemplo: no solo se aprende tecnología, sino también sueños.
Ejemplo: no solo se aprende tecnología, sino también sueños.
Ejemplo: no solo se aprende tecnología, sino también sueños,
Ejemplo: no solo se aprende tecnología, sino también sueños.
  </p>

</body>

Recomendado:

<body>

<h1>Ejemplo</h1>

<h2></h2>
<p>Ejemplo: no solo se aprende tecnología, sino también sueños.
Ejemplo: no solo se aprende tecnología, sino también sueños.
Ejemplo: no solo se aprende tecnología, sino también sueños.
Ejemplo: no solo se aprende tecnología, sino también sueños.</p>

</body>

Ejemplo de tabla:

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

Ejemplo de lista:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

¿Omitir <html> y <body>?

En HTML5 estándar, las etiquetas <html> y <body> se pueden omitir.

El siguiente documento HTML5 es correcto:

Ejemplo:

<!DOCTYPE html>
<head>
  <title>Título de la página</title>
</head>

<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>

Pruébalo »

No se recomienda omitir las etiquetas <html> y <body>.

El elemento <html> es el elemento raíz del documento y se utiliza para describir el idioma de la página:

<!DOCTYPE html>
<html lang="zh">

Declarar el idioma facilita el trabajo de los lectores de pantalla y los motores de búsqueda.

Omitir <html> o <body> provocará fallos en el software DOM y XML.

Omitir <body> provocará errores en navegadores antiguos (IE9).

¿Omitir <head>?

En HTML5 estándar, la etiqueta <head> se puede omitir.

Por defecto, el navegador añadirá el contenido anterior a <body> a un elemento <head> predeterminado.

Ejemplo

<!DOCTYPE html>
<html>
<title>Título de la página</title>

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

</html>

Pruébalo »
Note No se recomienda omitir la etiqueta head por ahora.

Metadatos

En HTML5, el elemento <title> es obligatorio; el título describe el tema de la página:

<title>Ejemplo</title>

El título y el idioma permiten que los motores de búsqueda comprendan rápidamente el tema de tu página:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo</title>
</head>

Comentarios HTML

Los comentarios se pueden escribir<!--y-->dentro de:

<!-- Esto es un comentario -->

Los comentarios más largos se pueden<!--y-->escribir en varias líneas dentro de:

<!--
Este es un comentario más largo. Este es un comentario más largo. Este es un comentario más largo.
Este es un comentario más largo. Este es un comentario más largo. Este es un comentario más largo.
-->

En los comentarios largos, sangra el primer carácter con dos espacios para que sea más fácil de leer.

Hojas de estilo

Las hojas de estilo usan un formato de sintaxis conciso (el atributo type no es obligatorio):

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

Las reglas cortas se pueden escribir en una sola línea:

p.into {font-family: Verdana; font-size: 16em;}

Las reglas largas se pueden escribir en varias líneas:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Coloca la llave de apertura en la misma línea que el selector.
  • Añade un espacio entre la llave de apertura y el selector.
  • Usa dos espacios para la sangría.
  • Añade un espacio entre los dos puntos y el valor de la propiedad.
  • Usa un espacio después de las comas y los símbolos.
  • Usa un punto y coma después de cada propiedad y valor.
  • Use comillas solo cuando el valor del atributo contenga espacios.
  • Coloque la llave de cierre en una nueva línea.
  • Máximo 80 caracteres por línea.
Note Agregar espacios después de comas y dos puntos es una regla común.

Cargar JavaScript en HTML

Use una sintaxis concisa para cargar archivos de script externos (el atributo type no es obligatorio):

<script src="myscript.js">

Usar JavaScript para acceder a elementos HTML

Un formato HTML deficiente puede causar errores de ejecución de JavaScript.

Las siguientes dos declaraciones de JavaScript producen resultados diferentes:

Ejemplo

var obj = getElementById("Demo")

var obj = getElementById("demo")

Pruébalo »

En HTML, intenta usar las mismas reglas de nomenclatura para JavaScript.

Consulta las normas de código de JavaScript。

Usar nombres de archivo en minúsculas

La mayoría de los servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas: london.jpg no se puede acceder como London.jpg.

Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: london.jpg se puede acceder como London.jpg o london.jpg.

Debes mantener un estilo coherente; recomendamos usar siempre nombres de archivo en minúsculas.

Extensiones de archivo

La extensión de un archivo HTML puede ser.html(o.htm).

La extensión de un archivo CSS es.css 。

La extensión de un archivo JavaScript es.js 。

Diferencia entre .htm y .html

Los archivos con extensiones .htm y .html no tienen diferencias en esencia. Tanto los navegadores como los servidores web los tratan como archivos HTML.

La diferencia radica en:

.htm se usaba en los primeros sistemas DOS, que solo permitían extensiones de tres caracteres.

En sistemas Unix no hay una restricción especial para las extensiones, por lo que generalmente se usa .html.

Diferencia técnica

Si una URL no especifica un nombre de archivo (por ejemplo, http://www.example.com/css/), el servidor devolverá el nombre de archivo por defecto. Normalmente, los nombres de archivo por defecto son index.html, index.htm, default.html y default.htm.

Si el servidor solo está configurado con "index.html" como archivo predeterminado, debes nombrar el archivo "index.html", no "index.htm".

Sin embargo, normalmente el servidor puede configurar varios archivos predeterminados; puedes establecer los nombres de archivo predeterminados según sea necesario.

De todos modos, la extensión completa de HTML es ".html".

Otras extensiones