| |
|---|
|
|
- Semántica
- Evolución del HTML
- Html semántico desde su inicio
- Declaración de página y cabecera del documento
- Estructura seántica de documentos en HTML5
- Header
- Hgroup
- Nav
- Main
- Section
- Article
- Aside
- Footer
- Atributos soportados
- El atributo Rel
- Estructurar una página en HTML5
- Adaptar la estructura semántica
- Pensar la estructura de páginas HTML5 desde Cero
- Compatibilidad
- Microdatos
- SEO
- Resumen
- BIBLIOGRAFÍA
Semántica
¿Conoces el concepto HTML Semántico?. Por el mismo, nos referimos al uso de las etiquetas HTML para reforzar la semántica, o el significado, de la información en las páginas web más que simplemente redefinir su forma de presentación (apariencia). El HTML semántico es procesado por los navegadores web regulares así como por muchos otros agentes de usuarios.
Para entender el HTML semántico podemos comenzar por revisar el significado de semántica: La semántica es la parte de la lingüística que estudia el significado que tienen las estructuras y elementos lingüísticos que la componen; esto se aplica en forma similar a los lenguajes de programación. La semántica en el HTML y HTML5 se refiere al significado o información extra que otorgan los elementos o etiquetas del lenguaje, información que define o describe el contenido, función o sección que contienen.
Esta información es lo que permite que un documento se pueda rastrear de mejor manera. Ayuda a que el contenido se muestre de manera consistente en diferentes aplicaciones y contextos, además de ser fundamental para otorgar accesibilidad y funcionalidad con tecnología de asistencia como lectores de contenido.
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.
Otro ejemplo que expone la función semántica de refuerzo del HTML5, es el referido a estándares recientes de HTML que no recomiendan el uso de etiquetas presentacionales como <i> ya que prefieren etiquetas más específicas como <em> (énfasis); las hojas de estilo CSS deberían entonces especificar cuando el énfasis es denotado por una fuente cursiva, una en negritas, subrayada, etc. Esto es porque las cursivas son usadas para otros propósitos además de hacer énfasis, como citar una fuente; para esto, HTML 4 provee la etiqueta <cite>. Otro uso de las cursivas es para citar frases; los diseñadores web pueden usar los atributos del lenguaje XHTML3 o especificar sus propias etiquetas semánticas escogiendo apropiadamente nombres para los valores de los atributos de los elementos de HTML como class (e.g. class="loanword"). Marcar el énfasis y las citas, hace mucho más fácil en muchas maneras para agentes de usuario como motores de búsqueda y otras aplicaciones que se interprete de forma correcta el significado del texto.
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.
IR A PORTAFOLIOEvolución del HTML
En un principio el contenido de las páginas de internet se formateaba y acomodaba utilizando tablas, lo cual restringía bastante las posibilidades en diseño y producía páginas poco atractivas.
Seguidamente se expone un ejemplo de una página web en los 90s:
El código evolucionó y aparecieron las elementos <div> un contenedor genérico al cual se le da estilo, diseño utilizando un nuevo lenguaje de apoyo, CSS.
También aparecieron las primeras elementos con valor semántico. Ejemplo de esto es el elemento <p> utilizado para señalar que el contenido que contiene se debe interpretar como un párrafo.
Este gran paso para adelante permitió que la creatividad se libere, y los sitios pasaron de un conjunto de tablas rígidas a un universo de contenedores <div> y elementos que cambian de forma y posición de acuerdo a las reglas de CSS que le dan su formato.
Un ejemplo ideal de este principio es la página CSS zen garden un sitio al cual le puedes intercambiar el archivo de CSS para otorgarle una apariencia totalmente diferente mientras el contenido no cambia. IR A PORTAFOLIO
HTML semántico desde su inicio.
Desde su inicio el HTML añade significado semántico a el código que comprende un sitio web.
Ciertamente, HTML tiene incluido el marcado semántico desde su creación. En un documento HTML, el autor puede, entre otras cosas, "empezar con un título; añadir encabezados y párrafos; poner énfasis en el texto; insertar imágenes; añadir vínculos a otras páginas; y usar varios tipos de listas".
Llegó un tiempo en que HTML también incluía marcado de presentación con las etiquetas <font>, <i> y <center>. También existen las etiquetas neutrales semánticamente hablando como <span> y <div>.
Desde el final de los 1990s cuando las hojas de estilo comenzaron a trabajar en la mayoría de los navegadores, los autores web fueron alentados a evitar el uso de marcado de presentación de HTML con el objetivo de lograr la separación entre la presentación y el contenido.
Con etiquetas como <h1> , <p>, <img> , etc… el desarrollador puede designar un título, añadir encabezados y párrafos e insertar imágenes para así dar forma al documento.
En el HTML cada elemento tiene su propio modelo de contenido, el cual describe el tipo de contenido que este debe contener.
Los modelos de contenido se dividen en las siguientes categorías
- Elementos para seccionar
- Elementos de metadata
- Interactivos
- Fraseo, de títulos
- Elementos para incrustar
- Algunos de estos elementos pueden pertenecer a dos o más categorías por su función y definición.
Al dividir el contenido en secciones por temas o funcionalidad, logramos visualizar el esquema del documento.
Antes del lanzamiento del HTML5 la mejor manera para describir el esquema o índice del contenido, era utilizando los elementos de títulos que van del <H1> al <H6>. En verdad hoy siguen siendo muy importantes para identificar y generar secciones dentro del contenido.
Aplicar estas etiquetas de títulos correctamente es fundamental para optimizar el contenido para los buscadores y uno de los elementos más importantes en el checklist del On-page SEO.
Los autores pueden otorgar diferente peso y relevancia a las secciones del contenido utilizando el número correspondiente en el título al inicio de dicha sección.
Utiliza el <h1> para el título del artículo o página y <h2> a <h6> para dividir el contenido interno de acuerdo al esquema del documento.
Otro elemento esencial es la etiqueta <head> que funciona para designar el espacio dentro del documento donde se alberga los elementos que configuran y preparan el documento para ser visualizados correctamente.
Al definir todos los elementos del estándar, hay una finalidad específica para cada etiqueta y, como analizaremos más adelante, su representación puede ser modificada según el dispositivo de salida.
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.
En este capítulo, profundizaremos sobre la semántica de HTML5 y veremos cómo es posible comenzar a construir la estructura de nuestro sitio aprovechando las características mencionadas.
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: defi ne el nivel de distribución del documento.
• generator: permite especifi car 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 defi nir la tasa de actualización de la página.
• robots: brinda la posibilidad de indicar reglas para los robots.
• others: se puede utilizar para defi nir names propios en el esquema.
A continuación, vemos cómo aplicar el título y las principales opciones de la etiqueta de metadatos en el encabezado de un documento. De esta forma estaremos preparados para enfrentar la creación de un documento teniendo en cuenta estos importantes elementos.
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 signifi cado semántico diferente al elemento.
Con el lanzamiento del HTML5 surgieron nuevos elementos enfocados en aumentar el poder semántico y estructural del lenguaje. <article>, <aside>, <nav>, <section>, <footer>, <header> y <main>
Nuevos elementos como <main> o <nav> que describen secciones de una página de Internet y nuevos elementos como <figure> o <time> que describen el tipo de contenido que contienen.
Entender el significado semántico de estos nuevos elementos permite estructurar con detalle el esquema del documento. Lo que ayuda al lector a visualizar y entender mejor el contenido.
Además permite a personas con discapacidad, navegar y consumir tu contenido con mayor facilidad. Además que ayuda a los buscadores como Google rastrear y entender mejor el contenido de tu sitio de internet.
Con el surgimiento de los asistentes digitales y la búsqueda por voz, hoy en día la semántica en el código de tu página es fundamental.
Puntualizando: 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, ya citadas anteriormente, y las que se comentan sucintamente de seguido:
-
IR A PORTAFOLIO
- definir la cabecera de la página.
- agrupar las piezas de introducción del contenido.
<Header>
Se utiliza para:
Los elementos que encontramos dentro de la cabecera o introducción de una página de Internet generalmente son: Elementos de identidad o branding como el logotipo, nombre de la organización, slogan y elementos de navegación del sitio.
No hay que confundir esta etiqueta con <head>, ya que <header> se emplea para elementos del cuerpo del documento.
IR A PORTAFOLIO<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. IR A PORTAFOLIO<Nav>
Esta etiqueta está pensada para definir la barra de navegación del sitio web, muy importante utilizarlo en el menú principal. 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> <header> <h1>Título de sección - noticia </h1> <nav><a href=”#”>menu1</a><a href=”#”>menu2</a>>a href=”#”>menu3</a></nav> </header> </section> IR A PORTAFOLIO<Main>
Utilizado para indicar el contenido más importante de la página, este nuevo elemento resulta muy importante para los lectores de pantalla y dispositivos de asistencia a discapacitados. Lo importante es utilizarlo para agrupar justo el contenido deseado y no agrupar aquí elementos que estén fuera del tema principal de la página como, anuncios y las barras laterales. IR A PORTAFOLIO
<section>
Esta etiqueta tiene un valor semántico más general y es utilizada para agrupar secciones o subsecciones de contenido que se representa en la página.
El significado de que es una sección se vuelve muy personal y subjetiva. Lo importante es tener consistencia en tu propia definición y uso de la elemento.
Vale destacar que no se trata de un contenedor genérico, como puede ser un <div>. IR A PORTAFOLIO
<Article>
Sirve para definir artículos o contenidos que pueden ser individualizados, ya que por sí solos tienen razón de ser y significado.Un buen ejemplo es utilizarlo en un blog para agrupar cada uno de las noticias o publicaciones.
Ejemplo: <article> <h2>título del artículo 1</h2> <p>contenido del artículo 1</p> </article> <article> <h2>título del artículo 2</h2> <p>contenido del artículo 2</p> </article>
En ese contexto, también podría utilizarse para individualizar comentarios. IR A PORTAFOLIO
<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.
Por ejemplo, las barras laterales con contenido como anuncios o los artículos más populares.
En concreto, dentro de esta etiqueta va el contenido que está fuera del tema principal del tema principal de la página. IR A PORTAFOLIO
<Footer>
Se utiliza para el pie de la página y generalmente contiene los avisos legales, información de derechos de autor e información de contacto. Por lo general también es la última sección de la página. <main> <section> <article> <h2>título del artículo 1</h2> <p>contenido del artículo 1</p> </article> <article> <h2>título del artículo 2</h2> <p>contenido del artículo 2</p> </article> </section> <aside> <p>barra lateral</p> </aside> </main> <footer> <p> aviso de privacidad </p> </footer>
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.
IR A PORTAFOLIOAtributos 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. IR A PORTAFOLIO
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.
• fi rst: 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 especifi car 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>.
IR A PORTAFOLIO
Estructurar una
página en HTML5
Con lo que ya hemos visto en este capítulo, tenemos sufi cientes 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.
Ahora bien, el primer dilema que deberemos resolver es si vamos a
trabajar con un proyecto existente, migrándolo desde HTML4/XHTML
a HTML5, o bien arrancaremos desde cero con el uso de HTML5. A
continuación, analizaremos ambas alternativas.
IR A PORTAFOLIO
Adaptar la estructura semántica
Antes de migrar hacia HTML5, debemos plantearnos si el desarrollo del sitio está lo sufi cientemente sólido en XHTML. Es decir, un maquetado realizado con tablas, errores semánticos, códigos mal estructurados, estilos aplicados inline y etiquetas que no cierran, sin dudas, no resulta un buen punto de partida. Si nuestro desarrollo se encuentra en este estado, es mejor considerar un comienzo desde cero y saltar al siguiente apartado de este capítulo.En caso de contar con un código limpio, creado a conciencia y que respeta las reglas de XHTML, tendremos una base interesante para que podamos realizar la migración a HTML5 de mejor forma y, sobre este patrón, nos basaremos en este caso.
A continuación, veremos un código de ejemplo de estructura en HTML4 simple, basada en etiquetas <div>:
En este ejemplo, el lector podrá ver que se utilizaron comentarios
HTML (se inician con ) para indicar el principio
y el fi nal de cada bloque. El uso de estos comentarios puede ser útil
cuando se trabaja con códigos extensos.
En el código que presentamos a continuación, veremos la estructura adaptada a la semántica propia de HTML5:
En nuestro ejemplo, observamos que la semántica de HTML5 aporta mucha claridad y no se requiere la presencia de comentarios para un caso como este. No obstante, los comentarios que se utilizaban en HTML siguen vigentes en la quinta versión de este estándar y son recomendables para códigos que lo ameriten, en especial en sitios que cuentan con muchas páginas y en los que se trabaja en equipo. IR A PORTAFOLIO
Pensar la estructura de páginas HTML5 desde cero
Si nos encontramos frente a un nuevo proyecto o si hemos decidido rehacer un sitio desde cero, porque estructuralmente no nos ofrecía una buena base, entonces puede ser un buen momento para comenzar a implementar lo que hemos aprendido sobre HTML5.
Tengamos en cuenta que una vez que realizamos las maquetas del sitio, analizamos las necesidades, y verifi camos aspectos de usabilidad, accesibilidad y navegabilidad, ya tendremos todo listo para comenzar a andar el camino de estructurarlo con HTML5.
Una recomendación que se hace en estos casos es realizar primero la
estructura HTML de las secciones más importantes del cuerpo del
documento (cabecera, contenido principal, barra de navegación, pie,
etcétera) y, luego, ir agregando los elementos que se incorporan en ellas.
A continuación, veremos el ejemplo de un código básico de
estructura semántica de HTML5. En este caso, trabajaremos el código
del cuerpo del documento con un encabezado <header>, una barra de navegación <nav>, seguido de un bloque principal denominado
<section> que contiene dos artículos <article>, una barra con
información adicional <aside> y también un pie <footer>:
Ahora que hemos visto el modelo, vamos a pensar cómo lo llevaríamos a cabo en la vida real, por ejemplo, en un sitio de noticias o en un blog. Antes de continuar, vale aclarar que esta es simplemente la estructura HTML, y que todo lo relacionado con la apariencia y modo de representación de los elementos en pantalla, lo manejaremos a través de CSS, cuyas reglas veremos en detalle en el capítulo siguiente.
Volviendo a nuestro ejemplo, vamos a comenzar con el <header>. En este caso, aplicamos la etiqueta <h1> al título del sitio o blog, que aparece en su página principal, ya que es el elemento de texto más importante. Debajo, utilizamos la etiqueta <p> y la destacamos con <strong> para el texto de descripción que suelen tener los sitios, por ejemplo: “Novedades sobre informática general”.
Cabe destacar que, en algunos sitios, se utilizan imágenes en el encabezado; en
esos casos, por una cuestión de accesibilidad y también de SEO, es
recomendable utilizar en la etiqueta <img> los atributos alt y title para
describir el texto relativo a dicha imagen. Otra alternativa para resolver
el encabezado, dependiendo de la necesidad de nuestra estructura,
consiste en el uso de la siguiente semántica:
Ahora pasamos a la barra de navegación <nav>, que bien podría estar a la izquierda de la sección de contenido o por encima de ella.
En general, si creamos un menú, podremos estructurarlo con una lista, como en este caso, en la que los ítems están constituidos por la enumeración de los elementos. Luego, por medio de CSS, le daremos el estilo que deseemos.
En este ejemplo, <section> contiene el resumen de los artículos. En líneas generales, los periódicos online y los blogs ofrecen, en la portada, el titular de las noticias, un breve texto y el enlace para ver el resto de los artículos que corresponden.
En esta estructura simplificada, vemos dos
<article>; cada uno de ellos cuenta con un título
<h2> y un texto en un párrafo <p> para la breve
descripción de la noticia. En estos casos, también
se suele añadir una imagen (no olvidemos agregarle los atributos alt y
title) y, también, un enlace (muchas veces aplicado de manera directa al
título <h2>) para derivar a la noticia completa.
En este caso, el <aside> ha sido simplifi cado en un título <h3> y un
texto en un <p>, pero aquí pueden existir muchas variantes, desde widgets de AJAX hasta imágenes con vínculos (publicidades, banners, enlaces a otros sitios, etcétera), entre otras numerosas posibilidades. Tengamos en cuenta que el pie de página, el cual se encuentra definido con el <footer>, puede tener un texto sobre el autor, copyright, enlaces internos o hacia sitios amigos, etcétera.
La estructura que hemos visto aquí puede adaptarse, fácilmente, a cualquier tipo de necesidad, ya sea un e-commerce, una red social, un foro o cualquier otra opción que podamos imaginar. Luego será solo cuestión de incorporar los elementos para personalizar nuestro proyecto y, con ellos, terminar de darle la estructura deseada a cada página.
Un aspecto importante para tener en cuenta, además del correcto uso
semántico de las etiquetas, es el aprovechamiento efi ciente de estas.
Además de emplear id (para identifi car de manera única a un elemento)
y class (para defi nir clases de elementos), resulta de suma importancia
que repasemos los atributos vistos en este capítulo y en el anterior para
aplicarlos en cada uno de nuestros proyectos.
IR A PORTAFOLIO
Compatibilidad
Un problema que vamos a enfrentar al pasar a una nueva versión
del estándar es el de la compatibilidad. ¿Qué ocurrirá con los
navegadores que no reconozcan las etiquetas HTML5? En general, no
las mostrarán. Esto, sin dudas, se convierte en un problema porque la
representación del documento se verá afectada en gran medida y los
resultados pueden ser desastrosos. Pero debemos tener en cuenta
que la buena noticia es que la migración hacia nuevas versiones de
los navegadores trae también una mayor compatibilidad, por esta
razón el uso de HTML5 no presentará difi cultades.
Existen ciertos frameworks de AJAX que nos ayudan con el paso a HTML5. Modernizr, una opción que nos permite detectar las características del navegador del usuario y, de esta manera, poder actuar basándonos en esos datos.
Otra alternativa interesante es http://52framework.com. Este framework está enfocado principalmente en el maquetado de sitios web que utilizan HTML5 y CSS3. La gran ventaja reside en que funciona no solo en navegadores modernos, sino que también puede hacerlo en versiones previas, incluso para la familia de Internet Explorer, anteriores a la versión 9 (incluidas las versiones 6, 7 y 8).
Este framework se apoya en JavaScript y CSS para actuar en el
maquetado junto a nuestra estructura de documento HTML. Vale
destacar que, para quienes están acostumbrados a trabajar con Grids,
esta herramienta será especialmente útil para el maquetado.
