Es/Elementos estructurales del HTML

From Web Education Community Group
Revision as of 14:26, 16 May 2012 by Nrojas2 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Introducción

Ya nos hemos familiarizado con los conceptos básicos del HTML, lo contenido dentro del <head> del documento y los diferentes bloques que utilizará con más frecuencia para estructurar los distintos elementos de contenido dentro del <body>. Habiendo llegado a este punto, empezaremos a ver la estructura general del contenido HTML y las diferentes secciones que contiene la página.

Una estructura de página típica

Antes de seguir leyendo, vaya y échele un vistazo a 5-10 de sus sitios web favoritos. Seguramente tendrán un contenido, funcionalidades y apariencia muy diferentes, pero todos ellos tienen elementos comunes. Hay muy pocos sitios que, al menos someramente, no siguan el patrón de:

  • Encabezado de página (o mancheta) en la parte superior de la página, que normalmente contiene el título de encabezado más importante de la página y/o el logotipo de la empresa u organización. Esta es la gran frase resaltante en la parte superior de la página que dice de que trata el sitio web y a quién le pertenece.
  • Columna de contenido principal, que engloba el contenido o funcionalidad principal por la que usted está allí usándolo.
  • Una o más barras laterales que engloban contenido relacionado al contenido principal de la página y que cambian según se cargan nuevas páginas (por ejemplo, enlaces relacionados), o que siempre es relevante y persiste a lo largo de todo el sitio (por ejemplo, información del "carrito de compras" en un sitio de comercio electrónico).
  • Menú de navegación que abarca el ancho de la página o el alto de la página formando una columna. Este a menudo forma parte de una barra lateral o del encabezado de página.
  • Un pie de página que abarca toda la parte inferior del sitio y que contiene información secundaria como información de derechos de autor (copyright) y datos de contacto.

Vamos a visualizar esto un poco mejor con un ejemplo específico. El sitio web de Conquest of Steel (¡la banda de Chris Mills!) luce como a continuación.

Un sitio web típico de ejemplo

Figura 1: Un sitio web típico de ejemplo.

Podríamos dividirlo en las secciones que acabamos de mencionar de la siguiente manera:

El sitio de ejemplo con las diferentes secciones superpuestas visualmente

Figura 2: El sitio de ejemplo con las diferentes secciones superpuestas visualmente.

Estas secciones pueden contener cualquier número de diferentes elementos anidados; por ejemplo, un pie de página podría incluir una lista completa de enlaces, un par de párrafos y una imagen. Pero, ¿cómo etiquetamos y agrupamos estas diferentes secciones como entidades individuales para posicionarlas visualmente más adelante usando las CSS? Vamos a echarle una mirada a esto, en la siguiente sección.

Estructurando una página con HTML 4

HTML4 tiene dos elementos contenedores genericos:

  • El <div> es un contenedor de nivel de bloque que se puede utilizar para agrupar secciones de contenido de nivel de bloque.
  • El <span>es un contenedor lineal que se puede utilizar para agrupar secciones de contenido lineal.

Tenga en cuenta que los elementos <div> y <span> no tienen nigún contenido o dimensiones intrínsecas, únicamente aquellas del contenido que engloban, hasta que les aplica estilos mediante CSS o los manipula con JavaScript. Tampoco tienen semántica y la única manera de identificarlos es agregándoles un atributo class o id.

Sólo debe utilizar estos elementos cuando no hay un elemento más adecuado y semántico para etiquetar el contenido. Etiquetar los párrafos y encabezados con <div>s es algo terrible, ya que aunque puede parecer aceptable, la página será inaccesible para aquellos que utilizan lectores de pantalla (los lectores de pantalla necesitan una buena estructura de encabezados para poder navegar la página a través de ellos), además, la página será más recargada, más difícil de leer y menos eficiente para aplicarle estilos con CSS. Trate de reducir el número de <div>s y <span>s utilizados siempre que sea posible: un abuso de estos elementos da lugar a lo que llamamos "divitis".

Por lo tanto, para etiquetar el sitio de ejemplo, podría utilizar los siguientes elementos:

Htmlstructure3.png

Figura 3: El sitio de ejemplo con los correspondientes elementos de HTML4 indicados para las diferentes secciones estructurales más importantes.

El etiquetado debería verse similar al siguiente:

