Scribd
Cargar
5 vistas23 páginas

U02 HTML5

HTML5 no es solo una mejora de HTML, sino un nuevo concepto para construir sitios web y aplicaciones, integrando tecnologías como CSS y Javascript. A lo largo de su evolución, HTML5 ha permitido la creación de aplicaciones web dinámicas y funcionales, eliminando las barreras entre sitios y aplicaciones. Este estándar establece la estructura, el estilo y la funcionalidad necesarias para el desarrollo web moderno.

Cargado por

rjoel1313
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
5 vistas23 páginas

U02 HTML5

HTML5 no es solo una mejora de HTML, sino un nuevo concepto para construir sitios web y aplicaciones, integrando tecnologías como CSS y Javascript. A lo largo de su evolución, HTML5 ha permitido la creación de aplicaciones web dinámicas y funcionales, eliminando las barreras entre sitios y aplicaciones. Este estándar establece la estructura, el estilo y la funcionalidad necesarias para el desarrollo web moderno.

Cargado por

rjoel1313
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Universidad Nacional del Litoral

Facultad de Ingenierı́a y Ciencias Hı́dricas


Departamento de Informática

Tecnicatura Universitara en Informática de Gestión

Programación Web

Unidad 2: HTML5

Docente: Ing. Risso, Oscar Luis


Año: 2024

1
Índice
1. Componentes básicos 4

2. Estructura global 4
2.1. <!DOCTYPE> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2. <html> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3. <head> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4. <body> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.5. <meta> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6. <title> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.7. <link> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3. Estructura del cuerpo 9


3.1. Organización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2. <header> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3. <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.4. <section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.5. <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.6. <footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4. Dentro del cuerpo 16


4.1. <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2. <hgroup> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.3. <figure> y <figcaption> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5. Nuevos y viejos elementos 22


5.1. <mark> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.2. <small> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.3. <cite> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.4. <address> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.5. <time> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2
Unidad 2: HTML5
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya
antigua tecnologı́a, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que
combina dispositivos móviles, computación en la nube y trabajos en red.
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura
básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron
principalmente con la intención de comunicar información por medio de texto.
El limitado objetivo de HTML motivó a varias compañı́as a desarrollar nuevos lenguajes y programas
para agregar caracterı́sticas a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta
convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron
en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.
De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y
am pliamente consideradas como el futuro de Internet. Sin embargo, tan pronto como el número de usuarios se
incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico
para los negocios y la interacción social, limitaciones presentes en estas dos tecnologı́as probaron ser una
sentencia de muerte.
El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron
concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro de una estructura
pero que comparte con la misma solo espacio en la pantalla. No existı́a comunicación e integración alguna
entre aplicaciones y documentos.
La falta de integración resultó ser crı́tica y preparó elcamino para la evolución de un lenguaje que comparte
espacio en el documento con HTML y no está afectado por las limitaciones de los plug-ins. Javascript, un
lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la experiencia de los
usuarios y proveer funcionalidad para la web. Sin embargo, después de algunos años de intentos fallidos para
promoverlo y algunos malos usos, el mercado nunca lo adoptó plenamente y pronto su popularidad declinó.
Los detractores tenı́an buenas razones para oponerse a su adopción. En ese momento, Javascript no era capaz
de reemplazar la funcionalidad de Flash o Java. A pesar de ser evidente que ambos limitaban el alcance de
las aplicaciones y aislaban el contenido web, populares funciones como la reproducción de video se estaban
convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a través de estas tecnologı́as.
A pesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su
evolución lenta y la falta de integración disminuyeron su importancia hasta el punto en el que hoy dı́a no
es más usado en aplicacione s web de importancia. Sin Java, el mercado volcó su atención a Flash. Pero el
hecho de que Flash comparte las mismas caracterı́sticas básicas que su competidor en la web lo hace también
susceptible de correr el mismo destino.
Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la web continuaba
evolucionando. Junto con nuevas funciones y técnicas rápidas de acceso a la red, los navegadores también
mejoraron gradualmente sus intérpretes Javascript. Más potencia trajo más oportunidades y este lenguaje
est aba listo para aprovecharlas.
En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java o Flash
podrı́an proveer las herramientas que ellos necesitaban para crear las aplicaciones demandadas por un núme-
ro creciente de usuarios. Estos desarrolladores, impulsados por las mejoras otorgadas por los navegadores,
comenzaron a aplicar Javascript en sus aplicaciones de un modo nunca visto. La innovación y los increı́bles
resultados obtenidos llamaron la atención de más programadores. Pronto lo que fue llamado la ”Web 2.0”
nació y la percepción de Javascript en la comunidad de programadores cambió radicalmente.
Javascript era claramente el lenguaje que permitı́a a los desarrolladores innovar y hacer cosas que na-
die habı́a podido hacer antes en la web. En los últimos años, programadores y diseñadores web alrededor
del mundo surgieron con los más increı́ bles trucos para superar las limitaciones de esta tecnologı́a y sus
iniciales deficiencias en portabilidad. Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se
convirtieron pronto en la más perfecta combin ación para la necesaria evolución de la web.
HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo. HTML5 propone
estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologı́as
involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en
cómo volver esa estructura utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para
proveer dinamismo y construir aplicaciones web completamente funcionales.
3
Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologı́as requeridas para
el proceso de integración están listas. El futuro de la web es prometedor y l a evolución y combinación de
estas tres tecnologı́as (HTML, CSS y Javascript) en una poderosa especificación está volviendo a Internet la
plataforma lı́der de desarrollo. HTML5 indica claramente el camino.

