Compartir a través de

Lección 4: Uso de las etiquetas HTML5

  • Artículo

Objetivos:

En esta lección aprenderás cómo se actualizan las páginas HTML ya existentes para utilizar los elementos de división en secciones y otros elementos nuevos de HTML5.

 

Para empezar

Vas a trabajar con algunos archivos que se encuentran en la carpeta HTML5_04lessons a lo largo de esta lección. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.

Para poder tener vistas previas precisas del contenido HTML5 que vamos a crear en esta lección, deberás utilizar un navegador web compatible con las etiquetas más importantes de HTML5, por ejemplo Internet Explorer 9. A lo largo de las siguientes secciones irás aprendiendo que muchos navegadores antiguos no soportan las etiquetas de HTML5. Uno de los objetivos de este capítulo es mostrarte estos problemas y enseñarte a resolverlos.

 

Una revisión de las etiquetas de semántica

En esta sección vamos a ver algunos de los nuevos elementos que se han incorporado al lenguaje HTML5. Para poder completar esta lección correctamente tienes que conocer bien los fundamentos de HTML y CSS y tener experiencia previa en la creación de páginas web con estos lenguajes.

La lección comienza con una breve introducción a las etiquetas de semántica (“semantic markup” en la literatura en inglés), que es una manera formal de decir “elige en todo momento la etiqueta más adecuada para el fin que pretendes”. Una explicación más técnica del concepto de etiquetado semántico es que se trata de una sintaxis que pueden entender tanto los seres humanos como los programas, por ejemplo un navegador o un buscador. Las etiquetas de semántica tratan de dar un sentido explícito a los contenidos, a menudo con el uso de etiquetas.

A priori, la elección de las etiquetas correctas parece una idea muy buena. Por ejemplo, pensemos en los títulos de HTML, de los cuales tenemos 6 niveles: <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. Si los presentamos en un navegador, vemos que el elemento <h1> es el de mayor tamaño, y <h6> el más pequeño.

Los 6 elementos de título mostrados según los estilos por defecto, por orden de importancia.

El contenido dentro de un elemento <h1> debería tener mayor importancia que otro dentro de un elemento <h3>. Por la misma razón, si se indica un estilo de letra para los títulos, el tamaño de letra de un elemento <h1> debería ser mayor que el de un elemento <h3>. No hay ninguna razón de tipo técnico que impida la creación de un estilo para <h3> que le haga tener un tamaño más grande que <h1>. Desde el punto de vista del navegador web, no hay diferencia, pero cuando un ser humano examina el código por primera vez su semántica le puede causar confusión: un elemento “título de tercer nivel” supuestamente debería tener un tamaño más pequeño que otro de primer nivel.

Uno de los objetivos del etiquetado semántico es conseguir que el código de las páginas sea lógico y coherente. Un código consistente y basado en conceptos lógicos es más sencillo de actualizar y modificar para un diseñador, y hace que la página sea más flexible y adaptable a otros usos, por ejemplo para acceder desde dispositivos móviles. El etiquetado semántico nos garantiza que incluso en las páginas sin estilos puedan verse todos los elementos de manera comprensible y utilizable.

 

Fundamentos de HTML5

Antes de crear una página HTML5 vamos a ver las distintas categorías de contenidos dentro de un documento HTML. Aunque los cambios que introduce HTML5 son numerosos, los conceptos esenciales de HTML y XHTML no han cambiado gran cosa. Un desarrollo interesante es que la sintaxis en HTML5 es menos estricta, sobre todo si se compara con la de XHTML 1.0. Por ejemplo, en HTML5 nos encontramos con estas situaciones:

  • En HTML5 no se diferencia entre mayúsculas y minúsculas, es decir, podemos utilizar etiquetas en mayúsculas, en minúsculas e incluso mezclarlas ambas y la página sigue siendo válida. Así, el código siguiente es técnicamente válido:
<H1> Ultimas noticias desde Madrid </h1>
  • No se exigen las etiquetas de cierre de los elementos. Por ejemplo, se admite la inserción de múltiples párrafos de esta forma:
<p> Ha habido un accidente en la autopista A2 entre Madrid y Alcala.
<p> Los conductores deberán utilizar rutas alternativas.
<p> La velocidad está limitada a 90 Kms/h.
  • Las comillas en los atributos son opcionales. Por ejemplo, se da por válido este código:
<img src=trafficjam.jpg alt=traffic jam>

A primera vista, estas reglas parece que favorecen ciertas prácticas de programación poco coherentes. Si es así ¿por qué HTML5 las permite? La respuesta la resumen muy bien los arquitectos de HTML5 como un intento de “pavimentar el sendero” a los desarrolladores. Es una metáfora traída del mundo agrario, donde un granjero podría esperar a ver por dónde pasean los animales y, una vez han definido el sendero preferente, entonces procederá a pavimentarlo, en lugar de empezar por poner los adoquines primero, con el riesgo de que las reses acaben eligiendo otro camino distinto. En el mundo del desarrollo web, esta metáfora se traduce en que cuando una práctica ha sido adoptada de forma general por parte de los desarrolladores y diseñadores es el momento de “aceptarla como buena en vez de prohibirla o inventar algo diferente”.

En HTML5 se pone especial empeño en mantener la compatibilidad con versiones anteriores, y muchas de las prácticas mencionadas antes (como es el uso de etiquetas en mayúsculas o no cerrarlas adecuadamente) se utilizaban en la creación de documentos en los primeros tiempos de la Web. El W3C decidió integrar estas prácticas de codificación tan dispersas dentro de la especificación para asegurarse de que los navegadores del futuro podrían seguir mostrando el mayor número posible de páginas publicadas a día de hoy.

Si quieres conocer una explicación más detallada de la filosofía aplicada por el W3C a los Principios de Diseño de HTML, visita http://www.w3.org/TR/html-design-principles/.

¡Pero cuidado!: el que HTML5 permita este tipo de sintaxis relajada no significa que debamos adoptar semejantes malas prácticas. A lo largo de este libro te iremos orientando para que programes como si lo hicieras en XHTML 1.0, cerrando los elementos, empleando minúsculas y añadiendo comillas a los atributos, porque creemos que siguen siendo buenas prácticas a mantener. Si empleamos una forma coherente y estándar a la hora de programar, reduciremos la probabilidad de errores y podremos aislar la fuente de cualquier problema si aparece.

 

La declaración DOCTYPE de HTML5

Un cambio notable en la especificación de HTML5 ya se puede ver en la primera línea de cualquier documento HTML5. Un navegador web restituye las páginas desde el principio avanzando hacia el final del documento. La línea inicial de la mayoría de los archivos HTML es la que se llama DOCTYPE, que le indica al navegador el tipo de documento que tiene que traducir. Por ejemplo, cuando un diseñador utiliza la versión transicional de HTML (4.0.1), la declaración DOCTYPE es:

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

Si utiliza la versión estricta de XHTML 1.0, la misma declaración se queda en:

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

