Nuevas etiquetas HTML5 estructurales

Defina con claridad sus bloques de contenido

HTML5 presenta varias etiquetas nuevas, incluyendo varias dedicadas a describir mejor la estructura de los documentos. En este artículo, aprenderá sobre las nuevas etiquetas estructurales en HTML5. Explore cómo utilizarlas para dividir un documento en bloques de contenido. El código de ejemplo ilustra los conceptos.

Jeremy J. Wischusen, Web Application Architect, Binary Neuron L.L.C.

Jeremy Wischusen photoJeremy Wischusen tiene más de 13 años de experiencia diseñando sitios Web y aplicaciones para clientes como Purple Communications, myYearbook.com, HBO y otros, creación de sistemas de front y backend con Flash, Flex, jQuery, PHP, MySQL, MSSQL y PostgreSQL. Ha enseñado diseño Web, Flash y ActionScript para clientes como Wyeth Pharmaceuticals, The Vanguard Group, Bucks County Community College y The University of the Arts.



18-07-2011

¿Qué es HTML5?

HTML5, la última versión del Hypertext Markup Language (HTML), es la versión más radical del lenguaje a la fecha. Esta presenta muchos recursos nuevos en una variedad de áreas. Algunas de las adiciones más notables incluyen:

  • Etiquetas integradas multimedia para audio y video
  • Un bastidor para dibujar contenido en el navegador
  • Formatos más inteligentes que le permiten hacer cosas como validación mediante el uso de un atributo requerido

Con un nuevo conjunto de etiquetas estructurales, HTML5 revisa la forma en que están estructurados los documentos HTML. Las nuevas etiquetas estructurales se enfocan en dividir un documento HTML en partes lógicas. El nombre de la etiqueta describe el tipo de contenido que se pretende que contenga. En este artículo, aprenda sobre estas nuevas etiquetas con más detalle.

Un poco de contexto

Tim Berners-Lee creó el HTML original en 1989 para solucionar las deficiencias de los métodos existentes para acceder a información en Internet. Desde que se concibió, encontrar su camino en Internet era una tarea difícil. El contenido en Internet era tratado como documentos individuales, sin que hubiesen métodos sencillos para navegarlos. En esencia, usted tenía que conocer la dirección del documento que estaba buscando e ingresarla manualmente. Para solucionar este problema, Berners-Lee creó dos tecnologías: Hypertext Transfer Protocol (HTTP) y HTML.

HTTP es un protocolo de servicio utilizado para entregar contenido. El comienzo de un URL en su navegador Web (suponiendo que el navegador muestre el URL completo) muy probablemente comenzará con http://. Esta parte del URL le dice al navegador qué tipo de protocolo usar cuando esté haciendo la solicitud al servidor Web. Cuando el servidor recibe una solicitud de documento, es probable que ese documento esté escrito o sea convertido a HTML. El documento HTML es lo que se envía de regreso al navegador que hace la solicitud.

HTML es un lenguaje de scripting que le dice al navegador Web cómo presentar el contenido. En este contenido puede haber enlaces a otros documentos, proporcionando un método fácil de usar para navegar entre documentos en Internet.

La combinación de HTTP y HTML ofrece una navegación rápida y fácil por el contenido en Internet, al permitirle simplemente hacer clic en los enlaces de texto para navegar entre documentos. Después de crear estas dos tecnologías, Berners-Lee continuó y fundó el World Wide Web Consortium (W3C). El W3C fue la fuerza guía detrás de las cuatro primeras versiones de HTML.

La intención original de Internet era servir documentos de texto simples. Los primeros navegadores todos estaban basados en texto (sin ventanas lujosas — sólo texto en una pantalla). Incluso la adición de imágenes era un gran problema cuando se introdujo al principio. Ahora, las personas hacen de doto, desde enviar mensajes de e-mail hasta ver televisión en Internet. Internet se ha convertido en mucho más que un mecanismo para transportar documentos de texto simples. Con los recursos y usos llegaron nuevos retos y problemas que el lenguaje HTML nunca fue diseñado para manejar.

El W3C intentó resolver los problemas del Internet de hoy con el estándar Extensible Hypertext Markup Language (XHTML) 2.0. Sin embargo, este estándar no fue bien recibido y fue abandonado en gran medida. En el 2004, mientras el W3C se estaba enfocando en el estándar XHMTL 2.0, un grupo llamado el Web Hypertext Application Technology Working Group (WHATWG) comenzó a trabajar en el estándar HTML5, que tuvo una acogida más cálida que el estándar XHTML 2.0. El W3C abandonó el estándar XHTML 2.0 y está trabajando ahora con WHATWG en el desarrollo del HTML5.

Navegadores soportados

Para el momento de este escrito, HTML5 no ha sido lanzado oficialmente. La mayoría del contenido en la Web todavía está siendo escrito para la especificación HTML4. No obstante, varios navegadores incluyen soporte para la especificación HTML5. Como cada navegador puede soportar solo ciertos recursos de HTML5, las cosas se complican un poco. Antes de escribir un sitio basado en HTML5, revise cada uno de sus navegadores objetivo para asegurarse de que soporten los recursos que va a utilizar para su sitio.


