Guía: los nuevos elementos estructurales del HTML5

By 27 mayo, 2015 Guías, Programación web
elementos estructurales del HTML5

¿Que es el HTML5?

HTML5 (HyperText Markup Language, versión 5) es la quinta versión del lenguaje básico de la www (World Wide Web). HTML5 especifica especifica sintaxis: el clásico conocido como HTML (text/html) y la variante XHTML también conocida como XTML5 (servida como XML).
Tanto HTML como XHTML se están desarrollando en paralelo.

Se publicó en el 2014 y todavía no es reconocido por la antiguas versiones de los navegadores. Estos no entienden sus nuevas etiquetas, por ello, desde Mimedu aconsejamos actualizar a la última versión de nuestros navegadores para disfrutar de todo el potencial que nos ofrece HTML5 (recordemos que los elementos estructurales del HTML5 son nuevos y por tanto los navegadores sin actualizar no los entienden).

El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.

¿Por qué hacen falta nuevos elementos estructurales?

Los nuevos elementos estructurales del HTML5 traen consigo muchas ventajas. Las más importantes, desde mi punto de vista, son:html5 fuerte

    • Mejora de la accesibilidad
    • Ayuda a las prácticas SEO
    • Web 3.0 o web semántica
    • Internacionalización
    • APIs más sencillas que mejoran la interoperabilidad.
    • Código comprensible.

Como desarrollaron los nuevos elementos estructurales del HTML5

    • Se analizaron las apariciones de determinadas clases por medio de las herramientas de Google.
    • Se estudió la MAMA’s list de Opera para analizar id y otros atributos que el estudio de Google ignoraba.
    • Se definieron los elementos considerados más representativos del contenido.

Cuales son los nuevos elementos estructurales del HTML5

<header>

  • Añade una valiosa información semántica a las páginas y/o secciones
  • Pueden crearse varios header en una página
  • Puede incluir elementos nav en su interior.
  • Suelen contener, por lo menos, un elemento de encabezado (h1-h6). Si contiene más de uno, se agruparán con el elemento estructural hgroup.
  • Debe de espicificarse mediante CSS que, el elemento estructural header, es un elemento de bloque (display: block)*

* Los normalize para html5 y hojas genéricas de reset ya tienen en cuenta estos factores en los nuevos elementos estructurales del HTML5. Aun así, sigo sin recomendar su uso.

Ejemplo:Mimedu diseno web header

<article>
  <header>
    <h1>Guía: los nuevos elementos estrucurales del HTML5</h1>
    <p>Por mimedu</p>
  </header>
  <p>Contenido</p>
</article>

<section>

  • Se emplea para dividir el contenido de una página en función de la temática (Diseño web, programación web, tiendas online…).
  • También sirve para dividir el contenido de un artículo en subapartados (Introducción, contenido, conluciones…)
  • El elemento estructural <section> suele contener un encabezado de cualquier nivel (h1-h6)

Importante: no confundir <section> con <article> ni usarlo para agrupar elementos.

Ejemplo:Mimedu diseno web section

<section>
    <h1>Diseño Gráfico</h1>
    <p>Logotipos, carteles publicitarios, web, ilustraciones, flyers… </p>
</section>

<article>

  • Se utiliza para definir piezas de contenido con significado propio
  • Son elementos estructurales básivos de sindicación
  • No hay que relacionarlo solo con el texto, pueden contener videos o otros elementos básicos que por sí solos tengan sentido
  • Normalmente suelen contener encabezado

Importante: <article> es uno de los elementos estructurales del HTML5 más confusos, ya que se suele confundir con <section>. Tampoco hay que usarlo para agrupar elementos.

Ejemplo:Mimedu diseno web article

<article>
    <h1>Diseño Web</h1>
    <p>El diseño web es una forma de comunicación, por …</p>
</article>