<body>

  <div id="header">
    <!-- el contenido del encabezado del sitio va aquí -->
  </div>

  <div id="nav">
    <!-- el menú de navegación va aquí -->
  </div>

  <div id="sidebar1">
    <!-- el contenido de la barra lateral va aquí -->
  </div>

  <div id="main">
    <!-- el contenido de la página principal va aquí -->
  </div>

  <div id="sidebar2">
    <!-- el contenido de la barra lateral va aquí -->
  </div>

  <div id="footer">
    <!-- el contenido del pie de página va aquí -->
  </div>

</body>

Realmente es así de simple. Por supuesto, no se va a ver como un sitio adecuadamente diseñado hasta que le aplique las CSS al HTML. Aprenderá mucho más sobre esto más adelante en el curso. Pero esto le brinda la integridad estructural que necesita para elaborar el diseño del sitio según lo desee.

¡Démosle la bienvenida a los elementos estructurales de HTML5!

La manera de hacer las cosas del HTML4 está muy bien, pero semánticamente podría ser mucho mejor:

  • Los seres humanos pueden distinguir los diferentes contenidos, pero las máquinas no. El navegador no ve los diferentes divs como encabezado, pie de página, etc. Los ve como divs diferentes. ¿No sería más útil si los navegadores y lectores de pantalla fueran capaces de identificar explícitamente, digamos, el menú de navegación para que los usuarios invidentes pudieran encontrarlo más fácilmente, o los diferentes artículos en un montón de blogs, de manera que pudieran ser fácilmente distribuidos en una fuente RSS sin ninguna programación adicional?
  • Incluso si utiliza código adicional para solucionar algunos de estos problemas, sólo puede hacerlo de forma fiable para sus sitios web, ya que diferentes desarrolladores web usarán diferentes nombres de clase e ID, especialmente cuando considera una audiencia internacional; diferentes desarrolladores web en distintos países utilizarán diferentes idiomas para establecer sus nombres de clase e ID.

Por lo tanto, tiene mucho sentido definir un conjunto coherente de elementos para que todos los desarrolladores los usen en los bloques estructurales comunes que aparecen en muchos sitios web, y esto es exactamente lo que se define en HTML5.

Los nuevos elementos de HTML5 que trataremos en este artículo son:

  • <header>: Usado para albergar el contenido del encabezado del sitio.
  • <footer>: Aloja el contenido del pie de página de un sitio.
  • <nav>: Contiene el menú de navegación u otra funcionalidad de navegación de la página.
  • <article>: Contiene una pieza independiente de contenido que tendría sentido al ser distribuida como un elemento RSS, por ejemplo, una noticia.
  • <section>: Se utiliza tanto para agrupar diferentes artículos en diferentes propósitos o temas, como para definir las distintas secciones de un único artículo
  • <aside>: Define un bloque de contenido que está relacionado con el contenido principal que lo engloba, pero no es fundamental para el flujo del mismo.

Discutiremos ésto con más detalle un poco más adelante, pero por ahora, veamos cómo se vería nuestro ejemplo de haberlo estructurado utilizando elementos de HTML5:

Htmlstructure4.png

Figura 4: El sitio de ejemplo con los correspondientes elementos de HTML5 indicados visualmente para las diferentes secciones estructurales más importantes.

En código, esto se vería como a continuación:

<body>

  <header>
    <!-- el contenido del encabezado del sitio va aquí -->
  </header>

  <nav>
    <!-- el menú de navegación va aquí -->
  </nav>

  <section id="sidebar1">
    <!-- el contenido de la barra lateral va aquí -->
  </section>

  <section id="main">
    <!-- el contenido de la página principal va aquí -->
  </section>

  <aside>
    <!-- el contenido del aparte va aquí -->
  </aside>

  <footer>
    <!-- el contenido del pie de página va aquí -->
  </footer>

</body>

Exploremos algunos de los elementos de HTML5 en más detalle.

<section>

El elemento <section> es para contener diferentes áreas de funcionalidad o áreas temáticas, o dividir un artículo/historia en diferentes secciones. Así que en este caso:

  • "sidebar1" contiene varios enlaces útiles que persisten en todas las páginas del sitio, como "Suscribirse a RSS" y "Comprar música de la tienda".
  • "main" alberga el contenido principal de esta página que son entradas de blog. En otras páginas del sitio este contenido cambiará.

Es un elemento bastante genérico, pero aún así tiene un significado más semántico que el viejo <div>.

<article>