1. Componentes básicos
HTML5 provee básicamente tres caracterı́sticas: estructura, estilo y funcionalidad. Nunca fue declarado
oficialmente pero, incluso cuando algunas APIs (Interface de Programación de Aplicaciones) y la especificación
de CSS3 por completo no son parte del mismo, HTML5 es considerado el producto de la combinación de
HTML, CSS y Javascript. Estas tecnologı́as son altamente dependientes y actúan como una sola unidad
organizada bajo la especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura
y su contenido en la pantalla y Javascript hace el resto que (como veremos más adelante) es extremadamente
significativo.
Más allá de esta integración, la estructura sigue sien do parte esencial de un documento. La misma provee
los elementos necesarios para ubicar contenido estático o dinámico, y es también u na plataforma básica para
aplicaciones. Con la variedad de dispositivos para acceder a Internet y la diversidad de interfaces disponibles
para interactuar con la web, un aspecto básico como la estructura se vuelve parte vital del documento. Ahora
la estructura debe proveer forma, organización y flexibilidad, y debe ser tan fuerte como los fundamentos de
un edificio.
Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero cómo esa estruc-
tura es construida. Crear fundamentos fuertes nos ayudará más adelante a aplic ar el resto de los componentes
para aprovechar completamente estas nuevas tecnologı́as.
Por lo tanto, empecemos por lo básico, paso a paso. Comenzaremos aprendiendo cómo construir una
plantilla para futuros proyectos usando los nuevos elementos HTML introducidos en HTML5.

Manos a la obra
Crea un archivo de texto vacı́o utilizando tu editor de textos favorito para probar cada código que
escribamos. Esto te ayudará a recordar las nuevas etiquetas HTML y acost umbrarte a ellas.

Conceptos básicos

