Guía de estilo y convenciones de código (5) HTML
- Página Anterior Semántica de HTML5
- Página Siguiente Entidades HTML
Convenios de código HTML
Los desarrolladores web a menudo no están seguros de los estilos y la sintaxis del código que usan en HTML
Entre 2000 y 2010, muchos desarrolladores web pasaron de HTML a XHTML
A través de XHTML, los desarrolladores tienen que escribir código 'bien formateado' efectivo
HTML5 es más flexible en la validación del código
A través de HTML5, debe crear el suyo propioPrácticas recomendadas, guías de estilo y convenios de código.
Inteligente y con garantía de futuro
El uso lógico de los estilos permite que otros personas entiendan y usen más fácilmente su HTML
En el futuro, programas como los lectores de XML pueden necesitar leer su HTML
El uso de una sintaxis bien formateada similar a XHTML permite ser más inteligente
Comentarios:Por favor, mantenga sus estilos inteligentes, limpios, puros y bien formateados
Por favor, use el tipo de documento correcto
Por favor, declare siempre el tipo de documento en la primera línea del documento:
<!DOCTYPE html>
Si siempre ha sido constante con las etiquetas en minúsculas, puede usar:
<!doctype html>
Por favor, use nombres de elementos en minúsculas
HTML5 permite usar mayúsculas y minúsculas mezcladas en los nombres de los elementos.
Recomendamos usar nombres de elementos en minúsculas:
- Los nombres de mayúsculas y minúsculas mezclados no son buenos
- Los desarrolladores tienen la costumbre de usar nombres en minúsculas (por ejemplo, en XHTML)
- Las minúsculas se ven más puras
- Las minúsculas son más fáciles de escribir
No está muy bien:
<SECTION> <p>Esto es un párrafo.</p> </SECTION>
Muy mal:
<Section> <p>Esto es un párrafo.</p> </SECTION>
No está mal:
<section> <p>Esto es un párrafo.</p> </section>
Cerrar todos los elementos HTML
En HTML5, no es necesario cerrar todos los elementos (por ejemplo, el elemento <p>).
Recomendamos cerrar todos los elementos HTML:
No se ve bien:
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
Se ve bien:
<section> <p>Esto es un párrafo.</p> <p>Esto es un párrafo.</p> </section>
Cerrar elementos HTML vacíos
En HTML5, cerrar elementos vacíos es opcional.
Se permite así:
<meta charset="utf-8">
También se permite así:
<meta charset="utf-8" />
La barra oblicua (/) es obligatoria en XHTML y XML.
Si espera que el software XML acceda a su página, mantener este hábito es una buena idea.
Use nombres de atributos en minúsculas
HTML5 permite nombres de atributos mixtos de mayúsculas y minúsculas.
Recomendamos usar nombres de atributos en minúsculas:
- Los nombres de atributos mezclados no son buenos
- Los desarrolladores están acostumbrados a usar nombres de atributos en minúsculas (por ejemplo, en XHTML)
- Los nombres de atributos en minúsculas parecen más puros en ciertos casos
- Los nombres de atributos en minúsculas son más fáciles de escribir
No se ve bien:
<div CLASS="menu">
Se ve bien:
<div class="menu">
Valores de atributos con comillas
HTML5 permite valores de atributos sin comillas.
Recomendamos que los valores de los atributos incluyan comillas:
- Si el valor del atributo contiene un valor, debe usar comillas
- Las mezclas de estilos son absolutamente malas
- Los valores entre comillas son más fáciles de leer
Este valor de atributo no es válido porque contiene espacios:
<table class=table striped>
Esto es válido:
<table class="table striped">
Atributos obligatorios
Siempre utilice para las imágenes alt Atributos. Este atributo es importante cuando la imagen no se puede mostrar.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Siempre defina el tamaño de las imágenes. Esto reducirá el parpadeo, ya que el navegador reserva espacio para la imagen antes de que se cargue.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Espacios y igual
Los espacios a los lados del igual son legales:
<link rel = "stylesheet" href = "styles.css">
Pero el espacio reducido es más fácil de leer, Pero el espacio sin saltos es más fácil de leer y agrupa mejor las entidades:
<link rel="stylesheet" href="styles.css">
Evite líneas de código largas
Es muy incómodo leer código HTML a través de desplazamientos laterales en un editor HTML.
Trate de evitar que las líneas de código superen los 80 caracteres.
Saltos de línea y sangría
No añada saltos de línea sin razón alguna.
Para mejorar la legibilidad, utilice saltos de línea para separar bloques de código grandes o lógicos.
Para mejorar la legibilidad, utilice sangría de dos espacios. No utilice TABs.
No utilice saltos de línea y sangrías innecesarios. No es necesario usar saltos de línea entre elementos cortos y relacionados, ni sangrar cada elemento:
Innecesario:
<body>
<h1>Ciudades Famosas</h1>
<h2>Tokyo</h2>
<p>
Tokyo es la capital de Japón, el centro del Gran Área de Tokio,
y la área metropolitana más poblada del mundo.
Es el asiento del gobierno japonés y el Palacio Imperial,
y la sede de la Familia Imperial Japonesa.
</p>
</body>
Mejor:
<body> <h1>Ciudades Famosas</h1> <h2>Tokyo</h2> <p> Tokyo es la capital de Japón, el centro del Gran Área de Tokio, y la área metropolitana más poblada del mundo. Es el asiento del gobierno japonés y el Palacio Imperial, y la sede de la Familia Imperial Japonesa. </p> </body>
Ejemplo de tabla:
<table>
<tr>
<th>Nombre</th>
<th>Descripción</th>
<tr>
<tr>
<td>A</td>
<td>Descripción de A</td>
<tr>
<tr>
<td>B</td>
<td>Descripción de B</td>
<tr>
</table>
Ejemplo de lista:
<ol> <li> LondresA </li> <li>París</li> <li>Tokyo</li> </ol>
¿Omitir <html> y <body>?
En el estándar HTML5, se puede omitir la etiqueta <html> y la etiqueta <body>.
El siguiente código se valida como HTML5:
Ejemplo
<!DOCTYPE html> <head> <title>Título de la página</title> </head> <h1>Esto es un encabezado</h1> <p>Esto es un párrafo.</p>
No recomendamos omitir las etiquetas <html> y <body>.
El elemento <html> es el elemento raíz del texto. Es el lugar ideal para especificar el idioma de la página.
<!DOCTYPE html> <html lang="en-US">
Para aplicaciones accesibles (lector de pantalla) y motores de búsqueda, es importante declarar el idioma.
Omitir <html> o <body> puede hacer que el software DOM y XML se estrelle.
Omitir <body> puede causar errores en navegadores antiguos (IE9).
¿Omitir <head>?
En el estándar HTML5, también se puede omitir la etiqueta <head>.
Por defecto, el navegador añadirá todos los elementos antes de <body> al elemento <head> predeterminado.
Al omitir la etiqueta <head>, puede reducir la complejidad de HTML:
Ejemplo
<!DOCTYPE html> <html> <title>Título de la página</title> <body> <h1>Esto es un encabezado</h1> <p>Esto es un párrafo.</p> </body> </html>
Comentarios:Para los desarrolladores web, la omisión de etiquetas es un concepto extraño. Establecer reglas lleva tiempo.
Metadatos
El elemento <title> es obligatorio en HTML5. Intenta crear títulos significativos siempre que sea posible.
<title>Sintaxis y Estilo de Codificación HTML5</title>
Para asegurar una interpretación adecuada y un índice de búsqueda correcto, es mejor definir el idioma y la codificación de caracteres en el documento lo antes posible:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Sintaxis y Estilo de Codificación HTML5</title> </head>
Comentarios HTML
Los comentarios cortos deben escribirse en una única línea, y agregar un espacio después de --> y antes de -->:
!-- Este es un comentario --
Los comentarios largos, que abarcan múltiples líneas, deben escribirse en líneas independientes mediante <!-- y -->:
<!-- 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. 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 se sangran con dos espacios.
Hoja de estilo
Usar una sintaxis simple para enlazar las hojas de estilo (el atributo type no es necesario):
<link rel="stylesheet" href="styles.css">
Las reglas cortas pueden comprimirse en una línea, como así:
p.into {font-family:"Verdana"; font-size:16em;}
Las reglas largas deben dividirse en múltiples líneas:
body {
background-color: gris claro;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: negro;
}
- El abre paréntesis debe estar en la misma línea que el selector
- Usar un espacio antes del abre paréntesis
- Usar sangría de dos caracteres
- Usar dos puntos seguidos de un espacio entre cada atributo y su valor
- Usar espacio después de cada coma o punto y coma
- Usar punto y coma después de cada par de valor de atributo (incluso el último)
- Usar comillas solo cuando el valor contenga espacios
- Colocar el cierre de corchete en una nueva línea, sin espacio previo
- Evitar que cada línea supere los 80 caracteres
Comentarios:Añadir un espacio en blanco después de las comas o puntos y coma es una regla universal de escritura.
Cargar JavaScript en HTML
Use una sintaxis simple para cargar scripts externos (el atributo type no es necesario):
<script src="myscript.js">
Acceder a elementos HTML mediante JavaScript
Las consecuencias de usar un estilo de HTML 'desordenado' pueden ser errores de JavaScript.
Estas dos sentencias de JavaScript producen resultados diferentes:
var obj = getElementById("Demo")
var obj = getElementById("demo")
Si es posible, use las mismas convenciones de nombramiento en HTML (que JavaScript).
Visite la Guía de Estilo de JavaScript.
Use nombres de archivo en minúsculas
La mayoría de los servidores web (Apache, Unix) son sensibles a mayúsculas y minúsculas en los nombres de archivo:
No se puede acceder a London.jpg usando london.jpg.
Otros servidores web (Microsoft, IIS) no son sensibles a mayúsculas y minúsculas:
Es posible acceder a London.jpg tanto con london.jpg como con London.jpg.
Si usa mayúsculas y minúsculas mixtas, debe mantener una alta consistencia.
Si pasa de un servidor que no es sensible a mayúsculas y minúsculas a uno que sí, estos errores pequeños pueden dañar su sitio web.
Para evitar estos problemas, siempre use nombres de archivo en minúsculas (si es posible).
Extensiones de archivo
Los nombres de archivo de HTML deben usar la extensión .html(en lugar de .htm)
Los archivos de CSS deben usar la extensión .css.
Los archivos de JavaScript deben usar la extensión .js.
- Página Anterior Semántica de HTML5
- Página Siguiente Entidades HTML
