Estándares de codificación HTML de Bootstrap

Sintaxis

  • Usa dos espacios en lugar de tabulaciones: esta es la única manera de garantizar una presentación consistente en todos los entornos.
  • Los elementos anidados deben sangrarse una vez (es decir, dos espacios).
  • Para la definición de atributos, asegúrate de usar siempre comillas dobles, nunca comillas simples.
  • No añadas una barra diagonal al final de los elementos autocerrados (self-closing) --La especificación de HTML5señala explícitamente que esto es opcional.
  • No omitas las etiquetas de cierre opcionales (closing tags) (por ejemplo,</li>o</body>）。

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

Añade la declaración de modo estándar (standard mode) en la primera línea de cada página HTML, para garantizar una presentación consistente en todos los navegadores.

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Atributo de idioma

Según la especificación de HTML5:

Se recomienda encarecidamente especificar el atributo lang en el elemento raíz html para establecer el idioma correcto del documento. Esto ayuda a las herramientas de síntesis de voz a determinar la pronunciación que deben utilizar, y a las herramientas de traducción a determinar las reglas que deben seguir al traducir, entre otros.

Aquí estála tabla de códigos de idioma.。

<html lang="zh">
  <!-- ... -->
</html>

Modo de compatibilidad de IE

IE admite, mediante una<meta>etiqueta, determinar la versión de IE que se debe usar para renderizar la página actual. A menos que haya una necesidad especial imperiosa, lo mejor es configurarla comoedge mode, para así notificar a IE que utilice el modo más reciente que admita.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Codificación de caracteres

Declarar explícitamente la codificación de caracteres garantiza que el navegador determine de forma rápida y sencilla cómo renderizar el contenido de la página. La ventaja es que se evita usar entidades de carácter (character entity) en HTML, de modo que todo sea coherente con la codificación del documento (generalmente UTF-8).

<head>
  <meta charset="UTF-8">
</head>

Incluir archivos CSS y JavaScript

Según la especificación de HTML5, al incluir archivos CSS y JavaScript generalmente no es necesario especificar eltypeatributo, porquetext/cssytext/javascriptson sus valores predeterminados, respectivamente.

HTML5 spec links

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

La practicidad es lo más importante

Sigue en la medida de lo posible los estándares y la semántica de HTML, pero no sacrifiques la practicidad. Usa siempre la menor cantidad de etiquetas y mantén la complejidad mínima.

Orden de los atributos

Los atributos HTML deben ordenarse siguiendo el orden que se indica a continuación, para garantizar la legibilidad del código.

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class se usa para identificar componentes altamente reutilizables, por lo que debe ir primero. id se usa para identificar componentes específicos y debe usarse con precaución (por ejemplo, marcadores dentro de la página), por lo que va en segundo lugar.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Atributos booleanos

Los atributos booleanos pueden declararse sin valor. La especificación de XHTML exige asignarles un valor, pero la de HTML5 no lo requiere.

Para más información, consultaWhatWG section on boolean attributes：

Los atributos booleanos de un elemento, si tienen valor, son true; si no lo tienen, son false.

Sirealmentetienes que asignarle un valor, consulta la especificación de WhatWG:

Si el atributo existe, su valor debe ser una cadena vacía o el nombre canónico del atributo [...], y no deben añadirse espacios en blanco al principio ni al final.

En pocas palabras, no es necesario asignarle valor.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Reducir el número de etiquetas

Al escribir código HTML, evita en lo posible los elementos padre innecesarios. Muchas veces esto requiere iteración y refactorización. Mira el siguiente ejemplo:

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Etiquetas generadas por JavaScript

Las etiquetas generadas mediante JavaScript hacen que el contenido sea difícil de encontrar y editar, y reducen el rendimiento. Evítalas siempre que sea posible.

Otras extensiones