<article> está relacionado con <section>, pero es claramente diferente. Mientras que <section> es para agrupar distintas secciones de contenido o funcionalidad, <article> es para contener piezas individuales de contenido independientes relacionadas, como entradas individuales de blog, vídeos, imágenes o noticias. Piense en ello de esta manera: si tiene un número de elementos de contenido que pueden ser leidos individualmente y tendría sentido distribuirlos como elementos separados en una fuente RSS, entonces <article> es adecuado para etiquetarlos.

En nuestro ejemplo, <section id="main"> contiene entradas de blog. Cada entrada de blog es adecuada para ser distribuida como un elemento en una fuente RSS y tendría sentido cuando se lee individualmente, fuera de contexto, por lo tanto <article> es perfecto para ellas:

<section id="main">
    <article>
      <!-- el contenido de la primera entrada del blog va aquí -->
    </article>
    
    <article>
      <!-- el contenido de la segunda entrada del blog va aquí -->
    </article>
    
    <article>
      <!-- el contenido de la tercera entrada del blog va aquí -->
    </article>
</section>

Sencillo ¿no? Tenga en cuenta, sin embargo, que también puede anidar secciones dentro de los artículos donde tenga sentido hacerlo. Por ejemplo, si cada una de estas entradas de blog tiene una estructura coherente de secciones distintas, entonces puede poner secciones dentro de sus artículos también. Podría ser algo así:

<article>
  <section id="introduccion">
  </section>
  
  <section id="contenido">
  </section>
  
  <section id="resumen">
  </section>
</article>

<header> y <footer>

Como ya hemos mencionado anteriormente, el propósito de los elementos <header> y <footer> es envolver el contenido del encabezado y el pie de página respectivamente. En nuestro ejemplo en particular el elemento <header> contiene una imagen de logotipo y el elemento <footer> contiene un aviso de derechos de autor, pero podría agregar contenido más elaborado si así lo desea. También tenga en cuenta que puede tener más de un encabezado y pie de página en cada página, así como el encabezado de nivel superior y el pie de página que acabamos de mencionar, también podría tener un elemento <header> y <footer> anidados dentro de cada <article>, en cuyo caso, estos sólo se aplicarían a ese artículo en concreto. Agreguémoslos a nuestro ejemplo anterior:

<article>
  <header>
  </header>

  <section id="introduccion">
  </section>
  
  <section id="contenido">
  </section>
  
  <section id="resumen">
  </section>
  
  <footer>
  </footer>
</article>

<nav>

El elemento <nav> es para etiquetar los enlaces de navegación o de otras construcciones (por ejemplo, un formulario de búsqueda) que le llevarán a diferentes páginas del sitio actual o a diferentes áreas de la página actual. Otros enlaces, como enlaces patrocinados, no cuentan. Por supuesto, puede incluir encabezados y otros elementos estructurales dentro de <nav>, pero no es obligatorio.

<aside>

Quizá haya observado que utilizamos un elemento <aside> para etiquetar la 2da barra lateral; la que contiene los últimos conciertos y detalles de contacto. Esto es perfectamente apropiado, ya que <aside> es para etiquetar piezas de información que están relacionadas con el flujo principal, pero no entran en él directamente. Y en este caso, ¡el contenido principal es información de la banda!

Otras buenas opciones para un <aside> serían: información sobre el autor de las entradas del blog, una biografía de la banda o una discografía de la banda con enlaces para comprar sus discos.

¿Y dónde quedan los <div>s?

Así, con todos estos magníficos nuevos elementos para usar en nuestras páginas, los días del humilde <div> están contados, ¿verdad? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Debe utilizarlo cuando no hay ningún otro elemento más adecuado disponible para agrupar un área de contenido, lo que a menudo sucederá cuando use un elemento para agupar contenido con el único fin de aplicarle estilos. Un ejemplo común es el uso de <div> para envolver todo el contenido de la página y luego utilizar CSS para centrar todo ese contenido en la ventana del navegador o aplicarle una imagen de fondo específica a todo el contenido.

Soporte de elementos de HTML5

Bien, en este punto debo admitir algo. Actualmente no hay mucho soporte para los elementos estructurales de HTML5 en los navegadores web de hoy día. Pero antes de que huya a las montañas gritando "¿por qué nos hizo perder el tiempo con toda esta basura?", solo siéntese y escuche lo que tengo que decir. Sí, la falta de soporte para estas características a través de los diferentes navegadores es menos que ideal, pero en realidad no importa mucho para nuestros propósitos.

