Es/Doctypes y estilos de etiquetado

From Web Education Community Group
Jump to: navigation, search

Introducción

La declaración doctype aparece justo encima de la etiqueta de <html>, al comienzo de cada documento que crea:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi magnífico documento</title>

   ... etc

El doctype explica que tipo de HTML se espera, y por lo tanto, con cual validador de especificación (por ejemplo, el validador de HTML del W3C) debe validarse el documento. En este artículo del Curriculo de estándares web vamos a explorar los diferentes doctypes con los que probablemente se encontrará en su viaje por la Web y analizaremos cómo difieren el XHTML y el HTML.

Modo de estándares vs modo de peculiaridades (quirks mode)

El doctype también sirve para hacer que el navegador represente la página en el llamado "modo de estándares". En el modo de estándares, los navegadores generalmente intentan representar la página conforme a las especificación de CSS. Confían en que la persona que creó el documento sabía lo que estaba haciendo.

Las diferencias están básicamente relacionadas con la manera en que se representan las CSS y, sólo en algunos casos, con la manera en que es tratado el HTML en sí. Como diseñador o desarrollador web, obtendrá los mejores resultados asegurándose de que todos los navegadores utilicen su modo de representación de estándares y por ello debería de ceñirse a los estándares de la web y ¡utilizar un doctype adecuado!

El doctype de HTML5 y sus amigos

En este curso vamos a ceñirnos al doctype del HTML5:

<!DOCTYPE html>

No hay ninguna desventaja al utilizar este doctype, y es, sin duda, ¡mucho más fácil de recordar que los otros! Este es el que le recomendamos utilizar de ahora en adelante, ya que incluso si no planea empezar a usar ninguna de las nuevas características de HTML5 en su trabajo todavía, éste aún validará la mayoría de las características de HTML 4/XHTML 1.0 (hay un par de excepciones donde las características han sido eliminadas de las especificaciones, pero como aprenderá más tarde, la validación es simplemente una herramienta útil y no el fin en sí), y estará preparado para el futuro para cuando empiece a usar las nuevas características de HTML5. Sin embargo, hay otros doctypes con los que podría toparse cuando trabaja en diferentes proyectos. Echemos un vistazo a algunos de los otros con los que podría tropezar.

El doctype HTML 4.01 estricto

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

El doctype HTML 4.01 estricto es validado con la especificación de HTML 4.01 y aunque no permite el uso de ningún etiquetado de presentación visual o elementos obsoletos (como los elementos <font>) o conjuntos de marcos, valida el estilo de etiquetado HTML más libre, como los atributos minimizados y los atributos sin comillas (ej. required, en lugar de required="required").

El doctype HTML 4.01 transicional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd>

El doctype HTML 4.01 transicional es validado con la especificación de HTML 4.01. Permite algunos elementos de etiquetado de presentación visual y elementos obsoletos (como los elementos <font>), pero no los conjuntos de marcos. De nuevo, valida el estilo de etiquetado HTML más libre.

Los doctypes XHTML 1.0 estricto y transicional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

y

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Estos son los equivalentes exactos de XHTML 1.0 a los doctypes de HTML 4.01 que ya discutimos anteriormente, así que funcionalmente son iguales, excepto que no validarán el estilo de etiquetado HTML más libre: deben ser documentos XML bien formados.

Los doctypes HTML 4.01 y XHTML 1.0 frameset

Si desea utilizar conjuntos de marcos y que su etiquetado todavía valide, puede utilizar uno de estos dos doctypes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Son funcionalmente lo mismo que el HTML 4.01 transicional y el XHTML 1.0 transicional, respectivamente, pero permiten el uso de conjuntos de marcos. Pero por favor, no use conjuntos de marcos: son un maleficio y anticuados. Ni siquiera le decimos que tiene que usarlos en ninguna parte de este curso. Cada vez que utilice un conjunto de marcos en una página web, un hada muere. Así que por favor, no lo haga. Piense en las hadas.