En HTML5 la declaración DOCTYPE es bastante más sencilla:

<!DOCTYPE html>

DOCTYPE sirve para validar documentos. Los navegadores actuales y futuros pueden comprobar la sintaxis de documentos que se declaran a sí mismos como HTML. Cualquier incorrección sintáctica (por ejemplo una etiqueta mal escrita o un atributo que falta), devuelve un error. La validación es un proceso opcional, pero los diseñadores y los desarrolladores lo utilizan mucho para detectar posibles fallos en el código o elementos que puedan faltar.

Si es preciso, puedes volver a consultar los detalles de la validación de páginas que vimos en la Lección 2 “Conceptos básicos de HTML, XHTML y CSS”

En esta práctica vamos a convertir una página HTML antigua en HTML5. El documento está escrito en HTML 4.01, así que tenemos que modificar la declaración DOCTYPE y utilizar la de HTML5, más corta.

En el editor de texto, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons. Selecciona el archive E04_index.html y pulsa Abrir. Guarda el documento con otro nombre para asegurarte de que conservas una copia de seguridad: en el menú Archivo, selecciona Guardar como y lo guardas en disco con el nombre 04_index_work.html, dentro de la misma carpeta HTML5_04lessons.

1   Visualiza la página en tu navegador para comprobar el aspecto que tiene en este momento. Es, básicamente, el diseño que hemos creado al final de la Lección 3 y se clasifica como una estructura de dos columnas de anchura fija. SI no has estado trabajando recientemente con el diseño de las páginas web, debes repasar un poco su estructura interna: tenemos un elemento DIV con el atributo ID #wrap que contiene a los demás elementos div que componen la estructura de la página. El estilo CSS para este grupo de DIVs establece una anchura de 960 pixels y unos márgenes a derecha e izquierda, con el valor “auto” para que el contenedor quede centrado en la ventana del navegador.

El elemento DIV identificado con el ID “wrap” tiene una anchura de 960 pixels y contiene al resto de secciones.

Un cambio que tendremos en esta lección con respecto al diseño creado en la Lección 3 es que hemos sacado todos los estilos internos del archivo 03_layout_work.html a una hoja de estilos CSS externa, llamada base.css.

2  Cierra el navegador y vuelve al editor. Selecciona toda la declaración <!DOCTYPE> en las dos primeras líneas y bórrala. Escribe en su lugar esto:

<!DOCTYPE html>

3  Guarda el archivo y ábrelo en el navegador. Verás que no hay cambios, pero el navegador reconoce este archive como HTML5, no como HTML 4.01.

4  Cierra el navegador. Vamos a sustituir algunos de los elementos DIV por elementos HTML5 nuevos, pero antes tenemos que ver cómo se clasifican en HTML5 los distintos tipos de contenidos.

 

Las distintas categorías de contenido utilizadas en HTML5

Podemos dividir el contenido de una página web en varias categorías que, en su mayor parte, no son novedades de HTML5, pero que nos ayudan a entender cómo se organiza internamente la información.

  • Metadatos
  • Flujo
  • Secciones
  • Títulos
  • Textos
  • Contenidos embebidos
  • Contenidos interactivos

Estas categorías son útiles a la hora de agrupar elementos dentro de una página. Por ejemplo, la categoría de información de flujo describe todos los elementos que podemos utilizar en el cuerpo de una página, pero podemos subdividir el contenido de flujo en categorías más pequeñas, como titulares o textos.

Metadatos

A la información que establece el modo de restitución o el comportamiento del resto del contenido de la página se le denomina Metadatos. Los metadatos se pueden utilizar también para establecer la relación entre este documento y otros documentos. Un ejemplo obvio de metadatos es lo que aparece dentro de los elementos <meta>, que suelen contener una descripción de la información contenida dentro de la página, o palabras clave y que los motores de búsqueda utilizan para clasificar las páginas. Otros elementos como <style> y <script>se consideran también metadatos puesto que intervienen en la presentación y actividad del contenido principal. Los metadatos se ubican en la sección <head> del documento:

<head>
  <title> Worldwide Apparel Intranet </title>
  <meta charset=utf-8>
  <link rel="stylesheet" href="styles.css" media="all">
  <script src= "jquery-1.4.2.min.js"></script>
</head>

Flujo

Por “flujo” entendemos los elementos que se consideran propiamente el contenido de una página web, o dicho de otra forma, todas las etiquetas utilizadas para definir contenidos entran dentro de esta categoría, como por ejemplo, <p>, <h1>, <ol>, <table>, etc. El contenido de flujo normalmente es texto o un archivo insertado, como una imagen o un vídeo. En HTML5 aparecen algunos elementos nuevos dentro de esta categoría, como <article>, <aside>, <audio>, <canvas>, <hgroup> y algunos más.

<h3> Esto es un contenido de flujo </h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Secciones

Es una nueva categoría de HTML5 y actualmente incluye cuatro elementos: <article>, <aside>, <nav> y <section>. El W3C define el contenido de Secciones como aquellos elementos que “definen el alcance de cabeceras y pies de página”. El contenido de las secciones es un subconjunto del contenido de flujo. Veremos más adelante en esta misma sección cómo se distribuye una página en secciones.

Las definiciones de las secciones y otras categorías se pueden consultar en la web:
http://dev.w3.org/html5/spec/content-models.html

<aside>
  <h1> Volunteer Opportunities </h1>
  <p> Sort and inspect home goods and supplies for kids.</p>
</aside>

Títulos

Los títulos contienen todos los elementos de encabezamiento que ya se vienen utilizando en HTML 4.0: <h1>,<h2> y sucesivos. HTML5 incorpora además el elemento <hgroup>, pensado para agrupar dos o más títulos. El contenido de titulares forma parte del contenido de flujo.

<hgroup>
  <h2>Top Rated Smoothies</h2>
  <h3>The Funky Orange</h3>
</hgroup>

Contenido de textos

Engloba todo el texto del documento, incluyendo los elementos delimitadores de texto dentro de los párrafos. El contenido de texto es un subconjunto del contenido de flujo.

<p> La ventaja de tener unas <strong> buenas </strong> botas de montaña se pone 
de manifiesto <em>especialmente</em> a partir del tercer día de caminata.</p>

Contenidos embebidos

Los contenidos embebidos son aquellos que se importan de otros recursos dentro de la página, como son imágenes, vídeos o archivos para descargar.

<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer>
 </audio>

Contenidos interactivos

Uno de los elementos más básicos, como es la etiqueta <a> (utilizada en los vínculos), se la considera un elemento interactivo. Otros elementos han sido creados específicamente para dar cabida a la interacción con el usuario, y también se incluyen en esta categoría. Por ejemplo, elementos <textarea> o <button> que se utilizan en los formularios.

<input type="button" value="¿Soy interactivo?"
 onClick='alert("Sí, soy interactivo")'>

Botón con código Javascript asociado al acto de pulsar.