Un documento HTML es un archivo de texto. Si no dispones aún de ningún programa para desarrollo
web, pue des simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos (Nue-
vamente te recomiento el Notepad++, [Link] El archivo debe ser grabado
con la extensión .html y el nombre que desees (por ejemplo, [Link]).

2. Estructura global
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferen-
ciada, declarada y determinada por etiquetas especı́ficas. Aquı́ veremos cómo construir la estructura global
de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

2.1. <!DOCTYPE>
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es
extremadamente sencillo:

1 <! DOCTYPE html >

Código 1: Usando el elemento <doctype>.

4
IMPORTANTE
Esta lı́nea debe ser la primera lı́nea del archivo, sin espacios o lı́neas que la precedan. De esta forma, el
modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre
que sea posible, o ignoradas en caso contrario.

Manos a la obra
Puedes comenzar a copiar el código en tu archivo de texto y agregar los próximos a medida que los
vamos estudiando.

2.2. <html>
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como
siempre, la estructura tipo árbol de este lenguaje tiene su raı́z en el elemento < html >. Este elemento
envolverá al resto del código:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 </ html >

Código 2: Usando el elemento <html>.

El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en
HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este
caso es por español.

Conceptos básicos

HTML usa un lenguaje de etiquetas para construir pági nas web. Estas etiquetas HTML son palabras
clave y atributos rodeados de los signos mayor y menor (por ejemplo, <html lang=’es’>). En este
caso, html es la palabra clave y lang es el atributo con el valor es. La mayorı́a de las etiquetas HTML
se utilizan en pares, una etiqueta de apertura y una de cierre, y el contenido se declara entre ellas. En
nuestro ejemplo, <html lang=’es’> indica el comienzo del código HTML y </html> indica el final.
Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue por una barra invertida
antes de la palabra clave (por ejemplo, </html>). El resto de nuestro código será insertado entre
estas dos etiquetas: <html>...</html>.

IMPORTANTE
HTML5 es extremadamente flexible en cuanto a la estructura y a los elementos utilizados para cons-
truirla. El elemento < html > puede ser incluido sin ningún atributo o incluso ig norado completa-
mente. Con el propósito de preservar compatibilidad (y por algunas razones extras que no vale la pena
mencionar aquı́) le recomendamos que siga algunas reglas básicas. En este libro vamos a enseñarle
cómo construir documentos HTML de acuerdo alo que nosotros consideramos prácticas recomendadas.

2.3. <head>
Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas <html> tiene
que ser dividido entre dos secciones principales. Al igual que en versiones previas de HTML, la primera
sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones
en el código usando los elementos <head> y <body> ya conocidos.
El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene
una etiqueta de apertura y una de cierre:

5
1 <! DOCTYPE html >
2 < html lang = " es " >
3 < head >
4 </ head >
5 </ html >

Código 3: Usando el elemento <head>.

La etiqueta no cambió desde versiones anteriores y su propósito sigue siendo exactamente el mismo. Dentro
de las etiquetas <head> definiremos el tı́tulo de nuestra página web, declarare mos el set de caracteres co-
rrespondiente, proveeremos información general acerca del documento e incorporaremos los archivos externos
con estilos, códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla.
Excepto por el tı́tulo y algunos ı́conos, el resto de la información incorporada en el documento entre estas
etiquetas es invisible para el usuario.

2.4. <body>
La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El
cuerpo representa la parte visible de todo documento y es especificado entre etiquetas ¡body¿. Estas etiquetas
tampoco han cambiado en relación con versiones previas de HTML:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 </ head >
5 < body >
6 </ body >
7 </ html >

Código 4: Usando el elemento <body>.

Conceptos básicos

Hasta el momento tenemos un código simple pero con una estructura compleja. Esto es porque el
código HTML no está formado por un conjunto de instrucciones secuenciales. HTML es un lenguaje
de etiquetas, un listado de elementos que usualmente se utilizan en pares y que pueden ser anidados
(totalmente contenidos uno dentro del otro). En la primera lı́nea del código 4 tenemos una etiqueta
simple con la definición del tipo de documento e inmediatamente después la etiqueta de apertura <html
lang=’es’>. Esta etiqueta y la de cierre </html> al final del listado están indicando el comienzo de
l código HTML y su final. Entre las etiquetas <html> insertamos otras etiquetas especificando dos
importantes partes de la estructura básica: <head> para la cabecera y <body> para el cuerpo del
documento. Estas dos etiquetas también se utilizan en pares. Más adelante en este capı́tulo veremos q
ue más etiquetas son insertadas entre estas últimas conformando una estructura de árbol con <html>
como su raı́z.

2.5. <meta>
Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados
dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar
el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 </ head >
6
6 < body >
7 </ body >
8 </ html >

Código 5: Usando el elemento <meta>.

Nota
No es requerido ningún tipo de formateo o identación del texto. Sin embargo, ser organizados y
utilizar tabulaciones (o identaciones) del texto facilita mucho la legibilidad del código HTML y nos
evita cometer errores (por ejemplo, dejar etiquetas sin su correspondiente cierre).

La innovación de este elemento en HTML5, como en la mayorı́a de los casos, es solo simplificación. La
nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos
cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como
description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , Javascript " >
7 </ head >
8 < body >
9 </ body >
10 </ html >

Código 6: Agregando más elementos <meta>.

Conceptos básicos

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre
el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante
para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener
un sumario de la información que contiene. Como comentamos anteriormente, aparte del tı́tulo y
algunos ı́conos, la mayorı́a de la información insertada entre las etiquetas <head> no es visible para
los usuarios. En el código 6, el atributo name dentro de la etiqueta <meta> especifica su tipo y content
declara su valor, pero ninguno de estos valores es mostrado en pantalla.

En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero recomendamos utilizarlas
por razones de compatibilidad. El anterior código se podrı́a escribir de la siguiente manera:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " / >
5 < meta name = " description " content = " Ejemplo de HTML5 " / >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " / >
7 </ head >
8 < body >
9 </ body >
10 </ html >

Código 7: Cierre de etiquetas simples.

7
2.6. <title>
La etiqueta <title>, como siempre, simplemente especifica el tı́tulo del documento, y no hay nada nuevo
para comentar:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7

8 < title > Este texto es el t ı́ tulo del documento </ title >
9 </ head >
10 < body >
11 </ body >
12 </ html >

Código 8: Usando la etiqueta <title>.

Conceptos básicos

El texto entre las etiquetas <title> es el tı́tulo del documento que estamos creando. Normalmente
este texto es mostrado en la barra superior de la ventana del navegador.

2.7. <link>
Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado
para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos . Uno de los usos más
comunes para <link> es la incorporación de archivos con estilos CSS:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10 < body >
11 </ body >
12 </ html >

Código 9: Usando el elemento <link>.

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo
type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href.
El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos
incorporando por medio de href. En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador
que el archivo [Link] es un archivo CSS con estilos requeridos para presentar la página en pantalla.

8
Conceptos básicos

Un archivo de estilos es un grupo de reglas de formato que ayudarán a cambiar la apariencia de nuestra
página web (por ejemplo, el tamaño y color del texto). Sin estas reglas, el texto y cualquier otro
elemento HTML serı́a mostrado en pantalla utilizando los estilos estándar provistos por el navegador.
Los estilos son reglas simples que normalmente requieren solo unas pocas lı́neas de código y pueden ser
declarados en el mismo documento. Como veremos más adelante, no es estrictamente necesario obtener
esta información de archivos externos pero es una práctica recomendada. Cargar las reglas CSS desde
un documento externo (otro archivo) nos permitirá organizar el documento principal, incrementar la
velocidad de carga y aprovechar las nuevas caracterı́sticas de HTML5.

Con esta última inserción podemos considerar finalizado nuestro trabajo en la cabecera. Ahora es tiempo
de trabajar en el cuerpo.

3. Estructura del cuerpo


La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte visible del documento.
Este es el código que producirá nuestra página web.
HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un
documento. Uno de los primeros elementos provistos para este propósito fue <table>. Las tablas permitı́an a
los diseñadores acomodar datos, texto, imágenes y herramientas dentro de filas y columnas de celdas, incluso
sin que hayan sido concebidas para este propósito.
En los primeros dı́as de la web, las tablas fueron una revolución, un gran paso hacia adelante con respecto
a la visualización de los documentos y la experiencia ofrecida a los usuarios. Más adelante, gradualmente,
otros elementos reemplazaron su función, permitiendo lograr lo mismo con menos código, facilitando de este
modo la creación, permitiendo portabilidad y ayudando al mantenimiento de los sitios web.
El elemento <div> comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la
integración de HTML, CSS y Javascript, el uso de <div> se volvió una práctica común. Pero este elemento,
ası́ como <table>, no provee demasiada información acerca de las parte del cuerpo que está representando.
Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de
apertura y cierre de un elemento <div>. En otras palabras, la palabra clave div solo especifica una división
en el cuerpo, como la celda de una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es
su propósito o qué contiene.
Para los usuarios estas claves o indicios no son importantes, pero para los navegadores la correcta inter-
pretación de qué hay dentro del documento que se está procesando puede ser crucial en muchos casos. Luego
de la revolución de los dispositivos móviles y el surgimiento de diferentes formas en que la gente accede a la
web, la identificación de cada parte del documento es una tarea que se ha vuelto más relevante que nunca.
Considerando todo lo expuesto, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección
del documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas
y la estructura principal ya no depende más de los elementos <div> o <table>.
Cómo usamos estos nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno
de ellos nos dan ayudan a entender sus funciones. Normalmente una página o aplicación web está dividida
entre varias áreas visuales para mejorar la experiencia del usuario y facilitar la interactividad. Las palabras
claves que representan cada nuevo elemento de HTML5 están ı́ntimamente relacionadas con estas áreas, como
veremos pronto.

3.1. Organización
La Figura 1 representa un diseño común encontrado en la mayorı́a de los sitios webs estos dı́as. A pesar del
hecho de que cada diseñador crea sus propios diseños, en general podremos identificar las siguientes secciones
en cada sitio web estudiado:
En la parte superior, descripto como Cabecera, se encuentra el espacio donde usualmente se ubica el logo,
tı́tulo, subtı́tulos y una corta descripción del sitio web o la página.
Inmediatamente debajo, podemos ver la Barra de Navegación en la cual casi todos los desarrolladores
ofrecen un menú o lista de enlaces con el propósito de facilitar la navegación a travésdel sitio. Los usuarios
9
Figura 1: Representación visual de un clásico diseño web

son guiados desde esta barra hacia las diferentes páginas o documentos, normalmente pertenecientes al mismo
sitio web.
El contenido más relevante de una página web se encu entra, en casi todo diseño, ubicado en su centro.
Esta sección presenta información y enlaces valiosos. La mayorı́a de las veces es dividida en varias filas
y columnas. En el ejemplo de la Figura 1 se utilizaron solo dos columnas: Información Principal y Barra
Lateral, pero esta sección es extremadamente flexible y normalmente diseñadores la adaptan acorde a sus
necesidades insertando más columnas, div idiendo cada columna entre bloques más pequeños o generando
diferentes distribuciones y combinaciones. El contenido presentado en esta parte del diseño es usualmente
de alta prioridad. En el diseño de ejemplo, Información Principal podrı́a contener una lista de artı́culos,
descripción de productos, entradas de un blog o cualquier otra información importante, y la Barra Lateral
podrı́a mostrar una lista de enlaces apuntando hacia cada uno se esos ı́tems. En un blog, por ejemplo, esta
última columna ofrecerá una lista de enlaces apuntand o a cada entrada del blog, información acerca del
autor, etc.
En la base de un diseño web clásico siempre nos encontramos con una barra más que aquı́ llamamos
Institucional. La nombramos de esta manera porque esta es el área en donde normalme nte se muestra
información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas,
términos y condiciones y toda información adicional que el desarrolador considere importante compartir. La
barra Institucional es un complemento de la Cabecera y es parte de lo que se considera estos dı́as la estructura
esencial de una página web.
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una
de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:

10
Figura 2: Representación visual de un diseño utilizando elementos HTML5.

3.2. <header>
Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser
confundido con <head> usado antes para construir la cabecera del documento. Del mismo modo que <head>,
la intención de <header> es proveer información introductoria (tı́tulos, subtı́tulos, logos), pero difiere con
respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información
acerca de todo el documento, <header> es usado solo para el cuerpo o secciones especı́ficas dentro del cuerpo:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 </ body >
16 </ html >

Código 10: Usando el elemento <header>.

En el código 10 definimos el tı́tulo de la página web utilizando el elemento <header>. Recuerde que esta
cabecera no es la misma que la utilizada previamente para definir el tı́tulo del documento. La inserción del
elemento <header> representa el comienzo del cuerpo y por lo tanto de la parte visible del documento. De
ahora en más será posible ver los resultados de nuestro código en la ventana del navegador.

11
Manos a la obra
Si siguió las instrucciones desde el comienzo de este capı́tulo ya deberı́a contar con un archivo de texto
creado con todos los códigos estudiados hasta el momento y listo para ser probado. Si no es ası́, todo
lo que debe hacer es copiar el código anterior dentro de un archivo de texto vacı́o utilizando cualquier
editor de texto (como el Bloc de Notas de Windows, por ejemplo) y grabar el archivo con el nombre
de su agrado y la extensión .html.

Para ver el código en funcionamiento, abra el archivo en un navegador compatible con HTML5 (puede
hacerlo con un doble clic sobre el archivo en su explorador de archivos).

Conceptos básicos

Entre las etiquetas <header> en el código 10 hay un elemento que probablemente no conoce.
El elemento <h1> es un viejo elemento HTML usado para definir tı́tulos. El número indica la impor-
tancia del tı́tulo.
El elemento <h1> es el más importante y <h6> el de menor importancia, por lo tanto <h1> será
utilizado para mostrar el tı́tulo principal y los demás para subtı́tulos o subtı́tulos internos. Más
adelante veremos cómo estos elementos trabajan en HTML5.

3.3. <nav>
Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación . Esta barra es generada en
HTML5 con el elemento <nav>:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15

16 < nav >


17 < ul >
18 < li > principal </ li >
19 < li > fotos </ li >
20 < li > videos </ li >
21 < li > contacto </ li >
22 </ ul >
23 </ nav >
24 </ body >

Código 11: Usando el elemento <nav>.

Como se puede apreciar en el código 11, el elemento <nav> se encuentra dentro de las etiquetas <body>
pero es ubicado después de la etiqueta de cierre de la cabecera (</header>), no dentro de las etiquetas
<header>. Esto es porque <nav> no es parte de la cabecera sino una nueva sección.
Anteriormente dijimos que la estructura y el orden que elegimos para colocar los elementos HTML5 de-
penden de nosotros. Esto significa que HTML5 es versátil y solo nos otorga los parámetros y elementos básicos
12
con los que trabajar, pero cómo usarlos será exclusivamente decisión nuestra. Un ejemplo de esta versatilidad
es que el elemento <nav> podrı́a ser insertado dentro del elemento <header> o en cualquier otra parte del
cuerpo. Sin embargo, siempre se debe considerar que estas etiquetas fueron creadas para brindar información
a los navegadores y ayudar a cada nuevo programa y dispositivo en el mercado a identificar las partes más
relevantes del documento. Para conservar nuestro código portable y comprensible, recomendamos como buena
práctica seguir lo que marcan los estándares y mantener todo tan claro como sea posible. El elemento <nav>
fue creado para ofrecer ayuda para la navegación, como en menús principales o grandes bloques de enlaces,
y deberı́a ser utilizado de esa manera.

Conceptos básicos

En el ejemplo del código 11 generamos las opciones del menú para nuestra página web. Entre las
etiquetas <nav> hay dos elementos que son utilizados para crear una lista. El propósito del elemento
<ul> es definir la lista. Anidado entre las etiquetas <ul> encontramos varias etiquetas <li> con
diferentes textos representando las opciones del menú. Las etiquetas <li>, como probablemente ya se
ha dado cuenta, son usadas para definir cada ı́tem de la lista.

3.4. <section>
Siguiendo nuestro diseño estándar nos encontramos con las columnas que en la Figura 1 llamamos Informa-
ción Principal y Barra Lateral. Como explicamos anteriormente, la columna Información Principal contiene la
información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida
en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en
HTML5 que especifica es tas secciones se llama simplemente <section>:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 < nav >
16 < ul >
17 < li > principal </ li >
18 < li > fotos </ li >
19 < li > videos </ li >
20 < li > contacto </ li >
21 </ ul >
22 </ nav >
23 < section >
24 </ section >
25 </ body >
26 </ html >

Código 12: Usando el elemento <section>.

Al igual que la Barra de Navegación , la columna Información Principal es una sección aparte. Por este
motivo, la sección para Información Principal va debajo de la etiqueta de cierre </nav>.

13
Manos a la obra
Compare el último código 12 con el diseño de la Figura 2 para comprender cómo las etiquetas son
ubicadas en el código y qué sección cada una de ellas genera en la representación visual de la página
web.

IMPORTANTE
Las etiquetas que representan cada sección del documento están localizadas en el código en forma de
lista, unas sobre otras, pero en el sitio web algunas de estas secciones se ubicarán lado a lado (las
columnas Información Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad
por la representación de los elementos en la pantalla fue delegada a CSS. El diseño será logrado
asignando estilos CSS a cada elemento HTML.

3.5. <aside>
En un tı́pico diseño web (Figura 1) la columna llamada Barra Lateral se ubica al lado de la columna
Información Principal . Esta es una columna o sección que normalmente contiene datos relacionados con la
información principal pero que no son relevantes o igual de importantes.
En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 < nav >
16 < ul >
17 < li > principal </ li >
18 < li > fotos </ li >
19 < li > videos </ li >
20 < li > contacto </ li >
21 </ ul >
22 </ nav >
23 < section >
24 </ section >
25

26 < aside >


27 < blockquote > Mensaje nro uno </ blockquote >
28 < blockquote > Mensaje nro dos </ blockquote >
29 </ aside >
30 </ body >
31 </ html >

Código 13: Usando el elemento <aside>.

El elemento <aside> podrı́a estar ubicado del lado derecho o izquierdo de nuestra página de ejemplo, la
etiqueta no tiene una posición predefinida. El elemento <aside> solo describe la información que contiene,
no el lugar dentro de la estructura.
14
Este elemento puede estar ubicado en cualquier parte del diseño y ser usado siempre y cuando su contenido
no sea considerado como el contenido principal del documento. Por ejemplo, podemos usar <aside> dentro
del elemento <section> o incluso insertado entre la información relevante, como en el caso de una cita.

3.6. <footer>
Para finalizar la construcción de la plantilla o estructura elemental de nuestro documento HTML5, solo
necesitamos un elemento más. Ya contamos con la cabecera del cuerpo, secciones con ayuda para la navega-
ción, información importante y hasta una barra lateral con datos adicionales, por lo tanto lo único que nos
queda por hacer es cerrar nuestro diseño para otorgarle un final al cuerpo del documento. HTML5 provee un
elemento especı́fico para este propósito llamado <footer>:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 < nav >
16 < ul >
17 < li > principal </ li >
18 < li > fotos </ li >
19 < li > videos </ li >
20 < li > contacto </ li >
21 </ ul >
22 </ nav >
23

24 < section >


25 </ section >
26

27 < aside >


28 < blockquote > Mensaje nro uno </ blockquote >
29 < blockquote > Mensaje nro dos </ blockquote >
30 </ aside >
31

32 < footer >


33 Derechos Reservados & copy ; 2010 -2011
34 </ footer >
35

36 </ body >


37 </ html >

Código 14: Usando el elemento <footer>.

En el tı́pico diseño de una página web (Figura 1) la sección llamada Institucional será definida por
etiquetas <footer>. Esto es debido a que la barra representa el final (o pie) del documento y esta parte de
la página web es normalmente usad a para compartir información general sobre el autor o la organización
detrás del proyecto.
Generalmente, el elemento <footer> representará el final del cuerpo de nuestro documento y tendrá el
propósito descripto anteriormente. Sin embargo, <footer> puede ser usado múltiples veces dentro del cuerpo
para representar también el final de diferentes secciones (del mismo modo que la etiqueta <header>).
15
4. Dentro del cuerpo
El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero
aún tenemos que trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan
a identificar cada sección del diseño y asignar un propósito intrı́nseco a cada una de ellas, pero lo que es
realmente importante para nuestro sitio web se encuentra en el interior de estas secciones.
La mayorı́a de los elementos ya estudiados fueron creados para construir una estructura para el documento
HTML que pueda ser identificada y reconocida por los navegadores y nuevos dispositivos. Aprendimos acerca
de la etiqueta <body> usada para declarar el cuerpo o parte visible del documento, la etiqueta <header>
con la que agrupamos información importante para el cuerpo, la etiqueta <nav> que provee ayuda para
la navegación del sitio web, la etiqueta <section> necesaria para contener la información más relevante, y
también <aside> y <footer> para ofrecer información adicional de cada sección ydel documento mismo.
Pero ninguno de estos elementos declara algo acerca del contenido. Todos tienen un propósito especı́fico
estructural.
Más profundo nos introducimos dentro del documento má s cerca nos encontramos de la definición del
contenido. Esta información estará compuesta por diferentes elementos visuales como tı́tulos, textos, imáge-
nes, videos y aplicaciones inter activas, entre otros. Necesitamos poder diferenciar estos elementos y establecer
una relación entre ellos dentro de la estructura.

4.1. <article>
El diseño considerado anteriormente (Figura 1) es el más común y representa una estructura esencial
para los si tios web estos dı́as, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla.
Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información
relevante dividida en partes que comparten similares caracterı́sticas. El elemento <article> nos permite
identificar cada una de estas partes:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15

16 < nav >


17 < ul >
18 < li > principal </ li >
19 < li > fotos </ li >
20 < li > videos </ li >
21 < li > contacto </ li >
22 </ ul >
23 </ nav >
24

25 < section >


26 < article >
27 Este es el texto de mi primer mensaje
28 </ article >
29 < article >
30 Este es el texto de mi segundo mensaje
31 </ article >
16
32 </ section >
33

34 < aside >


35 < blockquote > Mensaje nro uno </ blockquote >
36 < blockquote > Mensaje nro dos </ blockquote >
37 </ aside >
38

39 < footer >


40 Derechos Reservados & copy ; 2010 -2011
41 </ footer >
42

43 </ body >


44 </ html >

Código 15: Usando el elemento <article>.

Como puede observarse en el código anterior, las etiquetas <article> se encuentran ubicadas dentro del
elemento <section>. Las etiquetas <article> en nuestro ejemplo pertenecen a esta sección, son sus hijos,
del mismo modo que cada elemento dentro de las etiquetas <body> es hijo del cuerpo. Y al igual que cada
elemento hijo del cuerpo, las etiquetas ¡article¿son ubicadas una sobre otra, como es mostrado en la Figura
3.

Conceptos básicos

Como dijimos anteriormente, la estructura de un documento HTML puede ser descripta como un
árbol, con el elemento <html> como su raı́z. Otra forma de describir la relación entre elementos es
nombrarlos como padres, hijos y hermanos, de acuerdo a la posición que ocupan dentro de esa misma
estructura. Por ejemplo, en un tı́pico documento HTML el elemento <body> es hijo del elemento
<html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento < html >
como su padre.

Figura 3: Representación visual de las etiquetas <article> que fueron incluidas para contener información
relevante de la página web.
17
El elemento <article> no está limitado por su nombre (no se limita, por eje mplo, a artı́culos de noticias).
Este elemento fue creado con la intención de contener unidades independientes de contenido, por lo que
puede incluir mensajes de foros, artı́culos de una revista digital, entradas de blog, comentarios de usuarios,
etc. Lo que hace es agrupar porciones de información que están relacionadas entre sı́ independientemente de
su naturaleza.
Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia
estructura. Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y
<footer> estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir
los lı́mites del cuerpo sino también en cualquier secciónde nuestro documento:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 < nav >
16 < ul >
17 < li > principal </ li >
18 < li > fotos </ li >
19 < li > videos </ li >
20 < li > contacto </ li >
21 </ ul >
22 </ nav >
23 < section >
24 < article >
25 < header >
26 < h1 >T ı́ tulo del mensaje uno </ h1 >
27 </ header >
28 Este es el texto de mi primer mensaje
29 < footer >
30 <p > comentarios (0) </ p >
31 </ footer >
32 </ article >
33 < article >
34 < header >
35 < h1 >T ı́ tulo del mensaje dos </ h1 >
36 </ header >
37 Este es el texto de mi segundo mensaje
38 < footer >
39 <p > comentarios (0) </ p >
40 </ footer >
41 </ article >
42 </ section >
43 < aside >
44 < blockquote > Mensaje nro uno </ blockquote >
45 < blockquote > Mensaje nro dos </ blockquote >
46 </ aside >
47 < footer >
48 Derechos Reservados & copy ; 2010 -2011
49 </ footer >
50 </ body >
18
51 </ html >

Código 16: Construyendo la estructura de <article>.

Los dos mensajes insertados en el código anterior fueron construidos con el elemento <article> y tienen una
estructura especı́fica. En la parte superior de esta estructura incluimos las etiquetas <header> conteniendo
el tı́tulo definido con el elemento <h1>, debajo se encuentra el contenido mismo del mensaje y sobre el final,
luego del texto, vienen las etiquetas <footer> especificando la cantidad de comentarios recibidos.

4.2. <hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>,
incorporamos elementos <h1> para declarar un tı́tulo. Básicamente, las etiquetas <h1> son todo lo que
necesitamos para crear una lı́nea de cabecera para cada parte del documento, pero es normal que necesitemos
también agregar subtı́tulos o más información que especifique de qué se trata la página web o una sección en
particular. De hecho, el elemento ¡header¿fue creado para contener también otros elementos como tablas de
contenido, formularios de búsqueda o textos cortos y logos.
Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>,
<h3>, <h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para
evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas
etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 < meta charset = " iso -8859 -1 " >
5 < meta name = " description " content = " Ejemplo de HTML5 " >
6 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
7 < title > Este texto es el t ı́ tulo del documento </ title >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >


12 < header >
13 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
14 </ header >
15 < nav >
16 < ul >
17 < li > principal </ li >
18 < li > fotos </ li >
19 < li > videos </ li >
20 < li > contacto </ li >
21 </ ul >
22 </ nav >
23 < section >
24 < article >
25 < header >
26 < hgroup >
27 < h1 >T ı́ tulo del mensaje uno </ h1 >
28 < h2 > Subtitulo del mensaje uno </ h2 >
29 </ hgroup >
30 <p > publicado 20 -06 -2014 </ p >
31 </ header >
32 Este es el texto de mi primer mensaje
33 < footer >
34 <p > comentarios (0) </ p >
35 </ footer >
36 </ article >
37 < article >
19
38 < header >
39 < hgroup >
40 < h1 >T ı́ tulo del mensaje dos </ h1 >
41 < h2 > Subtitulo del mensaje dos </ h2 >
42 </ hgroup >
43 <p > publicado 23 -06 -2014 </ p >
44 </ header >
45 Este es el texto de mi segundo mensaje
46 < footer >
47 <p > comentarios (0) </ p >
48 </ footer >
49 </ article >
50 </ section >
51 < aside >
52 < blockquote > Mensaje nro uno </ blockquote >
53 < blockquote > Mensaje nro dos </ blockquote >
54 </ aside >
55 < footer >
56 Derechos Reservados & copy ; 2010 -2011
57 </ footer >
58 </ body >
59 </ html >

Código 17: Usando el elemento <hgroup>.

Las etiquetas H deben conservar su jerarquı́a, lo que significa que debemos primero declarar la etiqueta
<h1>, luego usar <h2> para subtı́tulos y ası́ sucesivamente. Sin embargo, a diferencia de anteriores versio-
nes de HTML, HTML5 nos deja reusar las etiquetas H y construir esta jerarquı́a una y otra vez en cada
sección del documento. En el ejemplo anterior, agregamos un subtı́tulo y datos adicionales a cada mensaje.
Los tı́tulos y subtı́tulos fueron agrupados juntos utilizando <hgroup>, recreando de este modo la jerarquı́a
<h1> y <h2> en cada elemento <article>.

IMPORTANTE
El elemento <hgroup> es necesario cuando tenemos un tı́tulo y subtı́tulo o más etiquetas H juntas
en la misma cabecera. Este elemento puede contener solo etiquetas H y esta fue la razón por la que
en nuestro ejemplo dejamos los datos adicionales afuera. Si solo dispone de una etiqueta <h1> o la
etiqueta <h1> junto con datos adicionales, no tiene que agrupar estos elementos juntos. Por ejemplo,
en la cabecera del cuerpo (<header>) no usamos este elemento porque solo tenemos una etiqueta H
en su interior. Siempre recuerde que <hgroup> fue creado solo con la intención de agrupar etiquetas
H, exactamente como su nombre lo indica.

Navegadores y programas que ejecutan y presentan en la pantalla sitios webs leen el código HTML y
crean su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna está
dividida en secciones que no tienen nada que ver con las divisiones en el diseño o el elemento <section>.
Estas son secciones conceptuales generadas durante la interpretación del código. El elemento <header> no
crea una de estas secciones por sı́ mismo, lo que significa que los elementos dentro de <header> representarán
diferentes niveles e internamente pueden generar diferentes secciones. El elemento <hgroup> fue creado con
el propósito de agrupar las etiquetas H y evitar interpretaciones incorrectas por parte de los navegadores.
Conceptos básicos: lo que llamamos “información adicional” dentro de la cabecera en nuestra descripción
previa es conocido como Metadata. Metadata es un conjunto de datos que describen y proveen información
acerca de otro grupo de datos. En nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado.

4.3. <figure> y <figcaption>


La etiqueta < f igure > fue creada para ayudarnos a ser aún más especı́ficos a l a hora de declarar el
contenido del documento. Antes de que este elemento sea introducido, no podı́amos identificar el contenido que
era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc. Normalmente
20
estos elementos son parte del contenido relevante pero pueden ser extraı́dos o movidos a otra parte sin afectar
o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de información, las etiquetas
<figure> pueden ser usadas para identificarla:

1 <! DOCTYPE html >


2 < html lang = " es " >
3 < head >
4 ... ( Etiquetas meta , title y link , como ya vimos )
5 </ head >
6

7 < body >


8 < header >
9 < h1 > Este es el t ı́ tulo principal del sitio web </ h1 >
10 </ header >
11 < nav >
12 < ul >
13 ... ( Listado de etiquetas li )
14 </ ul >
15 </ nav >
16 < section >
17 < article >
18 < header >
19 < hgroup >
20 < h1 >T ı́ tulo del mensaje uno </ h1 >
21 < h2 > Subtitulo del mensaje uno </ h2 >
22 </ hgroup >
23 <p > publicado 20 -06 -2014 </ p >
24 </ header >
25 Este es el texto de mi primer mensaje
26 < figure >
27 < img src = ’ http :// minkbooks . com / content / myimage . jpg ’ >
28 < figcaption >
29 Esta es la imagen del primer mensaje
30 </ figcaption >
31 </ figure >
32 < footer >
33 <p > comentarios (0) </ p >
34 </ footer >
35 </ article >
36 < article >
37 < header >
38 < hgroup >
39 < h1 >T ı́ tulo del mensaje dos </ h1 >
40 < h2 > Subtitulo del mensaje dos </ h2 >
41 </ hgroup >
42 <p > publicado 23 -06 -2014 </ p >
43 </ header >
44 Este es el texto de mi segundo mensaje
45 < footer >
46 <p > comentarios (0) </ p >
47 </ footer >
48 </ article >
49 </ section >
50 < aside >
51 < blockquote > Mensaje nro uno </ blockquote >
52 < blockquote > Mensaje nro dos </ blockquote >
53 </ aside >
54 < footer >
55 Derechos Reservados & copy ; 2010 -2011
56 </ footer >
21
57 </ body >
58 </ html >

Código 18: Usando los elementos <figure> y <figcaption>.


En el código anterior, en el primer mensaje, luego del texto insertamos una imagen (< imgsrc = ”http :
//[Link]/content/[Link]” >). Esta es una práctica común, a menudo el texto es enrique-
cido con imágenes o videos. Las etiquetas <figure> nos permiten envolver estos complementos visuales y
diferenciarlos ası́ de la información más relevante.
También en el Listado 18 se puede observar un elemento extra dentro de <figure>. Normalmente, unidades
de información como imágenes o videos son descriptas con un corto texto debajo. HTML5 provee un elemento
para ubicar e identificar estos tı́tulos descriptivos. Las etiquetas <figcaption> encierran el texto relacionado
con <figure> y establecen una relación entre ambos elementos y su contenido.

5. Nuevos y viejos elementos


HTML5 fue desarrollado con la intención de simplificar, especificar y organizar el código. Para lograr
este propósito, nuevas etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS
y Javascript. Estas incorporaciones y mejoras de versiones previas están relacionadas no solo con nuevos
element os sino también con cómo usamos los ya existentes.

5.1. <mark>
La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado
importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este
caso es un resultado de búsqueda . El elemento <mark> resaltará la parte del texto que concuerda con el
texto buscado:

1 < span > Mi < mark > coche </ mark > es rojo </ span >

Código 19: Uso del elemento <mark> para resaltar la palabra “coche”.
Si un usuario realiza una búsqueda de la palabra “coche”, por ejemplo, los resultados podrı́an ser mos-
trados con el código anterior. La frase del ejemplo representa los resultados de la búsqueda y las etiquetas
<mark> en el medio encierran lo que era el texto buscado (la palabra “coche”). En algunos navegadores, esta
palabra será resaltada con un fondo amarillo por defecto, pe ro siempre podemos sobrescribir estos estilos
con los nuestros utilizando CSS, como veremos en la próxima Unidad Temática.
En el pasado, normalmente obtenı́amos similares resultados usando el elemento <b>. El agregado de
<mark> tiene el objetivo de cambiar el significado y otorgar un nuevo propósito para éstos y otros elementos
relacionados:
<em> es para indicar énfasis (reemplazando la etiqueta <i> que utilizábamos anteriormente).
<strong> es para indicar importancia.
<mark> es para resaltar texto que es relevante de acuerdo con las circunstancias.
<b> deberı́a ser usado solo cuando no hay otro elemento más apropiado para la situación.

5.2. <small>
La nueva especificidad de HTML es también evidente en elementos como <small>. Previamente este
elemento era utilizado con la intención de presentar cualquier texto con letra pequeña. La palabra clave
referenciaba el tamaño del texto, independientemente de su significado. En HTML5, el nuevo propósito de
<small> es presentar la llamada letra pequeña, como impresiones legales, descargos, etc.

1 < small > Derechos Reservados & copy ; 2011 </ small >

Código 20: Inclusión de información legal con el elemento <small>.


22
5.3. <cite>
Otro elemento que ha cambiado su naturaleza para volverse más especı́fico es < cite >. Ahora las etiquetas
< cite > encierran el tı́tulo de un trabajo, como un libro, una pelı́cula, una canción, etc.

1 < span > Amo la pelicula < cite > Tentaciones </ cite > </ span >

Código 21: Citando una pelı́cula con el elemento <cite>.

5.4. <address>
El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos
usarlo previamente para construir nuestra plantilla, sin embargo podrı́a ubicarse perfectamente en algunas
situaciones en las que debemos presentar información de contacto relacionada con el contenido del elemento
¡article¿o el cuerpo completo.
Este elemento deberı́a ser incluido dentro de <footer>, como en el siguiente ejemplo:

1 < article >


2 < header >
3 < h1 > Titulo del mensaje </ h1 >
4 </ header >
5 Este es el texto del mensaje
6 < footer >
7 < address >
8 <a href = ’ http :// www . jdgauchat . com ’ > JD Gauchat </ a >
9 </ address >
10 </ footer >
11 </ article >

Código 22: Agregando información de contacto a un <article>.

5.5. <time>
En cada <article> de nuestra última plantilla, incluimos la fecha indicando cuándo el mensaje fue publi-
cado. Para esto usamos un simple elemento <p> dentro de la cabecera (<header>) del mensaje, pero existe
un elemento en HTML5 especı́fico para este propósito. El elemento <time> nos permite declarar un texto
comprensible para humanos y navegadores que representa fecha y hora:

1 < article >


2 < header >
3 < h1 > Titulo del mensaje dos </ h1 >
4 < time datetime = " 2014 -06 -23 " pubdate > publicado 23 -06 -2014 </ time >
5 </ header >
6 Este es el texto del mensaje
7 </ article >

Código 23: Fecha y hora usando el elemento <time>.

En el código el elemento <p> usado en ejemplos previos fue reemplazado por el nuevo elemento <time>
para mostrar la fecha en la que el mensaje fue publicado. El atributo datetime tiene el valor que representa la
fecha comprensible para el navegador (timestamp). El formato de este valor deberá seguir un patrón similar al
del siguiente ejemplo: 2014-06-23T12:10:45. También incluimos el atributo pubdate, el cual solo es agregado
para indicar que el valor del atributo datetime representa la fecha de publicación.
El estándar HTML 5 del W3C (World Wide Web Consortium) está publicado en:
[Link]

23

También podría gustarte