Otros doctypes

Ocasionalmente también puede ver otros doctypes en sus viajes, pero no se mencionan aquí porque son anticuados. No utilice ningún otro doctype.

Sintaxis libre vs estricta

La Tabla 1 muestra las principales diferencias de sintaxis entre el HTML y el XHTML:

HTML XHTML
Los elementos y atributos no distinguen mayúsculas de minúsculas, ej: <h1> es exactamente lo mismo que <H1>. Los elementos y atributos distinguen mayúsculas de minúsculas; deben estar en minúsculas.
Algunos elementos no necesitan una etiqueta de cierre (ej: párrafos, <p>), y otros (llamados “elementos vacíos”) no deben tener etiqueta de cierre (ej: imágenes, <img>). Todos los elementos deben ser explícitamente cerrados (ej: <p>Un párrafo</p>). Los elemento sin contenido deben ser cerrados usando una barra diagonal en la etiqueta de apertura (ej: <hr></hr> y <hr/> significan lo mismo).
Los valores de atributo pueden escribirse sin estar entre comillas. Los valores de atributo deben estar entre comillas.
Puede usarse la notación abreviada para ciertos atributos (ej: <input required>). Debe usarse el atributo completo para todos los atributos (eg <input required="required">).

Tabla 1: Diferencias entre HTML y XHTML.

En términos de qué estilo de sintaxis debe utilizar, elija la que le haga sentir cómodo. Nosotros le recomendamos que empiece con la sintaxis estricta del XML, ya que su funcionamiento está garantizado en cualquier situación. Luego, puede ajustar su estilo para adaptarse, cuando comprenda lo que está haciendo un poco mejor. Solamente recuerde estas reglas:


  • Si está usando el doctype de HTML5 o un doctype de HTML 4.01, puede usar el estilo que desee
  • Si está usando un doctype de XHTML, necesita usar la sintaxis bien formada de XML
  • Cual sea el estilo que este usando, las prácticas recomendadas son:
    • Cierre todos los elementos abiertos, por ejemplo <p>párrafo</p>, y no <p>párrafo
    • Anídelos correctamente, por ejemplo <p>párrafo con <strong>palabra</strong> en negritas</p>, y no <p>párrafo con <strong>palabra</p> en negritas</strong>

Esta última regla es muy importante. Si no lo hace, su etiquetado HTML no estará bien formado y las CSS, así como el JavaScript, pueden no funcionar de forma fiable, ya que se basan en la existencia de un Modelo de Objetos de Documento (DOM, por sus siglas en inglés) bien formado. Para más información sobre el DOM del HTML, lea Cultivándo árboles (inglés).


Una nota para los profesores

Algunos profesores nos han preguntado qué estilo deben enseñarle a los principiantes y qué doctype deben recomendar. El HTML5 le permite utilizar el estilo de sintaxis libre de HTML, por lo que validar con el doctype de HTML5 no detectará el etiquetado considerado erróneo en XHTML. Esto es una lástima, ya que la sintaxis estricta de XHTML es un buen estilo al que pueden ceñirse los principiantes. Entonces, ¿qué debe hacer?

Bueno, el punto de que el HTML5 permita tal sintaxis libre es por que en su mayor parte no es realmente importante en cuanto a que las páginas funcionen bien en los navegadores y el HTML5 refleja más lo que los desarrolladores web han hecho históricamente que lo que piensa el W3C deberían estar haciendo. Así que por lo tanto, realmente no tiene que ceñirse a la mayor parte de estas reglas. Puede seguir adelante con el HTML5 utilizando cualquier estilo de sintaxis al que esté acostumbrado. Pero, obviamente, al enseñarle a los principiantes es necesario enseñarles un estilo a seguir, de lo contrario podría resultar un caos. Le recomendamos que utilice el doctype de HTML5 y los nuevos elementos, pero haga que se adhieran a las normas estrictas del XHTML.

