Unidad 2 Tema 2: HTML5: Los nuevos elementos HTML5: Los nuevos elementos Bajo este apartado se recogen muchas sugerencias que los usuarios de todo el mundo habían apuntado como necesarias, aportando novedades en la semántica, estructura, multimedia, formatos de entrada, etc. La lista completa de elementos nuevos es la que se muestra en el siguiente cuadro, junto a una breve descripción inicial: Nuevas etiquetas en HTML 5 section: representa un documento genérico o una sección de la aplicación. Puede ser usada junto a elementos h1, h2, h3, h4, h5, y h6 para indicar la estructura del documento. article: representa una pieza independiente del contenido de un documento, como una entrada de un blog o artículo de un periódico. aside: representa un elemento de contenido ligeramente relacionado con el resto de la página. hgroup: representa el encabezado de una sección. (Nota: En un principio, se consideró abandonado –utilizar con cuidado) 1 header: representa un grupo de ayudas introductorias o de navegación. footer: representa un pie de página de una sección y puede contener información sobre el autor, la información de copyright, etc. nav: representa una sección del documento para la navegación. figure / figcaption: el primero, representa una pieza auto-contenida de información a la que normalmente se hace referencia como una sola unidad en el flujo principal del documento. 1 http://lists.w3.org/Archives/Public/public-html/2011Nov/0044.html
17
Embed
Tema 2: HTML5: Los nuevos elementos · Tabla 2: Lista de los nuevos elementos en HTML 5 Todas estas palabras reservadas definen etiquetas nuevas (tags). Por supuesto, todas disponen
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Unidad 2 Tema 2: HTML5: Los nuevos elementos
HTML5: Los nuevos elementos
Bajo este apartado se recogen muchas sugerencias que los usuarios de todo el mundo
habían apuntado como necesarias, aportando novedades en la semántica, estructura,
multimedia, formatos de entrada, etc. La lista completa de elementos nuevos es la que
se muestra en el siguiente cuadro, junto a una breve descripción inicial:
id Identificador global de documento. Usado por CSS y JavaScript.
El nombre del ID que
se desea usar.
lang Establece el lenguaje a utilizar. • Un código válido
de lenguaje tipo
RFC 3066
• Cadena vacía
spellcheck Especifica si el elemento admite corrección ortográfica.
• Cadena vacía
• true
• false
style Especifica estilos para un elemento La definición de estilo
que queremos utilizar
tabindex Ayuda a determinar el orden de tabulación cuando el usuario lo utiliza para desplazarse por los elementos de un documento.
Cualquier valor
entero: 0, 1, 2, 7…
title Indica un título a asociar con el elemento. Muchos navegadores mostrarán esta información cuando el usuario pase el cursor por encima del elemento.
Cualquier texto que
será mostrado como
una etiqueta flotante
(tooltip)
Tabla 3: Atributos globales para todos los elementos de HTML 5
Advierta el lector que, en algunos casos estos atributos ya existían en la especificación anterior,
pero no tenían el carácter global que tienen ahora.
Las nuevas etiquetas, por categorías
La importancia del grupo de etiquetas de la tabla 2, no es equivalente. Y por otra parte,
tiene sentido dividirlas por categorías según su propósito, lo que ayuda bastante a su
utilización práctica. Vamos a desglosarlas según este criterio.
Etiquetas estructurales o semánticas
Son aquellas que sirven para crear el armazón de una página Web. La diferencia ahora
es que ese armazón puede contemplarse desde dos puntos de vista: el arquitectónico
(el que establece los "ladrillos" o armazón de la página), y el semántico -totalmente
nuevo- que sirve para un propósito similar, pero desde el punto de vista de la
organización conceptual del contenido: de cómo se relacionan unos contenidos con
otros.
Hasta ahora, con HTML 4.01, la arquitectura de las páginas se basaba principalmente en
elementos <table> y <div>. En sí, estas etiquetas no ofrecen ninguna indicación
acerca del contenido, ni mucho menos la forma en que esos contenidos se relacionan.
Tampoco aportan ninguna otra pista que pudiera ayudar a los buscadores en su labor
de indexación “inteligente” de las páginas. Aparte de esta circunstancia, en las webs de
hoy existe mucha información específica, que tiene en sí un significado común (artículos,
Donde, como vemos, hay dos secciones (Artículos y Comentarios), y –a su vez- podemos
dividir el primer artículo en otras dos secciones. Visual Studio 2012, nos mostraría en la
ventana de Esquema de Documento una estructura como la de la figura 4:
Fig. 4: Ventana de esquema de documento del código anterior en Visual Studio 2012
<section> y la noción de esquema de un documento
La estructura semántica de lo que se encuentra en el elemento <body></body>, cobra
importancia en el estándar de cara a presentar la página al usuario. En HTML 4, las
etiquetas <h1>…<h6> servían de base para esa estructura, que internamente es la que
genera un esquema de documento (Document Outline).
Las relaciones entre los elementos de división (<div>) y los de cabecera (la serie h1, h2…)
genera ese esquema de documento. No obstante, los elementos <div> no son
obligatorios para definir una nueva sección, porque cualquier elemento de cabecera lo
hace de forma implícita.
Expresando en términos de HTML, podríamos expresar esta idea de la siguiente forma:
dado un documento HTML 4 con la estructura siguiente:
<body> <h1>Main Paragraph</h1> <p>This section starts here...this section goes on...</p> <h2>Second Level Paragraph</h2> <p>This is a subsection and... goes on...</p> <h2>Another Second Level Paragraph</h2> <h1>New Information</h1> </body>
El esquema de documento generado sería como sigue:
1. Main Paragraph
a. Second Level…
b. Another Second Level
2. New Information
Esto presenta un buen número de problemas a la hora de evaluar la página para el
algoritmo de esquematización: Si las etiquetas <div> carecen del atributo class es
complicado relacionarlas, y la fusión de más de un documento, es propensa a errores.
Además, cada sección es parte del esquema, y es complicado introducir excepciones que
no sean consideradas como parte del esquema. También es fácil disponer de elementos
que hagan referencia, no al documento, sino a todo el sitio.
En HTML 5, todo el contenido que esté incluido en la etiqueta <body> es parte de una
sección. Por tanto, estas secciones pueden definirse de forma implícita o explícita. Los
contenidos de las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header>,
y <nav>, definen secciones (divisiones) explícitas. Y además, cada sección puede
disponer de su propia jerarquía de cabeceras, por lo que, incluso una subsección, puede
disponer de elementos <h1>, aunque la salida del intérprete visual reconozca
correctamente esta circunstancia y presente la cabecera en una tipografía más pequeña,
como puede verse en la figura 4.
También pueden existir secciones fuera del esquema del documento, y típicamente son
aquellas que lo complementan, tales como <aside>, <nav>, <header> y <footer>.
Etiqueta <article>
Esta etiqueta presentaría unidades de contenido absolutamente independientes del
resto. Pueden formar parte de una sección, o pueden contener varias secciones, sin que
una cosa sea impedimento para la otra. Al tratarse de unidades independientes, se las
podría trasladar en su integridad a otra página o a otra zona de la misma página sin
pérdida de coherencia.
Por ejemplo, si publicamos un artículo, y admitimos una sección de comentarios de los
lectores en su parte inferior, tendría sentido dividir el artículo en dos secciones, una para
el artículo en sí, y otra para los comentarios.
El ejemplo anterior puede servir para ilustrar su uso habitual.
Etiqueta <aside>
Da soporte al contenido “paralelo” que tantas veces vemos en artículos de revistas,
diarios y otras publicaciones. No está directamente relacionado con el texto, pero
complementa al tema que se explica de forma que resulta una ayuda complementaria
en la interpretación del texto.
Según la definición oficial, se trata de un "contenido tangencial" relacionado con el
elemento principal al que complementa, pero que debe considerarse separado de él, en
forma similar a como vemos habitualmente recuadros en una revista que explican
conceptos utilizados en el artículo principal, con el propósito de ayudar en su
compresión. Utilizado en ese contexto, un elemento <aside> debería diferenciarse
visualmente del contenido al que completa, mediante separaciones visuales y tipografía.
Por ejemplo, podríamos incluir una cita relacionada con un cierto texto, y crear una regla
CSS para separarla del contexto de forma visual aunque permanezca dentro del bloque
del artículo:
<article> <header> <h1>Titulo del Artículo</h1> </header> <p>Este texto pertenece al artículo cuyo título se encuentraen el elemento superior a este. A continuación aparece un elemento aside. </p>
<aside> <q>Esto es una cita de otro autor</q> </aside>
<p>Y aquí continúa el artículo. Se ha utilizado una regla CSS sobre el elemento aside para separarlo conceptual y visualmente del resto del artículo. </p> </article>
El objetivo es conseguir una salida diferenciada como se muestra en la figura 5:
Fig. 5: Salida del código anterior en el que el elemento <aside> se diferencia visualmente de su
contenedor, utilizando reglas CSS.
No debemos confundir esta utilización con las llamadas barras laterales (sidebars), que,
la mayor parte del tiempo, son elementos fijos, sin relación con el contenido variable
que se muestra a su lado.
Etiqueta <header>
De acuerdo a su significado, implica encabezamiento, presentación del contenido de un
artículo o una sección, que puede incluir un mecanismo de navegación, el título y el
autor o responsable de la sección/artículo, etc.
Su connotación semántica se encuentra en relación al elemento del que sirve de
cabecera, ya que puede albergar contenido que está relacionado con la creación del
contenido (autor, fecha, lugar, fuente, etc.) o la división en partes del mismo,
permitiendo aportar enlaces adicionales o referencias.
Su uso puede ser el que hemos visto en ejemplos anteriores, si bien tiene sentido
igualmente usarlo como cabecera de la propia página (Logo, Información corporativa,
etc.).
Etiqueta <footer>
Es un pie de página, pero hay que entenderla en un sentido similar a <header>, esto es,
como una información complementaria al elemento al que sirve de pie. Puede contener
enlaces complementarios, fecha de publicación, autor(es), y cualquier otra información
relacionada que sea de relevancia. Incluso podría contener elementos <section>, <nav>,
etc., si fuera apropiado. Lo que no debe de incluir es elementos <header> o más
elementos <footer>. Se considera contenido fluido ("flow content").
Al igual que <header>, se entiende que complementan a cualquier elemento HTML y
no solamente a los citados aquí. Por otra parte, no existe ningún inconveniente para que
un elemento tenga varias etiquetas <footer>, si resulta adecuado.
El código siguiente es un ejemplo con un elemento <section> que contiene otro
elemento <article>. Mientras éste contiene un solo elemento <footer>, la sección
contiene dos:
<section> <h4>Contenido de la sección</h4> <article> Contenido del artículo <footer> Pie del artículo </footer> </article> <footer> Primer Pie de la sección (Enlaces...)
</footer> <footer> Segundo Pie de la sección (Copyright...) </footer> </section>
Por lo demás, tanto éste elemento como <header> insertan un retorno de carro a
continuación de su elemento de cierre.
Etiqueta <nav>
Este elemento representa un fragmento de una página que enlaza con otras páginas del
mismo sitio o blog, o sea, una sección con enlaces de navegación internos. Esto no
significa que otros enlaces propios del sitio deban de estar incluidos en un elemento
<nav>, ya que los enlaces típicos de referencias en un artículo, o aquellos que indican
páginas complementarias (Condiciones legales, Copyright, Política de privacidad etc.),
no son candidatos a aparecer en esta etiqueta, pues un elemento <footer> sería
suficiente y más apropiado. Debe aplicarse solo a los elementos que son parte del
bloque de navegación principal.
El siguiente ejemplo, inspirado en código oficial publicado por la W3C en referencia con
él, ilustra el uso de varias de estas etiquetas e indica cómo el uso de enlaces tiene un
sentido diferente, según se trate de enlaces para desplazamiento por el sitio/aplicación
o de tipo meramente descriptivo. Además de <nav>, el listado incluye el uso básico de
las etiquetas <header>, <footer>, <article> y <time>. (Utilizamos un par de
reglas de CSS para formatear una salida acorde con lo habitual en éste tipo de páginas).
Como puede verse, la salida correspondiente refleja una estructura predecible de los
elementos que, aunque podría haberse estructurado de otra forma, resulta mucho más
esclarecedora de cara a los robots de búsqueda. Hay que notar la presencia de varias
etiquetas <header> y una etiqueta <footer> al final de la página.
Otro punto importante a observar es el distinto tipo de tamaño en la salida de dos
elementos idénticos <h1>: el primero, a continuación de <body> tiene un tamaño mayor
que el segundo, inmediatamente después de la etiqueta <nav>. El navegador ha
interpretado correctamente que la importancia de la primera es superior a la de la
segunda (respecto a la página en su totalidad).
Fig. 6: Salida del código anterior en Internet Explorer
Otro aspecto a tener en cuenta respecto a estas estructuras de navegación tiene que
ver con la existencia del elemento <menu>, ya presente en HTML 4.01, pero que dispone
de nuevos atributos en esta versión. En realidad, <menu> es un elemento pensado
para las aplicaciones Web, más que para las páginas. Es fácil que el nombre induzca a
error en un principio, pero debemos de tener en cuenta que una buena parte del
estándar está ideado con el propósito de potenciar por igual la construcción sitios y
aplicaciones Web.
En teoría, un elemento <menu> es más apropiado cuando queremos ofrecer una lista
de comandos (elementos visuales que apuntan a acciones) dentro de una aplicación
Web, y no a un mero cambio de página. La idea de menú sigue ahí, pero se refiere a
acciones relacionadas con una aplicación (aunque pueda seguir utilizándose a la manera
tradicional).
Lo mismo es aplicable respecto a los menús contextuales, que se supone deben activar
acciones que requieren un procesamiento, y no un simple cambio de total o parcial de
la información presentada. En el apartado dedicado al elemento <command>
explicamos con más detalle el funcionamiento conjunto de estos elementos,
especialmente para aplicaciones Web.
Implementación de una entrada de un blog
Si llevamos estas ideas a la típica entrada de un blog, en la que el “blogger” escribe un
artículo y se admiten respuestas y comentarios, podríamos concebir un esquema como
el que aparece en la figura 4. Adviértase como las respuestas son almacenadas
igualmente en elementos <article> y se añade un elemento <nav>, al objeto de permitir
el desplazamiento por los distintos artículos de una sección o por los apartados lógicos
del sitio.
Fig. 7: Estructura de entradas de un blog aplicando la nueva filosofía semántica propuesta por HTML5
A continuación vemos la parte fundamental del código fuente (omitimos los estilos y la
cabecera), que podría implementar una idea similar:
<section> <article> <header class="Titular"> <h3>Lorem ipsum dolor sit amet</h3> <time>22 de junio, 2012</time> </header> <p class="TextoNoticia"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p> <footer> <em>El informador, Redmond, Wa.</em> <a href="www.theReporter.com">(The Reporter)</a> </footer> </article>
<h5>Comentarios</h5> <article class="Comentario"> <header>M.Aurelius</header> <time>22 junio, 2012</time><br /> <strong>Et harum quidem rerum facilis est et expedita distinctio!</strong> </article> <article class="Comentario"> <header>Cayo Tulio</header> <time>23 junio, 2012</time><br /> <strong>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae aut perferendis doloribus asperiores repellat...)</strong> </article> </section>
Generando una salida como la que vemos en la figura 8:
Fig. 8: Salida en IE9/10 del código anterior.
Elemento <figure>
Representa un fragmento flotante de contenido, típicamente referenciado como una
unidad simple dentro del flujo normal del documento. Habitualmente, se utiliza para
albergar elementos gráficos o multimedia a los que aporta metadatos mediante la
etiqueta complementaria <figcaption> al estilo de lo que muestra el siguiente código
fuente:
<figure> <img src="/pictures/landscape.jpg"> <figcaption>West Virginia</figcaption> </figure> La salida ubicará la imagen en una pila vertical, debajo de la cual se situará la etiqueta
descriptiva. El orden es relevante en el modo de presentación, como era de esperar.
Existe un alternativa a <figcaption> que se considera obsoleta: <legend> que ya no está
incluida en el estándar. Ambas etiquetas establecen lo que debe ser una unidad de
contenido. Todos los aspectos de presentación son relegados a su formato mediante
CSS. Además, el uso de <figcaption> favorece la semántica, permitiendo la creación de
descripciones más complejas vinculadas con el contenido en sí.
A veces, puede utilizarse para agrupar conjuntos visuales o especiales (respecto al
artículo o sección a la que pertenece), que resulta un complemento explicativo
adecuado en ese momento: 3 imágenes que muestren 3 vistas de un mismo edificio, con
sus descripciones correspondientes, o un vídeo con dos capturas adicionales señalando
los puntos a remarcar.
Por supuesto, ese contenido no tiene porqué ser un gráfico (o un elemento multimedia),
sino que podría ser cualquier otra cosa, como un fragmento de código fuente.
El siguiente código agrupa 3 tipos de gráficos similares de la biblioteca de imágenes de
Windows 7, relacionándolas mediante un elemento <figcaption>:
<figure> <img src="Imagenes/Hydrangeas.jpg" /> <img src="Imagenes/Chrysanthemum.jpg" /> <img src="Imagenes/Tulips.jpg" /> <figcaption>Motivos florales en Windows 7</figcaption> </figure>
Lo que (añadiendo un par de ajustes de estilo, nos puede generar una salida como la de
la figura 9):
Fig. 9: elementos <figure> y <figcaption> en funcionamiento.
El lector podrá comprobar, además, que el elemento contenedor es de tipo dinámico,
por lo que funciona de forma similar a un WrapPanel, de forma que, si la superficie
disponible no permite albergar los elementos en una sola fila, los desplaza hacia la
siguiente, por lo que se ajusta magníficamente a los contextos actuales, donde es
preciso programar para dispositivos diversos. En la parte dedicada a CSS, veremos,
además, como podemos combinar estas características con las nuevas reglas dinámicas
de Transiciones y Animaciones, y las directivas @media que comprueban al superficie
disponible en el dispositivo de destino para ofrecer una experiencia de usuario
diferenciadora, que se ajuste siempre al contexto de visualización, no requiriendo
siquiera del concurso de funciones JavaScript.
Nota sobre este conjunto de etiquetas semánticas
Con estas etiquetas estructurales, estamos añadiendo elementos que relacionan y
establecen dependencias entre los diversos fragmentos de código de la página y por
tanto, estamos favoreciendo conceptos que tienen que ver con la Web semántica. Estas
etiquetas, más que jugar un papel contenedor, establecen relaciones lógicas entre los
contenidos.
Eso es algo de lo que no disponíamos hasta ahora. Sus resultados serán a más largo
plazo, cuando su uso empiece a generalizarse, los buscadores podrán indexar la
información teniendo en cuenta estos criterios, y supuestamente, haciendo que las
búsquedas sean mucho más aproximadas –por un lado- y que se “cuelen” menos
elementos que no tienen absolutamente ninguna relación con el sentido de lo que