En el ejercicio siguiente vas a aprender a utilizar algunos de los nuevos elementos de HTML5 convirtiendo una estructura basada en divs en otra que aplique los nuevos elementos de sección y algunas de las etiquetas propias de esta versión.

 

Uso del nuevo elemento header en HTML5

La especificación HTML5 extiende el conjunto actual de elementos que se usan actualmente para que el desarrollador y el diseñador puedan disponer de unas opciones de etiquetado semántico más precisas. Un ejemplo es el elemento <div> utilizado para dividir una página en secciones. La etiqueta de apertura <div> suele incluir un atributo ID o un indicador de clase, y a partir de ellos se le modifican mediante CSS diversas propiedades como width, height o background-color. Por sí solo, el elemento <div> no dice nada. Los diseñadores y desarrolladores le otorgan un significado al añadirle un ID o nombres de clases, pero estos nombres son arbitrarios y no tienen significado alguno para el navegador. Uno de los objetivos de HTML5 es, precisamente, incorporar nuevos elementos que tengan un sentido concreto dentro de la estructura interna del documento.

En esta práctica vamos a analizar la estructura abriendo un archivo que utiliza el marco HTML actual y lo vamos a convertir en una página HTML5.

1  En el editor de textos, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons, selecciona el archivo base.css y pulsa en Aceptar

2  Más o menos hacia el primer tercio de la hoja de estilos, aparece la regla de ID siguiente, para la cabecera original:

#masthead{
  background-color: #FFF;
}

Se trata de una regla sencilla que define el estilo aplicable a un objeto con ID “masthead”. Este estilo indica que se aplicará el color de fondo blanco (“#FFF”). Recuerda este mismo nombre de estilo para los pasos siguientes.

3  Encuentra la regla para #wrap y fíjate que indica como color de fondo el naranja. Sin embargo, cuando visualizaste la página en el ejercicio anterior no aparecía nada con fondo naranja. Esto se debe a que el color blanco de “masthead” está superpuesto al del contenedor “wrap”.

4   Sigue descendiendo por el código y verás que todas las reglas de estilo siguientes también indican un color de fondo blanco: #sidebar, #main, #innerwrap y #footer. El resultado final es que el color de fondo naranja del div “wrap” no se ve por ningún sitio. Lo hacemos con el fin de enseñarte y en los pasos siguientes verás por qué, cuando empecemos a insertar elementos HTML5.

5  Vuelve al archivo 04_index_work.html.

6  El primer paso consiste en sustituir la etiqueta <div> actual de la cabecera por uno de los nuevos elementos de HTML5. Dentro del código HTML, busca esta sección:

<div id="masthead">
  <img src="images/wa_logo.jpg" width="200"
 height="123" alt="Worldwide Apparel logo" />
</div>

El único contenido dentro de este elemento div es la imagen del logo del sitio web.

7  Borra las etiquetas de apertura y cierre del div y sustitúyelas por esto:

  <header id="masthead">
  
  <h1> The web's #1 resource for smoothie recipes </h1>
  <img src="images/smoothieworld_logo.jpg" width="200"
 height="150" alt="smoothieworld_logo" />
</header>

Es un nuevo elemento de HTML5 llamado <header>.La especificación del W3C explica que “el elemento header representa un grupo de textos de presentación o ayudas a la navegación”. La especificación indica también que “el elemento header por lo general debe contener la cabecera de sección (un elemento h1-h6 o un elemento hgroup), pero no es obligatorio. El elemento header puede utilizarse también como contenedor de una tabla de secciones a modo de índice de contenidos, un formulario de búsqueda o cualquier tipo de logos de interés”

En HTML5 podemos utilizar el elemento <header> dentro de una misma página varias veces. Más adelante, en esta misma sección vamos a ver cuándo y dónde tendría sentido añadir cabeceras adicionales.

Puesto que este es el primer elemento HTML5 de tu página, tenemos que comprobar cómo funciona en navegadores web que no soportan las etiquetas HTML5. En los párrafos siguientes explicaré este problema y cómo podemos resolverlo.

8  Guarda el archivo en disco y visualiza la página en tu navegador. Si el navegador soporta el elemento <header> de HTML5 no verás ninguna diferencia entre esta página y la página que habías abierto al principio de esta lección. Si el navegador NO soporta el elemento <header> verás que el color de fondo de la cabecera se cambia a naranja.

La página visualizada en un navegador compatible con la etiqueta <header> HTML5.

Los navegadores que no soportan el elemento <header> HTML5 no reconocen el estilo asociado a él

Las diferencias en el color de fondo se deben a que el navegador no compatible con HTML5 no aplica el estilo del elemento <header> correctamente; el color naranja que ves es en realidad el color de fondo del div subyacente. Fíjate que el logo del sitio web, aunque está dentro del elemento <header> sigue siendo visible porque utiliza el elemento <img> , que sí reconocen todos los navegadores.

Este ejemplo sencillo ilustra de alguna forma el dilema a que nos conducen los nuevos elementos HTML5: ¿cómo podemos utilizar estas etiquetas si los navegadores antiguos no reconocen sus estilos? En la siguiente sección veremos dos soluciones para este problema.

 

Cómo incorporar soporte para los elementos HTML5 en navegadores antiguos

Cuando un navegador se encuentra un elemento desconocido y este elemento tiene estilos CSS asociados, tenemos un problema. Para ser más concreto, muchos navegadores antiguos tratan al elemento desconocido <header> como un elemento de línea (o de nivel de texto) y no como elemento de bloque o simplemente ignoran el elemento desconocido. Los elementos de línea generalmente nos los encontramos dentro de un bloque de texto, por ejemplo los elementos <strong> y <em> son elementos de línea (también los verás citados como “inline” en los textos en inglés). Los elementos de bloque utilizan bloques de espacio en la página y añaden saltos de línea automáticamente cuando se insertan en el contenido. Por ejemplo, el elemento <p> y todos los elementos de título (h1 y siguientes) son de nivel de bloque.

Existen varias formas para conseguir que los navegadores más antiguos apliquen adecuadamente los estilos a las nuevas etiquetas de HTML5. Una manera de conseguirlo de forma elegante nos la ofrece la librería Javascript llamada Modernizr. Esta librería incorpora los nuevos elementos HTML5 a los navegadores antiguos. El código Javascript de esta librería está pensado para detectar funcionalidades dentro de cualquier navegador y añadirles el soporte necesario para poder utilizar los nuevos objetos y estilos si no están soportados. Vamos ahora a añadir un enlace a la librería Modernizr .

1   Ves al archivo 04_index_work.html. En la sección <head> del código HTML busca los enlaces a las dos hojas de estilo externas y después de ellas añade la siguiente línea:

<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="base.css" rel="stylesheet" type="text/css" />
<script src="modernizr-2.0.js" type="text/javascript"></script>

Este archivo se encuentra en la carpeta HTML5_04lessons. Puesto que Modernizr es una librería Javascript que está en proceso de mejora continua, puedes confirmar si existe alguna versión más reciente en su sitio web http://www.modernizr.com

2   Guarda el archivo y si estás haciendo tus pruebas con algún navegador sin soporte a HTML5 verás que la sección de cabecera ahora aparecerá con el color blanco, como queríamos.

Hemos incorporado la librería Javascript Modernizr para poder ver en un navegador antiguo como Firefox 3.6 o Internet Explorer 6 el elemento <header> HTML5.

Este añadido significa que podemos seguir utilizando los nuevos elementos HTML5 con confianza, ahora que sabemos que pueden soportarlos prácticamente todos los navegadores más conocidos. No obstante, tenemos que tener en cuenta algunas cuestiones. La librería Modernizr no es infalible ya que depende de que el usuario active el uso de Javascript, y puede darse la circunstancia (rara por otra parte) de que el navegador del usuario no soporte Javascript o que su uso esté desactivado por motivos de seguridad. En tal caso no nos vale ninguna de las alternativas y la página se mostrará mal. De todas formas, la inmensa mayoría de los navegadores soportan Javascript, y en muy pocas ocasiones nos encontraremos con que Javascript esté desactivado por defecto.

 

Incorporar elementos <nav> HTML5

Ahora vamos a utilizar los nuevos elementos de sección de HTML5 para dividir la página en secciones lógicas. Los nuevos elementos de sección son <section>, <article>, <aside> y <nav>. Vamos a empezar por el elemento <nav> porque es el más fácil de entender.

1  Encuentra en el código HTML este bloque:

<div id="mainnav">
  <ul>
    <li><a href="index.html">Home
 </a></li>
   
 <li><a href="ourcompany.html">Our Company</a></li>
    
 <li><a href="policies.html">Policies and Procedures
 </a></li>
    
 <li><a href="doc_repository.html">Document Repository</a></li>
    
 <li><a href="forum.html">News & Events</a></li>
  </ul>
</div>

En este código se utiliza una técnica de navegación muy corriente, basada en listas no numeradas y CSS. Se trata aquí de una lista no ordenada anidada dentro de un div llamado “mainnav”. El nuevo elemento <nav> de HTML5 puede sustituir al div y su ID originales.

2  Sustituye las etiquetas <div> por el código siguiente:

<nav>
  <ul>

   <li><a href="index.html">Home
 </a></li>
    
 <li><a href="ourcompany.html">Our Company</a></li>
    
 <li><a href="policies.html">Policies and Procedures
 </a></li>
    
 <li><a href="doc_repository.html">Document Repository</a></li>
    
 <li><a href="forum.html">News & Events</a></li>
</nav>

3 Ahora tenemos que modificar el selector CSS que utilizamos en la hoja de estilo. En el editor de textos, abre la hoja de estilos base.css y posiciónate en el código siguiente:

#mainnav {
  background-color:#666;
  height:40px;
}