Los siguientes deben darle algunos buenos argumentos del por qué:

  • "El HTML5 no necesita etiquetas de cierre": Si, pero realmente debe incluirlas, para asegurarse de que se forme un DOM sin ambigüedades, lo que le dará los resultados que espera cuando empiece a aplicarle CSS y JS a su código HTML.
  • "El HTML5 no necesita las barras diagonales finales en las etiquetas vacías": Si, realmente no necesita incluirlas.
  • "El HTML5 no diferencia entre mayúsculas y minúsculas": Si, pero aún así debe ceñirse a un estilo coherente, porque de lo contrario puede crear confusión cuando los estudiantes colaboran en diferentes proyectos y además podrían crearse errores de sintaxis, por ejemplo, si un estudiante se confunde y empieza a usar mayúsculas y minúsculas en las rutas de los archivos. Los servidores Unix distinguen entre mayúsculas y minúsculas. Además, sus alumnos no siempre van a trabajar con HTML5 en el mundo real. Puede que se consigan con un Sistema de gestión de contenidos (CMS, por sus siglas en inglés) que utilice HTML4 estricto o XHTML 1.0 transicional, o el que sea. Usar las reglas de sintaxis del XHTML asegura que el código HTML funcionará bastante bien, independientemente del doctype y estilo.
  • "El HTML5 no requiere los elementos <html>, <head> y <body>": Sí, pero es una práctica recomendada general a la cual debemos adherirnos. Incluir <body> y <head> divide el código de manera natural en dos diferentes áreas de funcionalidad, haciéndolo más legible. E incluir la etiqueta <html> es importante para diferentes cosas, como los eventos de JavaScript y también para la accesibilidad - debe incluir un atributo lang para indicar el idioma principal del documento, como una práctica común.
  • "HTML5 permite texto aislado (sin un contenedor)": No. Esta es una mala práctica - es muy probable que forme un DOM inesperado - menos control de su código.
  • "HTML5 permite valores de atributo sin comillas": Sí, pero a veces esto deja de funcionar, por ejemplo cuando tiene un atributo class que contiene dos nombres de clase, como <div class="uno dos"></div>. Si usted escribe <div class=uno dos> puede confundir al navegador - éste puede pensar que dos es un nuevo atributo.

La validación con HTML5 para la sintaxis de estilo XHTML es un poco dolorosa. Como una sugerencia, puede utilizar http://validator.w3.org, pero establezca el doctype como "XHTML 1.0" en lugar de "detectar automáticamente". Esto tomará su documento HTML5 y lo validará como XHTML 1.0, dándole los mensajes de error según corresponda. Por supuesto, también le dará mensajes de error para los elementos de HTML5, ya que no están definidos en lo que se refiere a XHTML 1.0.

Sirviendo XML "real"

Podría también estar interesado en saber que la mayor parte del XHTML en la Web es en realidad HTML escrito con sintaxis XML bien formada. Aún cuando el doctype sea XHTML, éste se envíará al cliente como HTML a menos que:

  • guarde el archivo con una extensión de archivo .xhtml
  • incluya una línea de código llamada la declaración XML antes de su doctype, la cual es igual a la siguiente:
<?xml version="1.0" encoding="UTF-8"?>

Sin embargo, no le recomendamos que haga esto: las versiones antiguas de Internet Explorer (6 y anteriores) cambian al modo de peculiaridades (quirks mode) si encuentran la declaración XML al inicio del documento, lo que no es conveniente, como hemos analizado anteriormente. Además, IE 6-8 intentarán descargar los archivos guardados como XHTML en lugar de desplegarlos en el explorador, ¡lo que usted definitivamente no desea!

Por lo tanto, ¡sólo debe ceñirse a no tratar de servir los documentos XHTML como es apropiado!

Resumen

Y esto es todo en cuanto al doctype - prácticamente todo lo que necesita saber.