<aside>

  • Se emplea para identificar fragmentos de contenidos sin aparente relación con el contenido principal, aunque sí que están <<tangencialmente relacionados>>
  • Puede aplicarse a la hora de marcar listas de enlaces relacionados, información ampliada, tips o consejos, citas, titulares o resumentes, definiciones…
  • Tienen que tener significado por si mismos
  • El contenido principal, sin el elemento <aside>, debe de mantener su significado

Importante: no hay que confundirlo con un sidebar. En ocasiones se utiliza de forma errónea para identificar el contenido situado en una columna lateral.

Quizá el error provenga de la propia especificación del w3c: «… este tipo de secciones son a menudo representadas como sidebars en tipografía impresa.» Lo que olvida de aclarar el w3c es que, con tipogra impresa, se refiere a documentos impresos, como revistas, donde el contenido del sidebar sí se corresponde con su definición semántica en HTML5.

Ejemplo:Mimedu diseno web aside

<aside>
    <h4>Destacado</h4>
    <p>Documentos que serán de su interes</p>

<div>
</aside>

<footer>

  • Se utiliza para contener el pie de página
  • Puede haber varios footer. Cada <article> o <section> puede contener el suyo.
  • La etiqueta <footer> no hace referencia a su ubicación, sino al tipo de contenido de almacena: copyright, autoría, comentarios, fecha de publicación…

Ejemplo:Mimedu diseno web footer

<footer>
    <p>Me puedes encontrar en:</p>
    <p>Información de contacto: <a href=“mimedu@mimedu.es”>Correo de Mimedu</a>.</p>
</footer>

<nav>

  • El contenido de este elemento debe de corresponderse con la navegación principal de la página donde nos encontremos.*
  • Suele contener una lista, aunque no es obligatorio.
  • Pueden existir varios elementos <nav> en una página: para la navegación principal o para la navegación principal de una <section> o <article>
  • Se pueden utilizar para paginaciones, formularios de búsqueda, TOCs, breadcrumbs

* Importante: los enlaces patrocinados no se consideran elementos de navegación, así como los enlaces dentro del texto de un artículo o los enlaces en el pie hacia otras páginas del sitio.

Ejemplo:Mimedu diseno web nav

<nav>
     <a href=“/diseno web/”>Diseño web</a>
<a href=“/portfolio/”>Portfolio</a>
<a href=“/blog/”>Blog de Mimedu</a>
<a href=“/contacto/”>Contacto</a>
</nav>

<hgroup>

  • Es un contenedor de encabezados de modo que solo cuente el de nivel superior, ignorando los restantes de cara a la creación de la estructura jerárquica del documento.
  • Se usa cuando el título va acompañado de un subtítulo y queremos que el primero sea el principal.
  • Solo puede contener encabezados (<h1>-<h6>)

Ejemplo:Mimedu diseno web hgroup

<hgroup>
     <h1>Diseñador web</h1>
<
h2>Mimedu</h2>
</hgroup>

<figure>

  • Incluye el contenido que queremos tratar como una figura: ilustraciones, diagramas, infografías…
  • Puede ser una imagen, una serie de imágenes o su combinación con otros elementos como texto, video…
  • No todas las imágenes son <figure>
  • Debe de tener contenido que por sí mismo tenga significado como unidad; y que si lo eliminamos no modifique sustancialmente el contenido del elementos donde se encuentra.

Ejemplo:Mimedu diseno web figure

<figure>
     <img src=“mimedu_foto.jpg” alt=“Mimedu” width=“304” height=“228”>
</figure>

<figcaption>

  • Es el titulo o nombre del elemento <figure>
  • No es obligatorio incluirlo
  • Solo puedo existir uno
  • Puede contener otros elementos como enlaces de autoría, etc.

Ejemplo:Mimedu diseno web figcaption

<figure>
     <img src=“mimedu_captura.jpg” alt=“Mimedu principal” width=“304” height=“228”>
     <figcaption>Página principal</figcaption>
</figure>