Cambia el selector de ID #mainnav por el selector nav como se indica a continuación.

4  Cambia el código para que quede así:

nav {
background-color:#666;
   height:40px;
}

Ahora estos estilos se asocian al elemento nav, no al ID #mainnav. Guarda la hoja de estilo a disco y vuelve a la página HTML, y guárdala también. Visualiza la página en el navegador. Podrás ver que todavía no se ve correctamente la barra de navegación.

La barra de navegación se ve mal porque necesitamos actualizar todos los estilos asociados con el ID #nav.

La barra de navegación se ve mal porque hay más estilos que utilizan el ID #mainnav como selector. Tenemos que cambiarlos todos.

Cierra el navegador y vuelve al editor.

5 En el archivo base.css, busca las reglas que hay debajo de la regla nav. Necesitaremos modificar tres selectores más: #mainnav li, #mainnav ul li a y #mainnav ul li a:hover. Estos son selectores de contexto en CSS y apuntan a etiquetas concretas dentro del contexto del estilo del objeto padre (en este caso, es el ID #mainnav, que ahora ha dejado de existir ya que lo hemos cambiado por el elemento nav). Por ejemplo, #mainnav li define un estilo para los elementos de lista (li) dentro del elemento div que lleva el identificador #mainnav.

Haz los cambios que se indican en rojo:

  nav li {
  float:left;
  width:170px;
  height:40px;
  background-color:#CCC;
  text-align:center;
  border-left:1px black solid;
  border-right:1px black solid;
  line-height:40px;
  }
nav ul li a {
  color:#ffffff;
  text-decoration:none;
  display:block;
}
nav ul li a:hover {
  background-color:#666666;
  color:#D2CD2F;
}

5 Guarda el archivo y visualiza la página en el navegador. Ahora la barra de navegación aparece como al principio.

Si la barra de navegación sigue viéndose mal, prueba a actualizarla dentro del navegador pulsando F5 o mediante el comando de menú que corresponda. Algunos navegadores mantienen en su memoria cache la página anterior y necesitan recargarla para mostrar los cambios.

La barra de navegación utiliza ahora el elemento <nav> HTML5.

Incorporación de otros elementos de sección HTML5

Los otros elementos de la categoría de contenidos de sección son <section>, <article> y <aside>. El primero que vamos a añadir es <section>. La definición oficial del elemento section es que “representa una sección genérica de un documento o aplicación. Una sección, en este caso, es un grupo de elementos relacionados con un mismo tema, a menudo con un titular o cabecera”. La definición también indica que “el elemento section no es un contenedor genérico. Si se necesita aplicar un estilo a un elemento o interesa independizarlo para su tratamiento posterior mediante scripting, los autores recomiendan el uso del elemento DIV en su lugar. Como regla general, el elemento section es adecuado solo si su contenido puede enumerarse de forma explícita en el resumen o índice del documento.”

Esta definición puede consultarse en http://developers.whatwg.org/sections.html\#sections.

Así pues, podemos utilizar <section> cuando queramos delimitar de forma lógica un bloque de contenido concreto e importante que puede llevar, por ejemplo, texto e imágenes. En el caso de la página que hemos utilizado para la práctica, vemos que es una página de inicio con un contenido distribuido visualmente: la columna de la izquierda es más ancha y con un color diferente que la segunda columna, a la derecha. Esta segunda columna es la barra lateral y su contenido no tiene relación directa e inmediata con el contenido principal. Volveremos sobre esto más adelante.

1  En el archivo 04_index_work.html, busca la etiqueta de apertura de la sección principal (“main”):

<div id="main">

Busca la etiqueta de cierre </div> más abajo. Vamos a cambiar esta etiqueta en seguida. El Código de comentario nos ayudará a identificarla.

  <p>The information on this site is provided to help you be a happier, more productive employee. 
If you have any questions about anything on the site or 
have other employee related questions, you can also call 
Jen Smith at extension 535! </p>
</div>
<!-- End of Main Div -->

2  Sube otra vez a la etiqueta de apertura <div> y cámbiala por la etiqueta <section> así:

<section id="main">