El nuevo doctype

Sin importar las capacidades de sus navegadores objetivo, usted debe decirle al navegador que usted desea que su contenido sea presentado usando la especificación HTML5. Usted hace esto usando la declaración doctype.

La declaración doctype le dice al navegador en qué versión del lenguaje de marcación está escrita la página. Esto lo hace refiriéndose a una Document Type Definition (DTD). La DTD especifica las reglas usadas por el lenguaje de marcación, para que los navegadores puedan presentar el contenido correctamente.

Doctypes puede ser un concepto confuso. En la especificación HTML actual hay muchos doctypes, y las diferencias entre ellas no son completamente claras. Tabla 1 muestra los doctypes actualmente disponibles y sus capacidades.

Tabla 1. Doctypes y capacidades
DoctypeCapacidadesEjemplo
HTML 4.01 estrictoPermite todos los elementos y atributos HTML, pero no permite etiquetas de presentación, como la etiqueta de fuente. No se permiten conjuntos de marcos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transicionalIgual que HTML estricto, pero permite el uso de elementos en desuso, como la etiqueta de fuente. No se permiten conjuntos de marcos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 conjunto de marcosIgual al HTML transicional, pero permite conjuntos de marcos.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 estrictoIgual al HTML estricto, pero todo el contenido debe estar escrito como XML bien formateado. Por ejemplo, todas las etiquetas de apertura deben tener etiquetas de cierre. No se permiten conjuntos de marcos. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 transicionalIgual al HTML transicional, pero todo el contenido debe estar escrito como XML bien formateado. No se permiten conjuntos de marcos. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 conjunto de marcosIgual al XHTML transicional, pero permite conjuntos de marcos.<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1Igual al XHTML estricto, pero también proporciona capacidades para módulos, como soporte Ruby para idiomas orientales-asiáticos. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

afortunadamente, la declaración doctype se ha simplificado bastante en HTML5. De hecho es sólo una. Para que su navegador presente en pantalla usando la especificación HTML5, añada el doctype mostrado en la Listado 1.

Listado 1. doctype HTML5
<!DOCTYPE html>

La declaración de doctype debe ser el primer elemento en un documento HTML, antes que <html> .


Nuevos elementos estructurales

La razón para crear nuevas etiquetas estructurales es dividir las páginas Web en partes lógicas que describan el tipo de contenido que incluyen. Conceptualmente, piense en la página Web como un documento. Los documentos tienen encabezados, pies de página, capítulos y otras convenciones diferentes que dividen el documento en partes lógicas.

Esta sección revisa los métodos actuales de dividir un documento HTML usando código genérico de muestra. Durante el resto de este artículo, usted revisará el código original usando las nuevas etiquetas estructurales HTML5 para ver paso a paso cómo el documento es transformado en secciones lógicas.

Enfoque HTML 4

Si usted ha creado incluso los documentos HTML más simples, entonces estará familiarizado (a) con la etiqueta div . La etiquetadiv es el principal mecanismo de la era pre-HTML5 para crear bloques de contenido en un documento HTML. Por ejemplo, elListado 2 muestra cómo usted puede usar etiquetas div para crear una página simple con un encabezado, un área de contenido y un pie de página.

Listado 2. Página HTML simple usando etiquetas div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Una página HTML simple usando Divs
</title>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>

Esto funciona bien; la etiqueta div es una buena etiqueta de propósito general. Sin embargo, además de mirar el atributo id de cada etiqueta div , es difícil decir qué sección del documento representa cada etiqueta div . Aunque usted puede argumentar que laid es un indicador suficiente si se nombra adecuadamente, los atributos id son arbitrarios. Hay muchas variaciones que se pueden considerar ids igualmente válidas. La etiqueta en sí no ofrece ninguna indicación sobre el tipo de contenido que se pretende que represente.

Enfoque HTML5

HTML5 responde a este problema proporcionando un conjunto de etiquetas que definen con mayor claridad los bloques principales de contenido que componen un documento HTML. Sin importar el contenido final mostrado por la página Web, la mayoría de páginas Web consisten en combinaciones de variantes de secciones y elementos de página comunes.

El código del Listado 2 crea una página simple con un encabezado, un área de contenido y un pie de página. Estos y otras secciones y elementos de página son bastante comunes, de manera que HTML5 incluye etiquetas que dividen los documentos en las secciones comunes y que indican el contenido de cada una. Las nuevas etiquetas son:

El resto de este artículo le ofrece una visión general de cada etiqueta. También aprenderá sobre la intención de uso de las etiquetas al revisar el código de ejemplo basado en div del Listado 2 para usar nuevas etiquetas HTML5 estructural.


Como su nombre lo sugiere, la etiqueta header tiene por objeto marcar una sección de la página HTML como el encabezado. Listado 3 muestra el ejemplo de código del Listado 2 modificado para que use un header .

Listado 3. Añadiendo una etiqueta header .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>

