Las convenciones de codificación HTML
Los desarrolladores web son a menudo inciertos sobre el estilo y la sintaxis de codificación a utilizar en HTML.
Entre 2000 y 2010, muchos desarrolladores web convierten de HTML a XHTML.
Con XHTML, los desarrolladores se vieron obligados a escribir válida y "well-formed" código.
HTML5 es un poco más descuidado cuando se trata de código de validación.
Con HTML5, debe crear sus propios convenios de las mejores prácticas, Guía de Estilo y codificación.
Sea inteligente y prueba de futuro
Un consiguiente uso de estilo, hace que sea más fácil para que otros puedan entender y utilizar el código HTML.
En el futuro, los programas como lectores XML, puede que quiera leer el código HTML.
El uso de un bien formado "close to XHTML" sintaxis, puede ser inteligente.
Siempre mantenga su estilo inteligente, ordenada, limpia y bien formada.
El uso correcto de tipo de documento
declarar siempre el tipo de documento como la primera línea en el documento:
<!DOCTYPE html>Si quieres coherencia con las etiquetas minúsculas, puede utilizar:
<!DOCTYPE html>Utilice minúsculas Nombres de elementos
HTML5 permite la mezcla de letras mayúsculas y minúsculas en los nombres de elementos.
Recomendamos el uso de nombres de elementos en minúsculas:
- Mezclar nombres en mayúsculas y minúsculas es malo
- Los desarrolladores se utilizan para el uso de nombres en minúscula (as in XHTML)
- limpia mirada minúscula
- Minúsculas son más fáciles de escribir
Malo:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Muy mal:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Bueno:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Cerrar todos los elementos HTML
En HTML5, que no tiene que cerrar todos los elementos (for example the <p> element) .
Le recomendamos que cierre todos los elementos HTML:
Mal aspecto:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Verse bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Cerrar los elementos HTML vacía
En HTML5, es opcional para cerrar los elementos vacíos.
Esto está permitido:
<meta charset="utf-8">Esto también se permite:
<meta charset="utf-8" />La barra oblicua (/) se requiere en XHTML y XML.
Si espera que el software XML para acceder a su página, que podría ser una buena idea para mantenerlo.
Usar minúsculas nombres de los atributos
HTML5 permite la mezcla de letras mayúsculas y minúsculas en los nombres de atributos.
Recomendamos el uso de nombres de atributos en minúsculas:
- Mezclar nombres en mayúsculas y minúsculas es malo
- Los desarrolladores se utilizan para el uso de nombres en minúscula (as in XHTML)
- limpia mirada minúscula
- Minúsculas son más fáciles de escribir
Mal aspecto:
<div CLASS="menu">Verse bien:
<div class="menu">Los valores de atributo cotización
HTML5 permite que los valores de atributos sin comillas.
Recomendamos citando valores de atributos:
- Usted tiene que utilizar comillas si el valor contiene espacios
- La mezcla de estilos no es bueno
- Los valores indicados son más fáciles de leer
Esto no funcionará, ya que el valor contiene espacios:
<table class=table striped>Esto funcionará:
<table class="table striped">Los atributos de imagen
Utilice siempre el alt atributo con imágenes. Es importante cuando la imagen no se puede ver.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">Siempre definir tamaño de la imagen. Se reduce el parpadeo ya que el navegador puede reservar espacio para las imágenes antes de cargarse.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Los espacios y signos iguales
Los espacios alrededor del signo igual es legal:
<link rel = "stylesheet" href = "styles.css">Pero el espacio-menos es más fácil de leer, y grupos de entidades mejor juntos:
<link rel="stylesheet" href="styles.css">Evitar las líneas de código largo
Cuando se utiliza un editor HTML, es un inconveniente para desplazarse hacia la derecha y la izquierda para leer el código HTML.
Trate de evitar las líneas de código de más de 80 caracteres.
Las líneas en blanco y sangría
No añadir líneas en blanco sin una razón.
Para facilitar la lectura, añadir líneas en blanco para separar los bloques de código grandes o lógicos.
Para facilitar la lectura, añadir 2 espacios de sangría. No utilice TAB.
No utilice líneas en blanco innecesarios y sangría. No es necesario el uso de líneas en blanco entre elementos cortos y relacionados. No es necesario aplicar la sangría cada elemento:
Innecesario:
<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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>Mejor:
<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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>Ejemplo 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>Omitiendo <html> y <body> ?
En el estándar HTML 5, la <html> etiqueta y el <body> etiqueta se pueden omitir.
El siguiente código validará como HTML5:
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 " No recomendamos omitir los <html> y <body> etiquetas.
La <html> elemento es la raíz del documento. Es el lugar recomendado para especificar el idioma de la página:
<!DOCTYPE html>
<html lang="en-US">La declaración de una lengua es importante para las aplicaciones de accesibilidad (screen readers) y motores de búsqueda.
Omitiendo <html> o <body> puede accidente DOM y el software XML.
Omitiendo <body> puede producir errores en los navegadores antiguos (IE9) .
Omitiendo <head> ?
En el estándar HTML 5, el <head> etiqueta también se puede omitir.
Por defecto, los navegadores se sumarán todos los elementos antes de <body> , a un defecto <head> elemento.
Puede reducir la complejidad de HTML, omitiendo el <head> etiqueta:
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 " La omisión de etiquetas no es familiar para los desarrolladores web. Se necesita tiempo para ser establecidos como guía.
meta Data
La <title> se requiere elemento en HTML5. Hacer el título tan significativo como sea posible:
<title>HTML5 Syntax and Coding Style</title>Para asegurar una interpretación apropiada y correcta indexación de los motores de búsqueda, tanto el lenguaje como la codificación de caracteres debe definirse lo antes posible en un documento:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>Comentarios HTML
Breves comentarios deben escribirse en una sola línea, con un espacio después <!-- and a space before --> :
<!-- This is a comment -->Comentarios largo, que abarca muchas líneas, se deben escribir con <!-- and --> En líneas separadas:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->comentarios largas son más fáciles de observar, si se sangran 2 espacios.
Las hojas de estilo
Utilice la sintaxis sencilla para unir las hojas de estilo (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">normas cortos se pueden escribir comprimidos, en una línea, como esto:
p.into {font-family: Verdana; font-size: 16em;}reglas largas deben ser escritas en varias líneas:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Coloque el soporte de apertura en la misma línea que el selector.
- Utilice un espacio antes del paréntesis de apertura.
- Utilice 2 espacios de sangría.
- Utilice dos puntos más un espacio entre cada propiedad y su valor.
- Utilizar el espacio después de cada coma o punto y coma.
- Utilice punto y coma después de cada pareja propiedad-valor, incluyendo la última.
- Sólo utilice comillas alrededor de valores si el valor contiene espacios.
- Coloque el soporte de cierre en una nueva línea, sin espacios iniciales.
- Evitar las líneas de más de 80 caracteres.
Adición de un espacio después de una coma o un punto y coma, es una regla general en todos los tipos de escritura.
Cargando JavaScript en HTML
Utilice la sintaxis sencilla para cargar scripts externos (the type attribute is not necessary) :
<script src="myscript.js">El acceso a los elementos HTML con Javascript
Una consecuencia de la utilización de "untidy" estilos HTML, podría dar lugar a errores de JavaScript.
Estas dos sentencias JavaScript producirán diferentes resultados:
Si es posible, utilizar la misma convención de nombres (as JavaScript) en HTML.
Visita la Guía de Estilo JavaScript .
Utilice minúsculas nombres de archivo
La mayoría de servidores web (Apache, Unix) son sensibles acerca de 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:
london.jpg se puede acceder como London.jpg o london.jpg.
Si se utiliza una mezcla de letras mayúsculas y minúsculas, usted tiene que ser muy consistente.
Si se mueve de un caso insensible, a un servidor de mayúsculas y minúsculas, incluso los pequeños errores se romperán su web.
Para evitar estos problemas, utilice siempre los nombres de archivo en minúsculas (if possible) .
Extensiones de archivo
Los archivos HTML deben tener una extensión .html (or .htm ) .
Archivos CSS deben tener una extensión .css.
Archivos JavaScript deben tener una extensión .js.
Diferencias entre .htm y .html
No hay diferencia entre el .htm y .html extensiones. Ambos serán tratados como HTML mediante cualquier navegador web o un servidor web.
Las diferencias son culturales:
.htm "smells" de los primeros sistemas de DOS donde el sistema limita las extensiones de 3 caracteres.
.html "smells" de los sistemas operativos Unix que no tienen esta limitación.
Las diferencias técnicas
Cuando una URL no especifica un nombre de archivo (like http://www.w3ii.com/css/) , el servidor devuelve un nombre de archivo predeterminado. nombres de archivo por defecto comunes son index.html, index.htm, default.html y default.htm.
Si el servidor está configurado únicamente con "index.html" como nombre de archivo predeterminado, el archivo debe llamarse "index.html" , no "index.htm."
Sin embargo, los servidores pueden ser configurados con más de un nombre de archivo predeterminado, y, normalmente, se puede configurar tantos nombres de archivo por defecto según sea necesario.
De todos modos, la extensión completa para archivos HTML es .html, y no hay razón para que no se debe utilizar.