La forma en que los elementos funcionan en general entre HTML 4 y HTML5 es exactamente la misma, es sólo que los nombres de los elementos son diferentes. Como ya ha visto anteriormente, es fácil convertir una estructura de HTML5 a una estructura de estilo HTML 4: puede sustituir los elementos de HTML5 por <div>s con los IDs adecuados para que sean fácilmente identificables a fin de aplicarles estilos, etc.

Y puede hacer que los elementos de HTML5 funcionen en todos los navegadores de hoy en día con el mínimo esfuerzo:

En primer lugar, si coloca un elemento que el navegador no reconoce en una página web, por defecto el navegador lo tratará como a un <span>, es decir, un elemento lineal anónimo. Se supone que la mayoría de los elementos de HTML5 que hemos analizado en este artículo se comportan como elementos de bloque, por lo que la manera más fácil de hacer que se comporten correctamente en los navegadores más antiguos es asignándoles display:block; en las CSS. Puede hacer esto mediante la inclusión de la siguiente regla CSS en la parte superior de su hoja de estilos CSS, tanto si se encuentra en la seccion head de su archivo HTML, como en un archivo CSS externo:

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

Esto soluciona todos sus problemas para todos los navegadores excepto uno. Las versiones antiguas de Internet Explorer se niegan a permitir la aplicación de estilos a elementos desconocidos, pero esto puede resolverse mediante la inserción de una línea de JavaScript en el encabezado de su documento para cada elemento, así:

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header'); 
    document.createElement('footer');
    document.createElement('figure');
    document.createElement('figcaption'); 
</script>

Ahora IE aplicará mágicamente estilos a esos elementos. Es un problema tener que usar JavaScript para hacer que sus CSS funcionen, pero bueno, ¡al menos tenemos una calle de salida! ¿Por qué funciona esto exactamente? TODAVÍA hay un problema con estos estilos al no ser enviados a la impresora cuando intenta imprimir documentos de HTML5 desde IE. Este problema de impresión puede resolverse utilizando la biblioteca de JavaScript HTML5 Shiv, que también se ocupa de añadir las líneas document.createElement por usted. Debe incluir esto en Comentarios condicionales para IE anteriores a IE9 y así los navegadores modernos no ejecutarán JavaScript que no necesitan.

No se preocupe si no entiende esto ahora. Esto se hará más claro a medida que avance a través del Curriculum de estándares web.

Entonces, ¿Cuál elegir?

Quizá se esté preguntando qué estilo de elementos estructurales elegir ahora que ha hecho un recorrido por las dos opciones. Le aconsejamos aprender ambas y utilizar los elementos de HTML5 donde pueda, degradando a elementos de HTML 4 en proyectos donde le preocupe el soporte de JavaScript que pueda tener la audiencia del sitio (Recuerde que la corrección para HTML5 examinada anteriormente requiere JavaScript para que funcione), o donde no pueda utilizar HTML5 (por ejemplo, debido a que los requerimientos exigen el uso de HTML 4 o porque está utilizando algún tipo de sistema de gestión de contenido que no funciona con HTML5).

De esta manera, puede trabajar con lo que se le presente en diferentes proyectos, además, sus sitios HTML5 estarán bien preparados para el futuro, cuando los navegadores comiencen a soportar los elementos estructurales de HTML5.

Resumen

Esto nos conduce al final de nuestro recorrido a través de los elementos estructurales de HTML. Una vez más, ¡no se preocupe si no entiende esto ahora mismo! He facilitado un par de plantillas que contienen todo el código que hemos visto en este capítulo.

Preguntas de repaso

  1. Usando mis plantillas como base, cree una estructura HTML para uno de los siguientes sitios. Piense en qué cosas diferentes pueden tener esas páginas en términos de encabezado, pie de página, navegación, contenido principal, barras laterales, etc. Observe los ejemplos existentes si es necesario.
  • Una página de listado de productos de un sitio de comercio-e (ej.: listado de resúmenes de los diferentes productos disponibles)
  • Una página de menú de un restaurante
  • La página de una noticia completa en un sitio de noticias (ej.: una noticia cuando se muestra completa, no resumida)
  1. ¿Qué contenido sería adecuado colocar en el encabezado y pie de página de una entrada de blog contenida en un artículo?
  2. ¿Qué elemento debe utilizar para la columna de contenido principal si JavaScript está desactivado?