El doctype en el Listado 3 también se cambió para indicar que el navegador debería utilizar HTML5 para presentar la página. Desde este punto en adelante, todos los ejemplos suponen que usted está utilizando el doctype correcto.


El área section .

La etiqueta section tiene por objeto identificar porciones significativas del contenido de la página. Esta etiqueta es de alguna forma análoga a dividir un libro en capítulos. Añadiendo una etiqueta section al código de ejemplo da como resultado el código en el Listado 4.

Listado 4. Añadiendo una etiqueta section .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
    <p>
    Esta es una sección importante de la página.
    </p>
    </section>
<div id='footer'>Footer</div>
</body>
</html>

El área article .

La etiqueta article identifica las secciones principales del contenido dentro de la página Web. Piense en un blog, donde cada publicación de cada individuo constituye una porción significativa de contenido. Añadiendo etiquetas article al código de ejemplo da como resultado el código en el Listado 5.

Listado 5. Añadiendo etiquetas article
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
    <p>
    Esta es una sección importante del contenido de la página.
    Tal vez una publicación en blog.
    </p>
    </article>
    <article>
    <p>
    Esta es una sección importante del contenido de la página.
    Tal vez una publicación en blog.
    </p>
    </article>
</section>
<div id='footer'>Footer</div>
</body>
</html>

La etiqueta aside .

La etiqueta aside indica que el contenido dentro de ella está relacionado el contenido principal de la página pero que no es parte de ella. En cierta forma es análogo a usar paréntesis para hacer un comentario en un cuerpo de texto (como este). El contenido entre paréntesis proporciona información adicional sobre el elemento que lo contiene. Añadiendo una etiqueta aside al código de ejemplo da como resultado el código en el Listado 6.

Listado 6. Añadiendo una etiqueta aside .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
    </p>
    Este es un aparte de la primera publicación en blog.
    </p>
    </aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>

La etiqueta footer marca el contenido dentro del elemento que es el pie de página del documento. Añadiendo una etiqueta footer al código de ejemplo da como resultado el código en el Listado 7.

Listado 7. Añadiendo una etiqueta footer .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>

en este punto, todas las etiquetas div originales han sido reemplazadas con etiquetas HTML5 estructurales.


El contenido dentro de la etiqueta nav tiene por objeto propósitos de navegación. Añadiendo una etiqueta nav al código de ejemplo da como resultado el código en el Listado 8.

Listado 8. Añadiendo una etiqueta nav .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header
<nav>
    <a href='#'>Algún enlace de navegación</a>
    <a href='#'>Algún enlace de navegación adicional</a>
    <a href='#'>Un tercer enlace de navegación</a>
    </nav>
</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>

Ejemplo completado

Listado 9 muestra el resultado de reemplazar las etiquetas div originales por las nuevas etiquetas HTML5 estructurales.

Listado 9. Ejemplo completado
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>

Aunque el ejemplo es simple, para propósitos demostrativos, cuando compare el ejemplo original basado en divd elListado 2 con el resultado del Listado 9, el propósito de las nuevas etiquetas estructurales debe ser claro.


Conclusión

Las nuevas etiquetas HTML5 describen los tipos de contenido que contienen, y ayudan a dividir el documento en secciones lógicas. Todavía depende de usted decidir cuándo y dónde utilizar las nuevas etiquetas dentro de un documento, de forma similar a como un autor escribe un libro. Mientras dos autores escribiendo el mismo libro pueden optar por diferentes formas de dividir el libro en capítulos, la acción de usar capítulos ofrece un método consistente de dividir el libro en secciones. De manera similar, aunque los dos autores de una página Web dada pueden optar por estructuras diferentes, las nuevas etiquetas estructurales HTML5 proporcionan nuevas convenciones que los desarrolladores de páginas Web pueden usar y que las viejas etiquetas div no ofrecían.

Recursos

Aprender

  • "New Elements in HTML5" (developerWorks, agosto del 2007): ApAprenda más sobre la estructura HTML5
  • WHATWG: Explore la comunidad WHATWG, la organización responsable de la especificación HTML5.
  • W3C: Aprenda más sobre W3C, la comunidad que creó la especificación HTML original y que está trabajando ahora con WHATWG en la especificación HTML5.
  • HTML5 (Wikipedia): Conozca más sobre HTML5.
  • "HTML5 differences from HTML4" (W3C): Entienda mejor las diferencias entre HTML 4 y HTML5 en este documento de trabajo.
  • "HTML5 First Look" (lynda.com): Explore lo que es HTML5 (y lo que no es).
  • zona de desarrollo Web developerWorks: Encuentre artículos que cubren varias soluciones basadas en la Web.

Obtener los productos y tecnologías

  • Evalúe productos de IBM de la forma que mejor se ajuste a usted: Descargue una prueba de producto, ensaye un producto en línea, use un producto en un entorno en nube, o pase algunas horas en el SOA Sandbox aprendiendo a implementar la Arquitectura Orientada a Servicios con eficiencia.

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Linux
ArticleID=732618
ArticleTitle=Nuevas etiquetas HTML5 estructurales
publish-date=07182011