Sabemos que en nuestra lengua, la semántica se refiere al significado que tienen las estructuras y elementos lingüísticos que la componen; esto se aplica en forma similar a los lenguajes de programación.
Cuando hablamos de un lenguaje de etiquetas, como HTML, la semántica se refiere al significado que tienen los elementos. Veamos un caso concreto para comprenderlo mejor. Si pensamos en la etiqueta <h1>, sabemos que se aplica sobre títulos que tengan la máxima jerarquía en una página web. Su valor predeterminado en la representación de la mayoría de los navegadores está definido por una
tipografía Serif (por lo general, Times New Roman) y un tamaño de 2 em. Ahora bien, para la semántica, lo importante de <h1> es definir un elemento que será el título principal del contenido de esa página; los aspectos de representación son características que pueden (y deben) ser definidos desde los estilos que corresponden a CSS.
Es necesario recordar que este concepto debemos trasladarlo al resto de los elementos de HTML y tener en cuenta que su uso debe estar relacionado con el objetivo para el cual han sido creados en el lenguaje y no, en la manera en que se representan por defecto.
La Web semántica siempre estuvo en la cabeza de Tim Berners-Lee desde los comienzos de sus proyectos. Y es ahora, en esta nueva etapa de la web, con la aparición del lenguaje HTML5 como
estandarte, cuando el sueño del padre de la Web por fin comienza a tomar un papel mucho más relevante.
Con la web semántica se abren nuevos caminos. Por ejemplo, es posible que los agentes informáticos logren reconocer los elementos por su significado semántico y, posteriormente, puedan guardar esa
información para que, en otra etapa, se actúe sobre la base de ella. Esto contribuirá también a la creación de aplicaciones y dispositivos cada vez más robustos e inteligentes, que podrán resolver mayor cantidad de situaciones de manera totalmente automática.
Declaración de página y cabecera del documento
Cuando observamos una página HTML, en primer lugar encontraremos la declaración del tipo de documento. Una de las buenas noticias que nos trae HTML5 es, precisamente, la simplificación
de la declaración del tipo de documento. A partir de ahora, solo debemos indicar: <!DOCTYPE html>. Es importante recordar que esta declaración se ubica antes de escribir la etiqueta <head>.
Dentro de <head>, debemos incluir el título <title> y también las etiquetas <meta> para los metadatos.
En lo que se refiere a la etiqueta <meta>, en HTML5 soporta los atributos charset (nuevo en HTML5, permite definir la codificación de los caracteres), content, http-equiv y name, deja de soportar scheme.
Entre los atributos <meta>, es importante resaltar los valores que puede recibir name a partir de HTML5 (debemos tener en cuenta que algunos de ellos son heredados de HTML4):
- author: autor del documento.
- copyright: información de copyright del documento.
- description: descripción del documento.
- distribution: define el nivel de distribución del documento.
- generator: permite especificar con qué programa se creó el documento.
- keywords: posibilita introducir las palabras clave relacionadas con el documento (se escriben separadas por comas).
- progid: este atributo nos permite indicar la id del programa que estamos usando para generar el documento.
- rating: permite indicar el rating de la página.
- resource-type: permite indicar el tipo de recurso.
- revisit-after: permite definir la tasa de actualización de la página.
- robots: brinda la posibilidad de indicar reglas para los robots.
- others: se puede utilizar para definir names propios en el esquema.
Estructura semántica de documentos en HTML5
Recordemos que conocer el significado semántico de los elementos que componen los lenguajes que interactúan en la Web, resulta fundamental para crear cimientos sólidos para todas las páginas que conforman la estructura de nuestros sitios Web.
Como ya hemos mencionado, una de las características más valoradas de HTML5 está relacionada con la semántica. En este sentido, HTML5 introduce elementos específicos para poder definir secciones del documento y también características que pretenden hacer de la semántica una capacidad importante para el lenguaje.
En lo que se refiere a la estructura del documento, en HTML4 estábamos acostumbrados a definir las partes del cuerpo mediante el uso de la etiqueta <div>. El problema se planteaba en la imposibilidad de asignarles la semántica correspondiente a las diferentes partes. Por ejemplo, si bien podíamos aplicar una id con el valor nav o footer (barra de navegación y pie), esto no era más que el valor de un atributo y no le daba un significado semántico diferente al elemento.
A partir de HTML5 se definen etiquetas que nos permiten estructurar el cuerpo de una página con una semántica específica para cada elemento. Entre estas etiquetas encontramos:
- <header>: se utiliza para definir la cabecera de la página. No hay que confundir esta etiqueta con <head>, ya que <header> se emplea para elementos del cuerpo del documento.
- <hgroup>: brinda la posibilidad de agrupar títulos con subtítulos. Por ejemplo, en el caso de que, luego de un título <h1>, ubiquemos un subtítulo <h2> que se relaciona de manera directa con el primero.
- <nav>: esta etiqueta está pensada para definir la barra de navegación del sitio web. Aquí podremos definir enlaces internos y también hacia otros sitios. Cabe destacar que no todo conjunto de enlaces es una barra de navegación.
- <section>: se encarga de definir una sección de contenido que se representa en la página. Vale destacar que no se trata de un contenedor genérico, como puede ser un <div>.
- <article>: sirve para definir artículos o contenidos que pueden ser individualizados. Por ejemplo, se podría utilizar para contener cada noticia o post en un sitio de noticias o blog. En ese contexto, también podría utilizarse para individualizar comentarios.
- <aside>: se puede emplear para todo el resto de las cosas que se incluyen en el sitio y no está directamente relacionado con el contenido principal de dicha página (aunque sí puede estar referido de alguna manera). Puede utilizarse como sidebar en un sitio web o blog, aunque esa no es su única aplicación.
- <footer>: se utiliza para el pie de la página. Más adelante, en este mismo capítulo, veremos cómo realizar una estructura utilizando las etiquetas que analizamos.
También encontramos la etiqueta denominada <figure>, que puede actuar de manera independiente o junto con <figcaption>. A continuación, nos preocuparemos de analizar un ejemplo que agrupa
varias imágenes con un epígrafe descriptivo.
La etiqueta <time> nos permite incluir información de hora (en formato de 24 horas) o fecha del calendario Gregoriano (también podemos incluir opcionalmente la hora).
Con la etiqueta <details>, es posible describir detalles de un documento (o de algunas partes de este). Con <summary>, se puede especificar un sumario que ofrezca detalles del documento.
En lo referido al texto, debemos saber que se incorpora <mark> para indicar que un texto está marcado o destacado.
Como podemos ver, las etiquetas que nos permiten definir una estructura semántica en nuestros documentos HTML nos brindan la posibilidad de dar un paso adelante en un código mucho más
claro de leer, tanto para los desarrolladores como también para los agentes informáticos, por ejemplo, los robots de los buscadores o los dispositivos electrónicos que requieren estas particularidades para facilitar las características de accesibilidad.
Atributos soportados
Entre los atributos que soportan los elementos <header>, <hgroup>, <nav>, <section>, <article>, <footer>, <figure> y <figcaption>, encontramos algunos que se heredan de la versión 4 de HTML:
accesskey, class, dir, id, lang, style, tabindex y title.
Para estos elementos, también podemos aplicar los nuevos atributos de HTML5, entre los que figuran: contenteditable (soporta true o false y permite indicar si un elemento puede ser editado o no
por el usuario), contextmenu (permite especificar el menú contextual para un elemento), draggable (soporta true, false o auto; permite indicar si un elemento puede ser arrastrado), dropzone (soporta copy, move o link; permite indicar qué hacer cuando un ítem es arrastrado sobre ese
elemento), hidden (se utiliza para indicar cuando un elemento se encuentra oculto) y spellcheck
(tengamos en cuenta que se emplea para la ortografía y gramática de un elemento).
Por parte de <time>, entre los atributos encontramos datetime (se utiliza si la fecha y la
hora no se incluyen en el elemento y deseamos especificarlas por medio de este atributo). El otro
atributo soportado es pubdate (booleano); cuando se coloca, permite especificar si la hora y fecha del elemento son las que corresponden al documento o al elemento antecesor (<article>) que resulta más próximo.
Para cada artículo (<article>) no debería haber más de un elemento de tiempo (<time>) con el atributo pubdate definido. Por otro lado, <details> soporta el atributo open, que permite indicar si está abierto el detalle, es decir, si es visible; <summary> solo soporta los atributos globales de HTML5.
El atributo rel
En las versiones anteriores de HTML/XHTML, conocimos la importancia del atributo rel para agregarles información a los enlaces. En el caso de usar este atributo con <link>, le brindamos
más información al navegador; si lo usamos con <a>, le estaremos incluyendo datos que podrán ser útiles para los buscadores. También puede utilizarse con la etiqueta <area>.
Básicamente, el atributo rel nos permite establecer la relación entre el documento actual y el que se está vinculando.
Entre los valores que puede adquirir este atributo en el lenguaje HTML5 encontramos los que vemos en el siguiente listado:
- alternate: vincula a una versión alternativa del documento.
- archives: enlace a información histórica.
- author: enlace a información relativa al autor del documento.
- bookmark: vínculo a dirección permanente del documento.
- external: enlace a un documento externo.
- first: vínculo al primer documento de una selección.
- help: enlace a un documento de ayuda.
- icon: vínculo al icono del documento.
- index: vínculo al índice del documento.
- last: vínculo al último documento de una selección.
- licence: vínculo a la información de licencia del documento.
- next: vínculo al siguiente enlace de una selección.
- nofollow: comúnmente se utiliza para indicar que los robots de los
- buscadores no sigan el link correspondiente.
- noreferrer: se trata de un valor que permite especificar que el navegador no debe enviar referrer en las cabeceras HTTP, es decir, que no indique desde qué página se llega a la siguiente.
- pingback: la URL para hacer pingback.
- prefetch: permite indicar que el documento debe ser cacheado.
- prev: vínculo al documento previo de una selección.
- search: se encarga de establecer un vínculo a la herramienta de búsqueda del documento correspondiente.
- sidebar: se utiliza para el vínculo de los elementos secundarios del documento, los que se ubican en la sidebar.
- stylesheet: vínculo a la hoja de estilos que se importa en el documento.
- tag: etiqueta del documento actual.
- up: permite indicar que el enlace está por encima del actual en un árbol jerárquico de documentos.
Vale aclarar que, en esta lista, se incluyen tanto los valores heredados que siguen vigentes así como también los que se incorporaron a partir de la versión 5 de HTML.
Los valores bookmark, external, nofollow y noreferrer no son soportados por <link>. Por su parte, icon, pingback, prefetch y stylesheet no pueden utilizarse con <a> ni con <area>.
Estructurar una página en HTML5
Con lo que ya hemos visto en este capítulo, tenemos suficientes datos para poder enfrentar la creación de nuestra estructura de página utilizando la semántica de HTML5, aunque aún debemos
revisar muchos conceptos importantes.