3 Ahora baja hasta la etiqueta de cierre </div> que habías marcado en el paso 1 y sustitúyela con la etiqueta de cierre de sección:

    <p>The information on this site is provided to help you be a happier, more productive employee.
 If you have any questions about anything on the site or 
have other employee related questions, you can also call 
Jen Smith at extension 535! </p>
</section>
<!-- End of Main Div -->:

El elemento padre de esta nueva sección se llama <div id="innerwrap"> y se utiliza para fines de presentación únicamente, no para guardar contenidos. El estilo asociado a este div incluye un color de fondo (blanco) y puesto que ese div solo se usa como elemento de la estructura visual, podemos dejarlo tal cual está.

En HTML5 podemos seguir utilizando elementos DIV, pero las buenas prácticas recomiendan utilizarlos solo si no hay una opción mejor dentro del conjunto de elementos HTML5 disponibles.

4  Guarda el archivo y muestra la página en el navegador. Antes de seguir con la práctica, necesitamos conocer el modelo que utiliza HTML5 para gestionar los esquemas de contenido.

 

Esquemas de contenidos en HTML5

Una de las carencias más notables en las especificaciones actuales de HTML y XHTML es la falta de un buen modelo de gestión de esquemas de los contenidos. Pensemos en los esquemas tradicionales que podemos crear antes de desarrollar un informe o un escrito cualquiera. Los esquemas representan el nivel de importancia de cada bloque de contenidos y las relaciones jerárquicas entre dichos bloques. Los elementos de sección de HTML5 están pensados para poder generar de manera natural un esquema o estructura de contenido a partir de la página web. Imagina que cada página web tuviera un “Índice de contenidos” generado automáticamente a partir de la estructura interna de etiquetas. Eso es precisamente lo que se pretende con el modelo de esquema de documento en HTML5.

Las ventajas de los esquemas de documento no son evidentes de forma inmediata en los navegadores web actuales ni en los dispositivos móviles, pero serán sin duda muy útiles en los dispositivos de ayuda, como los lectores de pantalla. Por ejemplo, un lector de pantalla habilitado para HTML5 puede encontrar una página con el elemento <nav> y saltárselo directamente, o dar al usuario la opción de saltárselo o acceder a cada lugar a donde apuntan los enlaces del elemento <nav>.

Actualmente las páginas HTML y XHTML solo disponen de esquemas basados en las etiquetas de título, por lo que su uso es muy limitado. El nuevo modelo de esquema de HTML5 permite generar esquemas más detallados y relevantes. Mira este ejemplo:

<body>
  <header>
    <h1>Bienvenido a nuestro sitio Web</h1>
      <p>¡El mejor sitio web del mundo!</p>
  </header>
  <nav>
    <h1>Navegación</h1>
  </nav>
  <section>
    <h1>Ultimas noticias</h1>
      <h2>Grandes atascos en la autovía</h2>
  </section>
</body>

Este código HTML tendría el siguiente esquema de documento:

  1. Bienvenido a nuestro sitio Web
    1. Navegación
  2. Últimas noticias
    1. Grandes atascos en la autovía

En este ejemplo, los elementos <nav> y <section> delimitan nuevas secciones dentro del esquema, pero sus nombres proceden del empleo de títulos y subtítulos siguiendo una jerarquía. De esta forma los títulos se convierten en un elemento mucho más significativo de cara a los esquemas de las páginas HTML5. El modelo de HTML5 nos permite añadir un nuevo elemento h1 por sección, de modo que cada sección de la página dispone de su propia jerarquía, tal y como se muestra el ejemplo anterior.

Una posible complicación es que a día de hoy la especificación HTML5 dice que los elementos de sección tienen que contener títulos, o de lo contrario aparecerán como “sin título” en el esquema. Por ejemplo, en el caso anterior, si borramos el elemento h1 de la sección <nav>, el esquema aparecerá así:

  1. Bienvenido a nuestro sitio Web
    1. NAV sin título
  2. Últimas noticias
    1. Grandes atascos de tráfico en la autovía

En el ejemplo de lector de pantalla que comentábamos antes, este esquema de documento no es precisamente útil puesto que la sección de navegación no lleva título. Sin embargo, documentar con títulos las secciones de navegación no es una práctica habitual para los diseñadores (incluso para muchos de ellos carecerá de sentido) y por ello conviene que sepas que esta es una de las partes de la especificación HTML5 que está, en estos momentos, en fase de revisión y depuración. Las reglas de generación de los esquemas HTML5 pueden cambiar, pero tenemos que tener en cuenta que los esquemas de documento nos permiten organizar el contenido y nos enseñan mucho acerca de la organización interna de la información y su distribución en secciones. Crear ahora un buen esquema de documento nos garantizar grandes beneficios en el futuro, cuando los navegadores empiecen a utilizarlos de forma generalizada. Los diseñadores y desarrolladores preocupados por los aspectos de accesibilidad de sus sitios web deben prestar especial atención al papel que juegan (y jugarán) los esquemas de documento.

En estos momentos el poder ver un esquema de documento HTML5 no es algo fácil puesto que no disponemos de muchas herramientas para ello. Podemos ver un ejemplo interactivo de un esquema de documento en esta página:http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad

 

 

Mejorar la accesibilidad con los roles WAI-ARIA

 

En paralelo con el avance de la especificación HTML5 se está desarrollando la Suite de Aplicaciones de Internet con Accesibilidad Avanzada (WAI-ARIA, iniciales de Accessible Rich Internet Applications), cuyo objetivo es organizar y mejorar la accesibilidad en la Web. Un capítulo de esta especificación, llamada los “landmark roles” (en español serían los “roles de señalización”) está pensada expresamente para utilizarse con elementos HTML y XHTML. Un rol de señalización es una forma de clasificar e identificar distintas partes de una página web. Por ejemplo, un rol llamado “banner” puede identificar una región que contenga la cabecera principal de la página. Podemos añadir este rol en forma de atributo al elemento <header> de HTML5:

<header role="banner">

Algunos de los roles de señalización tienen equivalentes directos con elementos HTML. Por ejemplo, el atributo role="form" se utiliza para los elementos de formulario, y el role="navigation" se aplica al elemento <nav> de HTML5. Podemos utilizar los roles de señalización ya, pero deberás revisar tu código en el futuro, para asegurarse de que su uso sea conforme con la especificación cuando el grupo que la desarrolla concluya sus trabajos.

Si quieres más información sobre el WAI-ARIA y los roles de señalización, puedes consultar la web http://www.w3.org/WAI/PF/aria/usage#usage_intro

La especificación WAI-ARIA del W3C se puede consultar en http://www.w3.org/WAI/PF/aria-practices/

La página de prácticas-aria que recomendamos incluye códigos de ejemplo y buenas prácticas para insertar roles de señalización en tus páginas web

 

