1. Objetivos
Los objetivos que persigue la sintaxis de los elementos HTML son la simplicidad (¡una vez más!) y la permisividad. El lenguaje HTML5 no es una evolución del XHTML, HTML5 no tiene nada que ver con el XML. Por ese motivo ya no tenemos las reglas estrictas de sintaxis del XHTML.
2. Las comillas
Las comillas son facultativas para los valores de los atributos. Por ejemplo, para la codificación de los caracteres podemos usar las tres sintaxis siguientes:
<meta charset=UTF-8>
<meta charset=’UTF-8’>
<meta charset="UTF-8">
Con comillas simples, con comillas dobles o sin comillas, en los tres casos la sintaxis será válida.
En cambio, si un atributo tiene varios valores, será obligatorio el uso de comillas dobles:
<div class="estilo1 estilo2">
3. Los elementos con una única etiqueta de apertura
Algunos elementos HTML disponen de una única etiqueta de apertura y no tienen etiqueta de cierre: img, br, etc. En esos casos será necesario indicar el cierre del elemento en la etiqueta de apertura usando /.
Ejemplos:
<br />
<img src="imagen.png" />
En HTML5 no es obligatorio indicar el cierre de esas etiquetas.
Ejemplos válidos:
<br>
<img src="imagen.png">
4. Los elementos con etiqueta de cierre facultativa
En HTML 4 no es obligatorio incluir la etiqueta de cierre de ciertos elementos. Citemos algunos: <p>, <dl>, <td>... En XHTML, cada vez que se abre una etiqueta es obligatorio cerrarla. HTML5 retoma la sintaxis permisiva del HTML 4. Así, el siguiente ejemplo sería válido en HTML5: <p>Mi párrafo sin etiqueta de cierre.
5. Las mayúsculas y minúsculas
HTML5 acepta sin problemas las mayúsculas y las minúsculas en la sintaxis de los elementos y de los atributos. Los siguientes ejemplos son totalmente válidos en HTML5:
<SCRIPT src="miScript.js"></script>
<script SRC="MIscript.JS"></SCRIPT>
<sCriPt SrC="MiScript.js"></scRIpt>
Es cierto que vistos así, ¡esos ejemplos dan ganas de echarse a correr! Más adelante veremos que, a pesar de todo, es preferible respetar ciertas normas de uso.
6. Los atributos boleanos
Algunos atributos solamente admiten valores boleanos a la hora de aplicar dicho valor.
Este sería el ejemplo de una casilla que aparece seleccionada desde que se abre la página web. Se trata del uso del valor checked para el atributo checked.
<input type="checkbox" checked="checked" name="checkedbox">
Resulta redundante indicar ambos parámetros. En HTML5, la simple presencia del atributo es suficiente:
<input type="checkbox" checked name="checkedbox">
Nuevamente, se ha dado prioridad a la concisión de la sintaxis.
7. Los elementos HTML, HEAD y BODY
En cuanto a concisión se refiere, el HTML5 ha hecho un gran esfuerzo, colosal incluso: los elementos html, head y body son ahora facultativos.
Este sería un documento HTML totalmente válido y que se visualizaría correctamente:
<!DOCTYPE HTML>
<meta charset="UTF-8" />
<title>Mi primer documento HTML5 </title>
<h1>Esto es HTML5</h1>
<p>Mi contenido</p>
Se visualizará así:
Si examina el código fuente, podrá ver que los navegadores añaden ellos mismos los elementos HTML que faltan.
Como puede ver, los elementos <thead>, <tfoot> y <tbody> también son facultativos.
8. La sintaxis recomendada
Acabamos de ver que el HTML5 es muy permisivo. Podemos escribir nuestro código como prefiramos, casi podríamos decir que ¡de cualquier manera! La ventaja de esto es que ofrece una gran flexibilidad, con muy pocas restricciones. La principal desventaja reside en que las páginas así redactadas no se parecerán a nada de lo que ya conocemos, de modo que cada diseñador web deberá analizar durante "cierto tiempo" las páginas HTML de un proyecto "mal redactado" en las que deba trabajar, antes de comprender lo que tiene entre manos. Al ser demasiado permisivos, nos exponemos a perder el lenguaje común, que todos conocemos y usamos.
Por ese motivo le recomiendo que respete la sintaxis del XHTML. Se trata de una sintaxis que todos conocemos, ha sido adoptada por todos los creadores de sitios web, es la misma para todos y forma parte de las "prácticas recomendadas" para los diseñadores web.
Respetemos las normas de uso y de sintaxis del XHTML:
- usar solamente minúsculas,
- usar siempre las comillas,
- cerrar con / las etiquetas que se auto-cierran,
- cerrar los elementos para los cuales la etiqueta de cierre sea facultativa,
- sangrar el código para aumentar la legibilidad.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
No hay comentarios:
Publicar un comentario