HTML5 – La semántica, su principal novedad

Realmente HTML5 trae bastantes novedades respecto a su predecesor, pero creo que la principal novedad que trae, y pienso que eclipsa al resto, es su capacidad semántica.

Deberíamos decir que también son muy importante el giro que da, para retirar todas las etiquetas que van a controlar el formato, y así hacer mas limpia la división entre contenido y aspecto, o la propuesta de cerrar todas las etiquetas, que nos permite una programación mas clara y estable, pero, desgraciadamente, la compatibilidad hacia atrás,hace que esos dos aspectos sean solo sugerencias, que muchos programadores se van a seguir pasando por alto.

Sin embargo, donde aparece una mejora que no se ha de preocupar de que sea compatible con versiones anteriores, es en la colección de etiquetas pensadas para establecer el significado de cada parte de la pagina.

Si pensamos en una pagina web, pensamos una estructura como

parte Ahora se identifica en HTML5
cabecera Podiamos indicar un id=header, o una class=header <header>
menu Utilizábamos  un id=menú, o nav, o una clase con nombre semejante <nav>
cuerpo un class=article o section <article><section>
barra lateral normalmente ni la identificabamos <aside>
Pie una class o id =footer <footer>

En resumen, hasta ahora, cada una de esas partes las construíamos utilizando etiquetas “div” que no aportaban identificación semántica alguna, y el nombre que le pudiéramos dar en “id”, o a la clase, no eran mas que valores de atributo que poco se tenían en cuenta.

En HTML5, podemos, (y debemos muchas veces) renunciar a la etiqueta div, a favor de la que define el significado de la zona. Esto hace, por un lado, disponer de un código mucho mas claro de leer, cosa muy importante, pero, y todavía mas importante, facilita que los buscadores, o cualquier maquina, pueda entender mucho mejor nuestra pagina, y valorar cada sección en su justa medida.

Planteémonos una pantalla como esta:

estructura semantica en html5y vamos a ver como construimos esta estructura en nuestro código fuente. Os propongo que creéis la carpeta “ejercicio2“:

  • Ir a menú “Archivo
  • Seleccionar Abrir nueva carpeta
  • Marcar la carpeta “curso
  • click en “Crear nueva carpeta
  • Ponerle el nombre ejercicio2
  • aceptar
  • aceptar

Siguiendo las instrucciones del capitulo anterior, creamos dos ficheros en la nueva carpeta; el fichero index.html, y el fichero estilos.css (archivo nuevo,..botón derecho, guardar….)

En index.html, podemos crear el “head” como hicimos en el ejercicio anterior, solo he cambiado el titulo, y ademas, he dejado enlazado el fichero de estilos.

estructura semantica

 

A partir de este punto, vamos a empezar a crear nuestra página. Primero el header:

header_html5

La etiqueta header agrupa todo aquello que tiene una especial relevancia respecto a lo que le acompaña, en este caso, toda la página. Como voy a utilizar titulo (h1) y subtitulo (h2), añado también una etiqueta hgroup, para indicar que todas las cabeceras que hay en el interior (h1….h6) forman un grupo homogéneo

Dentro de “header” hubiéramos podido añadir cualquier elemento que estuviera relacionado con la cabecera del sitio (imágenes, notas,….)

El paso siguiente es definir los bloques correspondientes al menú de la izquierda, el cuerpo y la barra de la derecha:

Como estos tres elementos deben estar juntos, me interesa agruparlos en un contenedor, pero como no es un tema semántico, (los agrupo para controlar su presentación, no porque tengan un sentido conjunto), utilizo una etiqueta clasica “div”. Esta etiqueta me crea una caja, y dentro estarán mis tres componentes; a la caja creada con el “div” la llamaré “contenedor”

section_y_article

En el grupo 1, están todas las cajas de esa zona de pantalla; insisto en que la unión no se realiza por contenido, si no para controlar su ubicación en el monitor, es por eso que utilizo una etiqueta sin valor semántico como es una “div”

El grupo 2 es el menú de navegación; en un caso real, debería incluir enlaces, pero para este ejemplo, solo incluyo una lista desordenada, para que parezca un menú. Dado que se trata de un supuesto sistema de navegación, lo recubro con la etiqueta “nav”

El grupo 3 se compone de una colección de artículos sobre el mismo tema. por eso los agrupo bajo un “section”. La etiqueta “section” me permite fraccionar la información en grupos, y tiende a confundirse con article…

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. […]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Según esto, el “article” es la fracción mas pequeña de información que se puede utilizar fuera de un contexto y tiene sentido propio, y “section” me permite agrupar “article”

En el grupo 4 estrenamos etiqueta. “aside” nos permite recubrir aquellas zonas de la s paginas que no tienen una relación clara con el resto del contenido. Por ejemplo, en este caso, la utilizamos para la zona correspondiente a la barra lateral que normalmente tendrá publicidad, listas de enlaces,….

Los grupos 5,6 y 7 se tratan de “article”, en nuestra simulación, podrían ser las distintas noticias de un periódico. Fijaros también, que dentro del 5, he creado un “header”, el “article” como tal en una etiqueta “p”, y un “footer”. Realmente en un articulo tan pequeño no tiene sentido, y esta hecho con la única intención que se pueda ver que los “header” y “footer” se pueden utilizar dentro de cualquier etiqueta, manteniendo el sentido de cabecera de la etiqueta, y pie de la etiqueta, pudiéndose anidar tanto como tenga sentido.

En el 6, he utilizado otra de las nuevas etiquetas “mark” le indica al navegador que el texto que se encuentra incluido, debe ser marcado.

Por ultimo, al final del listado, ya he escrito también el “footer”, en nuestro caso representa el pie de la pagina.

Si pulsáis para ver la vista previa de la pagina:

2014-08-12_13h07_05

 

Veréis una imagen que quizás no esperéis….pero así son las cosas. Hemos ido preparando nuestra pagina cuidadosamente para que semánticamente sea correcta, pero eso no tiene que ver con la visualización, de forma que veréis algo como esto

vista_semantica_sin_css

 

 

Pero…. no os desesperéis, en el siguiente articulo, crearemos las reglas css que nos permitirán mostrar “todo eso” como queríamos en un principio.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Diseño, Formacion, HTML5 y etiquetada , . Guarda el enlace permanente.

4 respuestas a HTML5 – La semántica, su principal novedad

  1. gsanchezd dijo:

    El artículo es bueno, pero el título definitivamente lo cambiaría, HTML5 tiene novedades mucho más potentes que etiquetas semánticas, partiendo desde el canvas hasta el soporte nativo de videos.

    • Miguel dijo:

      Hasta este momento, de una forma o de otra, se podían hacer la mayor parte de las cosas….excepto explicar el contenido de las paginas, dejando aparte los pequeños experimentos con los microdata.Es desde ese punto de vista, que pienso que el gran avance, esta ahi. Pero reconozco que es una opinion personal. Para alguien que este interesado en la web grafica, vera las mejoras en otros puntos, Para quien se centre en móviles encontrara otros….
      De cualquier forma, para mi, lo mas importante ahora es que te haya gustado el articulo. Gracias por comentar

  2. camilo quiroga dijo:

    muy bueno el aporte, me gustaría saber que programa estas utiizando en los screenshots que pones gracias

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.