Recordemos que el elemento <header> que hemos añadido antes no es un elemento de sección y no delimita una nueva sección en el esquema del documento. Por la misma razón, el elemento <footer> tampoco se considera un elemento de sección. Podemos incluir más de un elemento de pie de página en la misma página. Por ejemplo, podemos tener un pie de página para todo el sitio web y también un pie para una sección concreta. In este ejercicio simplemente vamos a sustituir el div llamado “footer” por el nuevo elemento <footer> de HTML5.

1 En tu página HTML, busca el elemento DIV que lleva el atributo ID “footer” y haz el cambio siguiente:

  <footer id="siteinfo">
  
  <p>Copyright Worldwide Apparel 2011 </p> <p>All content on this site is confidential and should not be 
shared with anyone outside of Worldwide Apparel./a></p>
</footer>

2 Abre la hoja de estilo externa base.css, busca el ID #footer y cambia su selector así:

  #siteinfo {
  clear:both;
  background-color:#FFF;
  background-image:url(images/footer_background.jpg);
  background-repeat:no-repeat;
  width:960px;
  height:128px;
  padding-top:10px;
}

3  Por debajo de esta regla existe un selector contextual para los párrafos que aparecen dentro del pie de página que tenemos que modificar. Sustituye el selector #footer p por lo siguiente:

  #siteinfo p {
  margin:10px 0 0 20px;
  width:280px;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.689em;
}

4 Guarda en disco los archivos HTML y CSS y muestra la página en el navegador. Desplázate hacia la parte inferior para ver si el pie de la página se ve como queremos. (Si la imagen no aparece, prueba a pulsar F5 para recargar el contenido y revisa si aparecen mensajes de error). En un navegador compatible con HTML5 la página debe aparecer igual que se veía antes de empezar esta práctica.

En la página utilizamos ahora el elemento <footer> HTML5.

En los ejercicios siguientes vamos a agrupar contenidos utilizando una combinación de las etiquetas que hemos visto junto con otras nuevas.

 

Incorporación de los elementos <article> y <aside>

En esta sección vamos a ver en qué consisten los elementos <article> y <aside>, empezando por el primero. La definición del W3C establece que el <article> es “una composición autocontenida dentro de un documento, página, aplicación o sitio web y que, en principio, puede distribuirse o reutilizarse de manera independiente, p.ej. mediante sindicación. Puede tratarse de un post en un blog, un texto en una revista online o cualquier otra pieza de contenido independiente”.

La clave para entender la definición anterior es el concepto “auto-contenido”. El elemento <article> está pensado para contenidos que se pueden extraer de su página contenedora. Por ejemplo, en la práctica siguiente vamos a copiar el código HTML de una página distinta, y pegarlo dentro de nuestra página de inicio.

1 En el editor de textos, desde el menú Archivo, selecciona Abrir y busca en la carpeta de la Lección 4 un archivo llamado 04_article.html. Abre esta página en el navegador. Verás que contiene información sobre lo que es un “periodo de espera” cuando una empresa sale a cotizar por primera vez en la bolsa. Aunque no es necesario que leamos todo el texto con atención, si lo revisamos podemos ver que se trata de un artículo monográfico, autónomo y que no depende de ningún recurso externo para su comprensión.

Un artículo con contenido autónomo que vamos a pegar en nuestra página web.

2 Vuelve al editor de textos y selecciona todo el código HTML del artículo pulsando Ctrl+A. Después, para copiar este contenido puedes utilizar la combinación de teclas Ctrl+C.

3 Ahora puedes cerrar el documento y volver (o abrir) el archivo 04_index_work.html. Queremos que este texto quede dentro de la sección que hemos creado en la práctica anterior, así que tenemos que encontrar el siguiente párrafo y poner el cursor detrás de la etiqueta de cierre </p>, pero antes de la etiqueta de cierre </section>. Créate un elemento <article> vacío, como se indica aquí:

    <p>The information on this site is provided to help you be a happier, more productive employee. 
If you have any questions about anything on the site or have other employee related questions, 
you can also call Jen Smith at extension 535! </p>
<article>
</article>
</section>

4 Comprueba que tienes el cursor entre las dos etiquetas de <article> y pulsa Ctrl + V o la opción de menú Edición – Pegar, y pega ahí todo el código que has copiado en el paso 2. Todo ese contenido ahora aparece dentro de un elemento “article”.

 

¿Cómo se utiliza el elemento article?

 

El elemento article de HTML5 es ideal para los casos de contenidos que pueden acabar publicados en distintos contextos o incluso en dispositivos muy variados. Por ejemplo, si publicas una entrada en un blog, los lectores normalmente acuden a ese sitio web para leerlo. A día de hoy, sin embargo, estos contenidos pueden redistribuirse de maneras muy variadas y sindicarse de muchas formas, por ejemplo mediante RSS o aplicaciones de lectura de noticias, por correo electrónico, desde aplicaciones para móviles, etc. Es decir, la estructura del contenido publicado ha de ser lo suficientemente flexible para que no sea necesario reformatearlo dependiendo del tipo de dispositivo o el entorno de publicación de destino final. El elemento article además sirve para mejorar la accesibilidad, ya que ofrece otro nuevo nivel de estructura lógica dentro de un documento.

 

5 Como ya comentamos anteriormente, en HTML5 podemos tener más de una cabecera, así que vamos ahora a añadir una nueva al contenido que acabamos de pegar. Busca la etiqueta de apertura <article> e inmediatamente después añade un nuevo elemento de cabecera al artículo:

<header>
<h2>Understanding the Quiet Period</h2>
<p>By Cheri White, posted December 21, 2012 <p>
<h3>What all employees need to know during an IPO </h3>
</header>

Además de poder poner múltiples cabeceras dentro de una página, podemos insertar también un elemento <footer> dentro del artículo para mejorar su estructura interna. Busca los datos del autor y la sección de copyright y añade lo siguiente:

<footer>

 <p> The author is an expert on SEC accounting rules and can be contacted 
<a href="mailto:cheri@smoothieworld.com">here</a>.</p>

 <p><small>&copy; copyright 2012 Cheri White</small></p>
</footer>
</article>
</section>

Guarda el archivo y muéstralo en el navegador para comprobar los resultados.

El resto de este ejercicio nos va a enseñar cómo se utiliza el elemento "aside". Podemos emplearlo de dos maneras, la primera basada en el uso habitual de las barras laterales en un sitio web y la segunda, como un área de contenidos relacionados con un elemento <section>. Vamos a empezar por la primera opción, modificando nuestra barra lateral.

6 En el archivo HTML, encuentra la etiqueta de apertura <div> correspondiente a la barra lateral:

<div id="sidebar">
<h2>Volunteer Opportunities</h2>
   . . . .

Vamos a cambiar la etiqueta <div> por una <aside> y también el nombre de ID para hacerlo más comprensible.

En el fragmento de código anterior no hemos incluido todo el código de la barra lateral para ahorrar espacio.

7 Cambia la etiqueta de apertura <div> por lo siguiente:

<aside id="secondary-content">
<h2> Volunteer Opportunities </h2>
 . . .

