Guía de estilo. HTML. Diseño Web con HTML y CSS. Bartolomé Sintes Marco. Cefire CTEM 22CT47ES011 (abril/mayo 2022)

La sintaxis de HTML es bastante flexible y permite variaciones en el marcado. En esta página se muestran algunas de esas variaciones permitidas, pero en estos apuntes se recomienda utilizar siempre un mismo estilo, para facilitar el mantenimiento de las páginas en un futuro. El estilo recomendado se indica con el icono 👍.

Por otro lado, hay que tener en cuenta los navegadores intentan mostrar las páginas aunque contengan errores. Aún así, en estos apuntes se aconseja validar y corregir los documentos para asegurar que los navegadores puedan mostrarlos correctamente.

Generalidades

En HTML, los espacios, tabuladores o saltos de línea colapsan a un único espacio. En estos apuntes se recomienda separar las etiquetas de bloques con saltos de línea y utilizar un sangrado de dos espacios en los elementos de bloques anidados, para mejorar la legibilidad.
👍
```
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>HTML</title>
</head>
<body>
 ...
</body>
</html>
```
```
<!DOCTYPE html><head><meta charset="utf-8"><title>HTML</title></head><body>...</body>
```
En HTML el texto puede no estar incluido en ninguna etiqueta. En estos apuntes se recomienda no dejar texto sin incluir en alguna etiqueta.
👍
```
AAAA
BBBB
CCCC
```
```
AAAA
BBBB
CCCC
```
En HTML, los nombres de elementos y atributos pueden escribirse en minúsculas o mayúsculas. En estos apuntes se recomienda escribirlos siempre en minúsculas.
👍
```
AAAA
```
```
AAAA
```
```
AAAA
```
En HTML, las referencias a entidades en hexadecimal pueden escribirse en minúsculas o mayúsculas. En estos apuntes se recomienda escribirlos siempre en minúsculas.
👍
```
&#x3b1; &#x3b2; &#x3c0;
```
```
&#X3b1; &#x3B2; &#X3C0;
```
En HTML no es necesario indicar que un elemento <html> contiene código JavaScript con el atributo type.
👍
```
<script>
 ...
</script>
```
```
<script type="text/javascript">
 ...
</script>
```

Elementos (etiquetas)

Los documentos HTML pueden tener o no un único elemento raíz de todo el documento, el elemento <html>. En estos apuntes se recomienda escribir siempre la etiqueta <html>.

👍

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML</title>
</head>
<body>
  ...
</body>
</html>

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML</title>
</head>
<body>
  ...
</body>

En HTML, los elementos no vacíos (los que tienen etiqueta de apertura) pueden tener o no etiqueta de cierre. En estos apuntes se recomienda escribir siempre las etiquetas de cierre.
👍
```
AAAA
BBBB
```
```
AAAA
BBBB
```
En HTML, las etiquetas de los elementos vacíos pueden o no acabar en "/>", pero no puede haber etiqueta de cierre. En estos apuntes se recomienda no escribir la barra / en la etiqueta.
Las etiquetas vacías (void) de HTML son <area>, <base>, , <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y .
👍
```
<hr>
```
```
<hr />
```
```
<hr></hr>
```

Atributos

En HTML los valores de los atributos pueden escribirse en minúsculas o en mayúsculas. En estos apuntes se recomienda escribirlos en minúsculas, salvo que sea necesario escribirlos con alguna mayúscula (por ejemplo, porque estamos indicando una ruta a un archivo cuyo nombre contiene mayúsculas).
👍
```
<input type="text">
```
```
<input type="TEXT">
```
En HTML, los valores de los atributos pueden escribirse o no entre comillas (dobles o simples), excepto si el valor del atributo contiene espacios en blanco, en cuyo caso se deben escribir entre comillas. En estos apuntes se recomienda escribir los valores siempre entre comillas y en estos apuntes se utilizan las comillas dobles.
👍
```
AAAA
```
```
AAAA
```
👍
```
AAAA
```
```
AAAA
```
```
AAAA
```
En HTML, los atributos booleanos (los que solo pueden tener un valor) pueden escribirse sin indicar el valor, dándoles un valor vacío o dándoles como valor el nombre del atributo. En estos apuntes se recomienda no escibir ningún valor, sino únicamente el nombre del atributo.
👍
```
<ol reversed>
 <li>AAA</li>
 <li>BBB</li>
</ol>
```
```
<ol reversed="">
 <li>AAA</li>
 <li>BBB</li>
</ol>
```
```
<ol reversed="reversed">
 <li>AAA</li>
 <li>BBB</li>
</ol>
```

HTML. Guía de estilo

Generalidades

Elementos (etiquetas)

Atributos