Este ID representa de manera más exacta la función de este contenido. Ahora, cambia también la etiqueta de cierre del div.

8 Encuentra la etiqueta de cierre original </div> de la barra lateral y cámbiala por </aside>:

<p> Prepare meals for senior citizens and individuals recovering from surgery. Learn More </p>
</aside>

9 Abre el archivo base.css y busca el selector #sidebar; ahora tenemos que cambiarlo para que se asocie al nuevo ID, "#secondary-content". Cambia el código para que quede así:

#secondary-content {
float:right;
width:300px;
background-image:url(images/sidebar_bg.png);
background-repeat:repeat-x;
 background-repeat: thin solid gray;
background-color:#FFF;
}

¿Por qué hacemos este cambio? Técnicamente no sería preciso, pero uno de los objetivos de un diseño web flexible es un correcto control de aquellos nombres que puedan tener que ver con la estructura interna de la página. El ID "sidebar" suele interpretarse como una columna lateral en una página. Pero ¿qué pasa si en algún momento queremos meter este contenido debajo de la sección principal?. El ID de la barra lateral ya no representaría bien la función de esta parte del contenido y puede provocar cierta confusión, por lo que el empleo de un ID como "#secondary-content" resulta más flexible.

10 Había algunos estilos que se utilizaban en el selector #sidebar original y tenemos que cambiarlos todos. Cambia los selectores en los tres conjuntos siguientes de reglas, y donde aparece "#sidebar", pon "#secondary-content":

#secondary-content p, #secondary-content h2, #secondary-content h3, #main p, #main h1, #main h2, #main h3,

y un poco más abajo de estas reglas:

#secondary-content h2

Realmente no hemos utilizado el elemento “aside” para la organización de secciones en nuestra página, y ahora vamos a ver el otro uso de este elemento.

11 En el archivo 04_index_work.html busca el siguiente código, que está dentro del elemento <section>:

<h3>More information on the Quiet Period<h3>
<p> Read more information on the quiet period <a href=”#”>here</a><p>

Esta parte de la página apunta a información adicional para los lectores que pueden tener interés en conocer más en detalle los temas que se comentan en el artículo, pero en realidad, en este ejemplo, apunta a la propia página (el valor href=”#” no hace nada realmente).

Una técnica muy usada para romper el flujo natural de la lectura y conducir la atención del lector hacia otro contenido es añadir un pequeño recuadro dentro de la página. En algunas ocasiones, este contenido puede ser un comentario o una frase extraída del propio artículo, que en la jerga periodística de habla inglesa se conoce como “pull quote” o simplemente “aside” y de ahí el nombre del elemento.

12 Cambia la etiqueta <div class=”articleaside”> por el elemento aside tal para que quede así.

<aside class=”moreinfo”>
<h3>More information on the Quiet Period<h3>
<p> Read more information on the Quiet period <a href=”#”>here</a><p>
</aside>

Al utilizar el elemento <aside> dentro de un elemento <section>, como hemos hecho aquí, se interpreta que el contenido tiene alguna relación directa con la propia sección. Cuando se utiliza como barra lateral como hicimos en la práctica anterior, el elemento <aside> se considera un contenido secundario sin relación directa con el contenido principal de la página. El nombre de clase “moreinfo” lo añadimos aquí para poder modificar el estilo de este contenido.

13 Vuelve a la hoja de estilos base.css y añade este código al final del archivo:

.moreinfo
{
float: right;
width: 200px;
background: #ddf;
padding: 10px;
margin: 6px;
}

Este código genera un recuadro de 200 pixels de ancho con un fondo gris. Además flota hacia la derecha, de forma que el resto del contenido aparece rodeándolo por los lados libres.

14 Guarda los archivos HTML y CSS abiertos y visualiza la página en el navegador.

El elemento “aside” de HTML5 se puede utilizar dentro de una sección para indicar un contenido relacionado

 

Los elementos <figure> y <figurecaption> de HTML5

En la especificación HTML5 puedes encontrar otros elementos nuevos que sirven para que la estructura interna de las páginas se entienda mejor. Por ejemplo, los elementos <figure> y <figurecaption> nos permiten identificar imágenes y sus rótulos dentro del contenido.

 

1 Busca la etiqueta de cierre </header> en el artículo y añade una imagen así:

<h3> What all employees need to know during an IPO </h3>
</header>
<img src="images/shhh.jpg" alt="Woman saying be quiet" />

Simplemente incorporamos la imagen a la página, pero ahora vamos a meterla dentro de un elemento <figure>.

2 Añade el elemento “figure” de esta manera:

<figure>
<img src="images/shhh.jpg" alt="Woman saying be quiet" />
</figure>

Este elemento está pensado para identificar o destacar ciertas partes de la página, como imágenes, diagramas o gráficos. Podemos además emparejar la figura con rótulo añadiendo un elemento <figcaption>.

3 El rótulo se añade de esta manera:

<figure>
<img src="images/shhh.jpg" alt="Woman saying be quiet" />
<figcaption> Quiet needed during an IPO.
</figcaption>
</figure>

Podemos modificar el estilo de los nuevos elementos igual que hemos hecho con los otros. Ahora vamos a dar formato a la figura y al rótulo dentro del artículo.

4 Abre el archivo base.css y añade esta regla para la figura:

  figure {
float:right;
padding:4px;
margin:6px;
}

Guarda los archivos HTML y CSS y visualiza la página en el navegador. La declaración de estilo hace flotar la imagen hacia la derecha y le aplica valores de margen interno y externo para separarla del resto del contenido.

El elemento <figure> flota hacia la derecha del artículo.

El tamaño del rótulo no se ve muy bien a este tamaño, así que le vamos a dar estilo también. Vuelve al editor.

5 Añade la siguiente regla de estilo debajo de la regla para figure:

  figcaption {
text-align:center;
font:italic 0.7em Georgia, "Times New Roman", Times, serif;
}

Guarda los archivos HTML y CSS y visualiza la página. Con esta regla el rótulo queda centrado y el texto se muestra en cursiva.

 

Otros elementos de HTML5

Aunque en esta lección hemos visto ya los elementos más importantes de HTML5, en la especificación hay unos cuantos más. En la tabla siguiente se resumen los elementos más novedosos y el uso al que están destinados. Además hemos destacado los elementos HTML que han sido objeto de revisión desde la versión HTML4 a HTML5.

 

  Lista actualizada de elementos HTML5  
  Elemento Descripción Atributos
  a Vínculo web globals; href; target; rel; media; hreflang; type
  abbr Abreviatura globals
  address Información de contacto para una página o sección. globals
  area Vínculo o área definible sobre un mapa de imagen. globals; alt; coords; shape; href; target; rel; media; hreflang; type
  article Composición autocontenida, reutilizable o sindicable globals
  aside Barra lateral o espacio con contenidos relacionados globals
  audio Reproductor de audio globals; src; preload; autoplay; mediagroup; loop; cotrols
  b Un segmento de texto destacado en el contexto de la frase sin que implique importancia adicional a nivel de código HTML ni cambios en tono o intensidad de la voz. globals
  base URL de base y contexto de navegación de destino por defecto para los enlaces y formularios. globals; href; target
  blockquote Una sección entrecomillada obtenida de otro origen globals; cite
  body Cuerpo del documento globals; onafterprint; onbeforeprint; onbeforeunload; onblur; onerror; onfocus; onhashchange; onload; onmessage; onoffline; ononline; onpagehide; onpageshow; onpopstate; onredo; onresize; onscroll; onstorage; onundo; onunload
  br Salto de línea incondicional globals
  button Control de botón de formulario globals; autofocus; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; name; type; value
  canvas Espacio de bitmap manejable mediante scripting globals; width; height
  caption Rótulo de tabla globals
  cite Título de un trabajo globals
  code Código de ordenador globals
  col Columna de tabla globals; span
  colgroup Grupo de columnas en una tabla globals; span
  command Comando de menú globals; type; label; icon; disabled; checked; radiogroup
  datalist Contenedor para opciones para el control de lista desplegable globals
  dd Contenido para los elementos dt correspondiente globals
  del Contenido a eliminar del documento globals; cite; datetime
  div Contenedor de flujo genérico. globals
  dl Lista de asociación consistente en cero o más pares nombre-valor globals
  dt Leyenda para el correspondiente elemento dd globals
  em Destacar texto globals
  embed Complemento embebible en la página globals; src; type; width; height; any*
  fieldset Grupo de controles de formulario globals; disabled; form; name
  figcaption Rótulo para una figura (opcional) globals
  figure Figura con rótulo opcional globals
  footer Pie de página o sección globals
  form Formulario de datos que se pueden enviar globals; accept-charset; action; autocomplete; enctype; method; name; novalidate; target
  h1, h2, h3, h4, h5, h6 Títulos de sección globals
  head Contenedor para metadatos del documento globals
  header Introducción o ayuda a la navegación para una página o sección globals
  hgroup Grupo de encabezamiento globals
  hr Línea de separación temática globals
  html Elemento raíz del documento globals; manifest
  i Voz alternativa globals
  iframe Contexto de navegación anidado globals; src; srcdoc; name; sandbox; seamless; width; height
  img Imagen globals; alt; src; usemap; ismap; width; height
  input Control de formulario globals; accept; alt; autocomplete; autofocus; checked; dirname; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height; list; max; maxlength; min; multiple; name; pattern; placeholder; readonly; required; size; src; step; type; value; width
  ins Añadido al document globals; cite; datetime
  label Rótulo para un control de formulario globals; form; for
  legend Rótulo para fieldset globals
  li Elemento de lista globals; value*
  link Enlace a metadatos externos globals; href; rel; media; hreflang; type; sizes
  map Mapa de imagen globals; name
  mark Destacado globals
  menu Menú de comandos globals; type; label
  meta Metadatos en formato de texto globals; name; http-equiv; content; charset
  meter Medidor globals; value; min; max; low; high; optimum; form
  nav Sección con enlaces de navegación globals
  noscript Contenido de fallback para scripts globals
  object Imagen, contenido de navegación anidado o complemento globals; data; type; name; usemap; form; width; height
  ol Lista ordenada globals; reversed; start
  optgroup Grupo de opciones en un control de formulario de lista desplegable globals; disabled; label
  option Opción en un control de lista o combo-box globals; disabled; label; selected; value
  output Valor calculado de salida globals; for; form; name
  p Párrafo globals
  param Parámetro de un objeto globals; name; value
  pre Bloque de texto preformateado globals
  progress Barra de progreso globals; value; max; form
  q Texto entrecomillado globals; cite
  script Código de script embebido en la página globals; src; async; defer; type; charset
  section Sección genérica de documento o aplicación globals
  select Control de lista desplegable globals; autofocus; disabled; form; multiple; name; required; size
  small Comentario en letra pequeña globals
  source Origen de contenido para vídeo o audio globals; src; type; media
  span Contenedor genérico de texto globals
  strong Importancia globals
  style Información de estilo embebida en la página globals; media; type; scoped
  sub Subíndice globals
  summary Rótulo para detalles globals
  sup Superíndice globals
  table Tabla globals; border
  tbody Grupo de filas en una tabla globals
  td Celda de tabla globals; colspan; rowspan; headers
  textarea Campo de texto multilínea (formularios) globals; autofocus; cols; disabled; form; maxlength; name; placeholder; readonly; required; rows; wrap
  tfoot Grupo de filas de pie de tabla globals
  th Celda de cabecera de tabla globals; colspan; rowspan; headers; scope
  thead Grupo de filas de cabecera de tabla globals
  time Fecha y/u hora globals; datetime; pubdate
  title Título del documento globals
  tr Fila de tabla globals
  track Subtítulos para contenidos de vídeo globals; default; kind; label; src; srclang
  u Palabras clave globals
  ul Lista globals
  var Variable globals
  video Reproductor de vídeo globals; src; poster; preload; autoplay; mediagroup; loop; controls; width; height
  wbr Posibilidad de salto de línea globals

 

Autoestudio

1 Hay algunos elementos más de HTML5 que no hemos visto en esta lección. Recuerda que la especificación HTML5 estará terminada hacia el año 2014. Si deseas consultar información más actualizada, visita los progresos en la especificación en el sitio web del W3C http://dev.w3.org/html5/spec/Overview.html

 

Repaso

Preguntas

1 Indica si es verdadero o falso: “HTML5 solo permite utilizar un elemento <header> y <footer> en la misma página”.

2 ¿Qué son los elementos de sección en HTML5? Nombra los cuatro elementos que se incluyen en la categoría de sección.

3 Define el elemento <aside> y pon algunos ejemplos de las dos formas en que se puede utilizar.

Respuestas

1 Falso. Los elementos <header> y <footer> se pueden utilizar múltiples veces dentro de una página. Por ejemplo, podemos tener una cabecera o un pie común para todo el sitio web y también cabecera o pie para cada sección.

2 En HTML5 los elementos de sección en HTML5 definen el alcance de cabeceras y pies de página y se utilizan para distribuir de forma lógica las diferentes áreas dentro de un documento HTML. Los elementos de sección también sirven para generar nuevas secciones dentro de un esquema de documento HTML5. Los cuatro elementos de sección son <section>, <nav>, <aside> y <article>.

3 El elemento <aside> se utiliza para representar una porción del contenido que suele llamarse “barra lateral”, cuando dicho contenido es independiente del que forma la base temática de la página (el contexto). Cuando aparece dentro de un elemento <section>,el elemento <aside> debería llevar un contenido relacionado de alguna manera con el contexto que le rodea, como un extracto, un resumen o similar.

 

 

 

 

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark y Silverlight son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para Microsoft por Avlade: www.Avlade.com

©2011 Microsoft Corporation.

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html