Capitulo 1 HTML 5

Captulo 1
Documentos HTML5
1.1 Componentes Bsicos
HTML5 ofrece tres caractersticas bsicas: estructura, estilo y funcionalidad. Nunca fue
oficialmente declarado pero, a pesar de que las APIs de Javascript y la especificacin de CSS3 no
son consideradas parte de esta tecnologa, HTML5 es considerado un producto de la
combinacin de HTML, CSS y Javascript. Estas tecnologas dependen una de otra y actan como
una sola unidad organizada bajo la especificacin de HTML5. HTML est a cargo de la estructura,
CSS presenta esa estructura y su contenido en la pantalla, y Javascript se hace cargo del resto,
que, como veremos ms adelante, resulta crucial para el correcto desempeo de la mayora de
los sitios y aplicaciones web actuales.
A pesar de la integracin de estas tecnologas, la estructura es an una parte fundamental del
documento. La estructura provee los elementos necesarios para asignar espacio a contenido
esttico o dinmico, y tambin acta como una plataforma bsica para aplicaciones. Con la
variedad de dispositivos que acceden Internet estos das y la diversidad de interfaces usadas para
navegar e interactuar con la web, los aspectos bsicos provistos por la estructura se vuelven una
parte vital del documento. En estos das la estructura debe aportar forma, organizacin y
flexibilidad, y debe ser tan slida como la fundacin de una casa.
Para crear sitios web y aplicaciones con HTML5, necesitamos primero entender cmo
funciona esa estructura. Crear una fundacin fuerte nos ayudar a aplicar ms adelante otros
componentes y aprovechar al mximo las nuevas posibilidades.
Comencemos entonces con lo bsico, paso a paso. En este primer captulo aprender qu es
HTML y cmo construir una estructura elemental usando los nuevos elementos de este lenguaje.
IMPORTANTE: Para acceder a informacin adicional y los cdigos de ejemplo,
visite nuestro sitio web www.formasterminds.com.
1.2 Breve Introduccin a HTML

HyperText Markup Language (HTML) es un lenguaje de programacin. A diferencia de otros
lenguajes, HTML no est compuesto por comandos o instrucciones sino por un conjunto de
etiquetas que organizan y declaran el propsito del contenido del documento.
En un sentido estricto, HTML es solo texto escrito en una sintaxis particular que un navegador
puede entender e implementar. La idea detrs de la creacin de este lenguaje era compartir a
travs de Internet no solo el texto incluido en el documento sino tambin su formato. La
posibilidad de diferenciar partes importantes del contenido del documento abri la puerta para
la creacin de la web tal como la conocemos hoy en da. HTML es el lenguaje que lo hizo posible.
Copia de Evaluacin Ana Borobio
1|P gi na
IMPORTANTE: Los conceptos explicados a continuacin son bsicos pero

esenciales para entender los ejemplos del libro. Si usted est familiarizado con
esta informacin, sintase libre de saltear las partes que ya conoce.
Etiquetas y Elementos
Un cdigo HTML no es una secuencia de instrucciones. HTML es conformado en realidad por un
conjunto de etiquetas que generalmente funcionan en pares y pueden trabajar anidadas
(contenidas dentro de otras). Estas etiquetes HTML no son ms que palabras clave y atributos
rodeados por corchetes angulares (por ejemplo, <html lang="es">). Generalmente llamamos
etiquetas a las etiquetas individuales, y elemento al par de etiquetas de apertura y cierre.
Considere el prximo ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Primer Documento HTML</title>
</head>
<body>
HOLA MUNDO!
</body>
</html>
Listado 1-1: Ejemplo de un documento HTML bsico

Algunos elementos HTML son simples, compuestos por una sola etiqueta, pero la mayora
requiere una etiqueta de apertura y una de cierre. En el ejemplo del Listado 1-1 podemos ver
varias etiquetas, una despus de la otra, con texto e incluso otras etiquetas entre medio.
Compare cada etiqueta de apertura y cierre en este ejemplo y ver que las etiquetas de cierre se
distinguen de las de apertura por una barra inclinada antes de la palabra clave. Por ejemplo, la
etiqueta <html> indica el comienzo del cdigo HTML, mientras que </html> declara el final.
Todo lo que se encuentra en medio de estas dos etiquetas ser tratado como cdigo HTML por el
navegador.
En este ejemplo nos encontramos con un documento simple pero con una estructura
bastante compleja. La primera lnea muestra una etiqueta simple con la definicin del
documento seguida por la etiqueta de apertura <html lang="es">. Entre las etiquetas
<html> insertamos otras etiquetas, como <head> y <body> que representan la cabecera y el
cuerpo del documento, que tambin se aplican en pares y que a su vez encierran ms contenido,
desde texto hasta otros elementos (<title>, por ejemplo).
Como puede ver, para construir un documento HTML las etiquetas son listadas una despus
de la otra, y tambin dentro de otras etiquetas, conformando una estructura tipo rbol, con la
etiqueta <html> como su raz.
En general todo elemento puede ser anidado (contener o ser contenido por otro elemento).
Algunos elementos estructurales como <html>, <head> o <body> tienen asignado un lugar
especfico en el documento HTML, pero el resto es flexible, como veremos ms adelante en este
captulo.
Hgalo Usted Mismo: Un documento HTML es un archivo de texto. Si no posee
ningn programa de desarrollo, para crear este tipo de archivos puede utilizar
cualquier editor de texto, como el Bloc de Notas de Windows. Cree un nuevo
2|P gina
archivo con el cdigo del Listado 1-1, grbelo con un nombre a su eleccin y la
extensin.html (por ejemplo, micodigo.html). Cuando finalice, abra el
archivo en su navegador (un doble clic sobre el archivo es suficiente para
ejecutarlo en el navegador configurado por defecto en su ordenador). Si su
editor trabaja con diferentes formatos de texto, asegrese de seleccionar Texto
Plano antes de grabar.
IMPORTANTE: No se preocupe si no entiende cmo crear la estructura
presentada en el Listado 1-1. Estudiaremos este aspecto y los nuevos
elementos estructurales introducidos por HMTL5 en la prxima parte de este
captulo.
Atributos
Como probablemente ha notado, la etiqueta de apertura <html> en el Listado 1-1 no est
solamente compuesta por la palabra clave y los corchetes angulares sino tambin por el texto
lang="es". Este es un atributo con su valor correspondiente. El nombre del atributo es lang y
su valor (es) es asignado usando el smbolo = (igual). Los atributos proveen informacin adicional
sobre el elemento. En este caso, declara espaol como el lenguaje humano del documento.
Los atributos son siempre declarados dentro de las etiquetas de apertura y pueden tener una
sintaxis que incluye un nombre y un valor, como el atributo lang de nuestro ejemplo, o
representar un valor Booleano, en cuyo caso su sola presencia indica un valor verdadero o falso
(true o false). Por ejemplo, el atributo disabled sin un valor especfico deshabilita un
elemento de formulario.
Desde que HTML dej de perseguir un propsito general y se enfoc ms en la creacin de la
estructura del documento, el uso de la mayora de los atributos clsicos fue abandonado y
algunos fueron incluso reemplazados por propiedades CSS, como veremos en prximos captulos.
A pesar de esto, algunos se mantienen tiles, especialmente cuatro atributos genricos que
tienen una importancia particular en el desarrollo de sitios web y aplicaciones en HTML5:
classEste atributo nos permite trabajar con un grupo de elementos que comparten
caractersticas similares. Por ejemplo, utilizando el valor del atributo class podemos asignar
el mismo tipo de letra y estilos a textos ubicados en diferentes partes del documento.
idEste atributo nos permite asignar un identificador nico a cada elemento. Esta es la
mejor manera de acceder a un elemento HTML especfico desde CSS o Javascript.
styleEste atributo nos permite asignar estilos CSS a cada elemento individualmente. Como
veremos en el Captulo 2, es una buena prctica evitar el uso de este atributo y en su lugar
asignar estilos a elementos HTML referenciando sus atributos class e id.
nameEste es un viejo atributo que an tiene utilidad cuando trabajamos con formularios.
Se usa para declarar el nombre del elemento. En el Captulo 5 podr encontrar ms
informacin.
Adems de estos atributos generales, existen otros atributos ms especficos, como el
atributo lang para el elemento <html> introducido anteriormente. Dos que vale la pena
mencionar son href para los elementos <link> y <a> y el atributo src para elementos que
representan medios como <img> (imgenes), <video>, <audio>, etc. Ambos atributos indican
la ruta del archivo que va a ser ledo o accedido. Pruebe el prximo ejemplo en su navegador.
3|P gi na
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Segundo Documento HTML</title>
</head>
<body>
<img src="http://www.formasterminds.com/content/myimage.jpg">
</body>
</html>
Listado 1-2: Usando el elemento <img> y el atributo src para mostrar una imagen
Conceptos Bsicos: El elemento <img> nos permite cargar y mostrar una
imagen en pantalla. Es un elemento simple, sin una etiqueta de cierre, que
junto con el atributo src para declarar la ruta de la imagen tambin incluye los
atributos width y height para declarar su tamao.
Estudiaremos y experimentaremos aplicaciones prcticas de estos y otros atributos en
siguientes captulos.
Elementos Tradicionales
Algunos elementos en HTML5 quedaron en desuso, otros cambiaron su propsito y nuevos
fueron agregados. Entre estos se encuentran elementos que ya no se consideran parte del
lenguaje, como <center>, <frame> o <font>. Este ltimo es probablemente el ms
significativo. El elemento <font>, actualmente reemplazado en la mayora de los casos por el
elemento <span>, fue usado hasta HTML4 para mostrar texto en pantalla. Otros elementos
como <i> o <b>, anteriormente utilizados para resaltar el texto, tienen ahora un significado
diferente, mientras que nuevos elementos como <mark>, <address> o <time>, por ejemplo,
fueron agregados para proveer una mejor manera de describir y presentar el contenido del
documento.
IMPORTANTE: Este libro se enfoca en las mejoras introducidas por HTML5.
Conceptos presentados anteriormente por otras versiones de HTML sern solo
explicados en la seccin Conceptos Bsicos. Para un estudio ms profundo del
lenguaje HTML y para acceder a la lista completa de elementos HTML vlidos
que puede usar en sus proyectos, visite nuestro sitio web y siga los enlaces de
este captulo.
1.3 Estructura Global

Los documentos HTML estn estrictamente organizados. Cada parte del documento es
diferenciada, declarada y encerrada entre etiquetas especficas. En esta parte del captulo, vamos
a ver cmo construir la estructura global de un documento HTML y cmo este proceso fue
modificado en HTML5.
Hgalo Usted Mismo: Cree un nuevo documento en su editor de texto para
probar en su navegador los cdigos HTML que presentamos a continuacin.
4|P gina
Esto lo ayudar a recordar los nuevos elementos y acostumbrarse a sus

funciones.
IMPORTANTE: Los navegadores asignan estilos bsicos a cada elemento. Para
ver la estructura creada por el cdigo HTML en la pantalla, necesitamos asignar
nuestros propios estilos utilizando el lenguaje CSS. Estudiaremos CSS en los
captulos 2 y 3.
<!DOCTYPE>
Lo primero que debemos hacer es indicar el tipo de documento que estamos creando. Los
navegadores pueden procesar diferentes tipos de archivo. Para asegurar que nuestro documento
es interpretado correctamente como cdigo HTML, debemos declarar su tipo al inicio. En HTML5
esto se logra con la siguiente lnea:
<!DOCTYPE html>
Listado 1-3: Usando el elemento <!DOCTYPE>

IMPORTANTE: Esta lnea debe ser la primera del archivo, sin ningn espacio o
lnea previa. Esta es la forma de activar el modo estndar y forzar a los
navegadores a interpretar HTML5 cuando es posible o ignorarlo en caso
contrario.
Hgalo Usted Mismo: Puede comenzar a escribir el cdigo HTML en su archivo
ahora mismo y agregar los dems elementos ms adelante a medida que son
estudiados.
<html>
Luego de declarar el tipo de documento, el siguiente paso es construir la estructura HTML. Como
siempre, la raz de nuestro rbol es el elemento <html>. Este elemento encierra todo nuestro
cdigo HTML.
<!DOCTYPE html>
<html lang="es">
</html>
Listado 1-4: Usando el elemento <html>

El atributo lang en la etiqueta de apertura <html> es el nico atributo que necesitamos
declarar para este elemento en HTML5. Este atributo define el lenguaje humano del contenido
del documento que estamos creando (en este caso, es por Espaol).
IMPORTANTE: HTML5 es extremadamente flexible con respecto a la estructura
y los elementos usados para construirla. El elemento <html> puede ser
incluido sin atributo alguno o puede incluso no ser incluido. Por compatibilidad
(y algunas otras razones que no vale la pena mencionar aqu), recomendamos
5|P gi na
que siga algunas reglas bsicas. En las siguientes pginas vamos a explicar cmo
construir un documento HTML de acuerdo a lo que consideramos una buena
prctica.
Para encontrar otros valores de lenguajes para el atributo lang, puede consultar el siguiente
enlace: www.w3schools.com/tags/ref_language_codes.asp.
<head>
Continuemos construyendo nuestro documento. El cdigo HTML insertado entre las etiquetas
<html> tiene que ser separado entre dos secciones principales. Manteniendo lo establecido para
anteriores versiones de HTML, la primera seccin es la cabecera y la segunda el cuerpo. El
siguiente paso es agregar estas dos secciones al cdigo usando los elementos ya conocidos
<head> y <body>.
La cabecera <head> va primero, por supuesto, y al igual que el resto de los elementos
estructurales incluye una etiqueta de apertura y una de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
Listado 1-5: Usando el elemento <head>

La etiqueta por s misma no ha cambiado desde anteriores versiones, y su propsito es
exactamente el mismo. Dentro de las etiquetas <head> definiremos el ttulo de nuestra pgina
web, declararemos la codificacin de los caracteres usada por el documento, proveeremos
informacin general acerca del documento e incorporaremos los archivos externos necesarios
para agregar estilos, cdigos o incluso imgenes requeridas para generar la pgina web en
pantalla.
Excepto por el ttulo y algunos conos, el resto de la informacin incorporada al documento
entre las etiquetas <head> no es visible para el usuario.
<body>
La otra seccin importante que forma parte de la organizacin principal del documento es el
cuerpo. El cuerpo es la parte visible del documento y es especificado con las etiquetas <body>.
Este elemento no ha cambiado mucho desde versiones anteriores de HTML.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Listado 1-6: Usando el elemento <body>
6|P gina
<meta>
Es tiempo de construir la cabecera del documento. Varios cambios e innovaciones se
incorporaron a la cabecera, entre ellos se encuentra la etiqueta que define la codificacin para
los caracteres del documento. Esta es una etiqueta meta que especifica cmo el texto va a ser
presentado en pantalla (con qu tipo de caracteres).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Listado 1-7: Usando el elemento <meta>

La innovacin incorporada en HTML5 para esta etiqueta, como en la mayora de los casos, fue
simplemente simplificacin. La nueva etiqueta meta para la codificacin de los caracteres es ms
breve y simple. Por supuesto, puede cambiar utf-8 por la codificacin que necesite usar y
puede agregar otras etiquetas meta como description o keywords, como mostramos en el
prximo ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Este es un ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, Javascript">
</head>
<body>
</body>
</html>
Listado 1-8: Agregando ms elementos <meta>

Conceptos Bsicos: Existen varias etiquetas <meta> que pueden ser usadas en
un documento para declarar informacin general, pero esta informacin no es
mostrada en la ventana del navegador; es solo importante para los
navegadores y dispositivos que necesitan hacer una lectura previa u obtener un
sumario de los datos relevantes y la configuracin de nuestro documento.
Como mencionamos anteriormente, aparte del ttulo y algunos conos, la
mayora de la informacin insertada entre las etiquetas <head> no es visible
para los usuarios. En el cdigo del Listado 1-8, el atributo name dentro de la
etiqueta <meta> especifica su tipo, mientras que el atributo content declara
su valor, pero ninguno de estos valores es mostrado en pantalla. Para aprender
ms acerca de las etiquetas <meta>, visite nuestro sitio web y siga los enlaces
de este captulo.
7|P gi na
IMPORTANTE: La etiqueta <meta> que especifica el tipo de codificacin

utilizada no es solo una indicacin para el navegador sino tambin una
declaracin de los caracteres usados durante la creacin del documento.
Siempre debemos configurar nuestro editor de texto o aplicacin de desarrollo
para que la codificacin de caracteres al grabar el archivo sea la misma
especificada en el cdigo HTML. Algunos editores usan la codificacin ASCII por
defecto. Para poder visualizar todos los caracteres especiales del idioma
espaol en nuestro documento de ejemplo, deber cambiar esta codificacin
por utf-8.
En HTML5 no es necesario indicar el cierre de etiquetas simples con una barra al final, pero la
aplicacin de este mtodo es admitida por cuestiones de compatibilidad. Por este motivo, puede
escribir el cdigo anterior de la siguiente forma:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="description" content="Este es un ejemplo" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
</body>
</html>
Listado 1-9: Etiquetas cerradas
<title>
La etiqueta <title>, como siempre, especifica el ttulo del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Este en un ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el ttulo del documento</title>
</head>
<body>
</body>
</html>
Listado 1-10: Usando el elemento <title>

Conceptos Bsicos: El texto entre las etiquetas <title> es el ttulo para el
documento que estamos creando. Generalmente este texto es mostrado en la
parte superior de la ventana del navegador.
8|P gina
<link>
Otro elemento importante a incluir en la cabecera del documento es <link>. Este elemento es
usado para incorporar al documento estilos, cdigos, imgenes o conos desde archivos externos.
Uno de los usos ms comunes de <link> es incorporar estilos por medio de un archivo CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
</body>
</html>
Listado 1-11: Usando el elemento <link>

En HTML5 ya no es necesario declarar el tipo de estilos que 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 relacin y especifica la relacin entre el documento
y el archivo que estamos incorporando. En este caso, el atributo rel tiene el valor stylesheet
(hoja de estilos) que le dice al navegador que el archivo misestilos.css es un archivo CSS con
los estilos requeridos para mostrar la pgina web.
El atributo href, como ya explicamos, declara la ruta del archivo a ser ledo. Este archivo, por
supuesto, debe tener un contenido acorde al valor del atributo rel. En este ejemplo, la ruta
apunta a un archivo CSS (stylesheet) conteniendo estilos para el documento.
Conceptos Bsicos: Una hoja de estilos es un grupo de reglas de formato que
nos ayudarn a cambiar la apariencia del documento en pantalla (por ejemplo,
el tamao y el color del texto). Sin estas reglas, el texto y cualquier otro
elemento sern mostrados en pantalla usando los estilos estndar provistos
por el navegador. Los estilos son reglas simples, compuestas generalmente por
una sola lnea de cdigo que puede ser declarada en el mismo documento
HTML. Como veremos ms adelante, no es estrictamente necesario obtener
esta informacin desde archivos externos, pero es recomendado como una
buena prctica. Cargar las reglas CSS desde archivos externos nos permitir
organizar el documento principal de una mejor manera, incrementar la
velocidad de descarga de nuestro sitio web y aprovechar todas las ventajas de
HTML5.
IMPORTANTE: En el Captulo 2 estudiaremos el lenguaje CSS y crearemos el
archivo misestilos.css para proveer estilos a nuestro documento.
Con la ltima insercin podemos considerar la cabecera de nuestro documento terminada. Es
tiempo de trabajar sobre el cuerpo, donde la magia comienza.
9|P gi na
1.4 Estructura del Cuerpo

La estructura del cuerpo (el cdigo entre las etiquetas <body>) generar la parte visible de
nuestro documento. Este es el cdigo que producir nuestra pgina web.
HTML siempre ofreci formas diferentes de construir y organizar la informacin en el cuerpo
de un documento. Uno de los primeros elementos utilizados para este propsito fue <table>.
Las tablas le permitan al autor acomodar datos, textos, imgenes y herramientas dentro de filas
y columnas de celdas, incluso cuando no haban sido concebidas para ello.
En los primeros das de la web, las tablas representaron una revolucin, un gran paso
adelante en la visualizacin de los documentos y en la experiencia ofrecida a los usuarios. Ms
adelante, otros elementos reemplazaron gradualmente la funcin de las tablas, ofreciendo una
manera diferente de hacer lo mismo pero con menos cdigo y de forma ms eficiente, facilitando
la creacin de documentos, su portabilidad y mantenimiento. Uno de ellos fue el elemento
<div>, el cual comenz a dominar la escena. Con el surgimiento de aplicaciones web ms
interactivas y la integracin entre HTML, CSS y Javascript, el uso de este elemento se volvi una
prctica comn. Pero <div>, as como <table>, no ofrece mucha informacin sobre las partes
del cuerpo que representa. Cualquier contenido, desde imgenes hasta mens, textos, enlaces,
cdigos, o formularios, por citar algunos, puede ser insertado entre las etiquetas de apertura y
cierre del elemento <div>. En otras palabras, la palabra clave div solo declara una divisin en el
cuerpo, como la celda de una tabla, pero no indica de ninguna manera qu clase de divisin es,
cul es su propsito o qu se encuentra en su interior.
Para los usuarios, estas pistas e indicaciones no son tan importantes, pero los navegadores
necesitan realizar una correcta interpretacin del documento para poder procesarlo. Luego de la
revolucin de los dispositivos mviles y las nuevas formas en que la gente accede la web, la
identificacin de cada parte del documento se volvi ms relevante que nunca.
Teniendo esto en cuenta, HTML5 incorpora nuevos elementos que ayudan a identificar cada
una de las reas del documento y organizar el cuerpo. En HTML5, las secciones ms importantes
de un documento son diferenciadas y la estructura principal ya no depende de los elementos
<div> o <table>.
Cmo aplicamos estos elementos depende exclusivamente de nosotros, pero las palabras
clave asignadas a cada uno nos darn una idea aproximada de su funcin. Normalmente, un sitio
web o una aplicacin web son divididos en varias reas visuales con el propsito de facilitar la
interactividad con el usuario y mejorar su experiencia. Las palabras clave de cada nuevo
elemento HTML5 se encuentran directamente relacionadas con estas reas visuales, como
veremos pronto.
Organizacin
La figura 1-1 muestra una distribucin de contenido actualmente presente en la mayora de los
sitios web. A pesar del hecho de que cada diseador crea sus propios diseos, un sitio web puede
ser estudiado considerando las siguientes secciones:
10 | P g i n a
Figura 1-1: Representacin visual de una tpica pgina web

La parte superior, descripta como la Cabecera, es donde usualmente se presenta el logo, el
nombre, subttulos y breve descripcin del sitio o pgina web.
Debajo encontrar la Barra de Navegacin en donde la mayora de los desarrolladores
ofrecen un men o una lista de enlaces para facilitar el acceso a los distintos contenidos. Desde
estos enlaces los usuarios son dirigidos a diferentes pginas o documentos, generalmente dentro
del mismo sitio.
El contenido ms relevante de la pgina web es generalmente ubicado en el centro de la
estructura. Esto incluye informacin y enlaces. La mayora de las veces este contenido es dividido
en varias filas y columnas. En el ejemplo de la Figura 1-1 se pueden ver solo dos columnas,
Informacin Principal y Barra Lateral, pero esta seccin es extremadamente flexible y los
diseadores normalmente la adaptan de acuerdo a sus necesidades insertando ms filas,
dividiendo las columnas en pequeos bloques o generando diferentes combinaciones y
distribuciones. El contenido presentado en esta parte de la estructura es de alta prioridad. En la
estructura del ejemplo, la seccin Informacin Principal podra contener una lista de artculos,
descripciones de productos, entradas de blog o cualquier informacin importante para el sitio y
la pgina web. Por otro lado, la seccin Barra Lateral, podra mostrar enlaces apuntando a cada
uno de los elementos de la parte principal. En un blog, por ejemplo, esta columna puede ofrecer
una lista de enlaces apuntando a cada entrada del blog, informacin sobre el autor, etc.
Al final de la estructura tpica de un sitio web se encuentra una barra llamada Institucional.
La llamamos de este modo porque sta es el rea donde la informacin general acerca del sitio
web, del autor o la compaa es mostrada. Esto incluye enlaces con informacin adicional sobre
reglas, trminos y condiciones, mapas del sitio o cualquier otro dato que el desarrollador
considere oportuno compartir para completar la pgina web.
11 | P g i n a
Figura 1-2: Representacin visual de la estructura de un blog tpico

Figura 1-2 es un ejemplo de un blog tpico. En este ejemplo se puede identificar fcilmente
cada parte del diseo web que consideramos anteriormente.
1.
2.
3.
4.
5.
Cabecera
Barra de Navegacin
Seccin Informacin Principal
Barra Lateral
Pie de pgina o barra Institucional
Esta representacin simple de un blog nos ayuda a entender que cada seccin de un sitio web
tiene un propsito. A veces este propsito no es muy claro, pero la esencia es perceptible y
podremos an reconocer cualquiera de estas secciones en prcticamente todo sitio web.
HTML5 considera esta estructura bsica y provee nuevos elementos para diferenciar y
declarar cada una de sus partes. Desde ahora podemos decirle al navegador para qu es cada
seccin.
La figura 1-3 a continuacin muestra la organizacin de un sitio web tpico que vimos con
anterioridad, pero esta vez identificada con los correspondientes elementos de HTML5 (etiquetas
de apertura y cierre).
12 | P g i n a
Figura 1-3: Representacin de la organizacin de un documento usando elementos de HTML5
<header>
Uno de los nuevos elementos incorporados por HTML5 es <header>. Este elemento no debe ser
confundido con <head>, usado anteriormente para construir la cabecera no visible del
documento. Del mismo modo que lo hace el elemento <head>, el elemento <header> tiene el
propsito de proveer informacin introductoria (como ttulos, subttulos o logos) pero ambos
difieren en su alcance. Mientras que <head> informa al navegador sobre datos particulares del
documento, <header> est destinado a ser usado en el cuerpo o en secciones del mismo para
ofrecer informacin sobre esas reas en particular.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<h1>Este es el ttulo principal del sitio web</h1>
</header>
</body>
</html>
Listado 1-12: Usando el elemento <header>
13 | P g i n a
En el Listado 1-12 definimos el ttulo de la pgina o el sitio web usando el elemento

<header>. Recuerde que esto no es lo mismo que el ttulo del documento declarado
previamente en la cabecera. La insercin del elemento <header> representa el inicio del cuerpo
y de la parte visible del documento. De ahora en ms podremos ver el resultado de nuestro

cdigo en la ventana del navegador.
Hgalo Usted Mismo: Si ha seguido las instrucciones desde el comienzo de este
captulo, ya debera disponer de un archivo de texto con los cdigos HTML
presentados hasta el momento listo para ser probado en el navegador. Si no lo
ha hecho, todo lo que necesita es copiar el cdigo del Listado 1-12 dentro de
un nuevo archivo de texto utilizando el editor de texto de su preferencia (por
ejemplo, Bloc de Notas). Grabe el archivo con el nombre que desea y la
extensin.html, y bralo en su navegador. Recuerde que al grabar el archivo
debe especificar la misma codificacin usada en el cdigo. En este caso utf-8.
Conceptos Bsicos: El elemento <h1>, aplicado en el cdigo del Listado 1-12, es
un viejo elemento HTML usado para definir cabeceras. Existe un rango de
nmeros disponibles, desde 1 a 6, para indicar la importancia de la cabecera y
su contenido. El elemento <h1> es el de mayor importancia y <h6> el de
menor importancia; por lo tanto, <h1> ser usado para mostrar el ttulo
principal y el resto de los subttulos de las diferentes secciones del documento.
Ms adelante estudiaremos cmo la implementacin de estos elementos
cambi en HTML5.
<nav>
La siguiente seccin en nuestro ejemplo es la Barra de Navegacin. Esta barra es generada por el
elemento <nav>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
</body>
</html>
Listado 1-13: Usando el elemento <nav>
14 | P g i n a
Como puede ver en el Listado 1-13, el elemento <nav> se encuentra entre las etiquetas
<body> pero luego de la etiqueta de cierre de la cabecera (</header>), no dentro del elemento
<header>. Esto se debe a que <nav> no es una parte de la cabecera sino una nueva seccin.
Anteriormente mencionamos que el orden en el que elegimos ubicar los elementos en
HTML5 depende exclusivamente de nosotros. Esto significa que HTML5 es muy verstil y solo nos
da los parmetros y elementos bsicos con los que trabajar, pero cmo usarlos es decisin
nuestra. Un ejemplo de esta versatilidad es que el elemento <nav> podra ser insertado dentro
del elemento <header> o en cualquier otra seccin del cuerpo. Sin embargo, siempre debemos
considerar que estos nuevos elementos fueron creados para proveer ms informacin a los
navegadores y ayudar a cada nuevo programa y dispositivo disponible a identificar las partes ms
relevantes del documento. Para mantener nuestro cdigo HTML portable y legible, es mejor
seguir las reglas estndar y mantener el documento tan claro como sea posible. El elemento
<nav> est destinado a contener ayuda para la navegacin, como el men principal o bloques de
navegacin, y deberamos usarlo con ese propsito.
Conceptos Bsicos: El elemento <ul>, introducido en el cdigo del Listado 113, define una lista de tems sin un orden especfico. Para declarar cada tem
debemos utilizar elementos <li>. Dentro de la estructura tipo rbol de HTML,
estos elementos son hijos de <ul> (son introducidos dentro de las etiquetas de
apertura y cierre <ul>) y su contenido es mostrado en pantalla de acuerdo al
orden en el que fueron declarados. Para aprender ms acerca de estos
elementos tradicionales de HTML, visite nuestro sitio web y siga los enlaces de
este captulo.
<section>
La siguiente parte del diseo standard son dos reas que en la Figura 1-1 llamamos Informacin
Principal y Barra Lateral. Como explicamos anteriormente, Informacin Principal contiene la
informacin ms relevante del documento y puede ser encontrada en diferentes formas (por
ejemplo, dividida en varios bloques u otras columnas). Debido a que el propsito de estas
columnas y bloques es ms general, el elemento de HTML5 que especifica esta seccin es
simplemente llamado <section>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
15 | P g i n a
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
</html>
Listado 1-14: Usando el elemento <section>

Al igual que la Barra de Navegacin, la columna Informacin Principal es una seccin aparte.
Por este motivo, Informacin Principal se ubica debajo de la etiqueta de cierre </nav>.
Hgalo Usted Mismo: Compare el Listado 1-14 con la estructura de la Figura 13 para entender cmo las etiquetas son ubicadas en el cdigo y qu secciones
representan en la pgina web.
IMPORTANTE: Las etiquetas que representan cada seccin del documento
estn ubicadas en el cdigo en forma de listado, una debajo de la otra,
mientras que en la pantalla algunas de ellas se muestran lado a lado (por
ejemplo, las columnas Informacin Principal y Barra Principal). En HTML5, la
representacin de los elementos en la pantalla ha sido relegada a CSS. El diseo
final se logra asignando estilos CSS a cada elemento. Estudiaremos CSS en el
prximo captulo.
<aside>
En la organizacin tpica de un sitio web (Figura 1-1), la Barra Lateral se encuentra a un lado de la
seccin Informacin Principal. Esta es una columna o seccin que generalmente contiene datos
relacionados con la informacin principal pero que no son relevantes o importantes.
En el ejemplo de organizacin de un blog estndar (Figura 1-2), la Barra Lateral contiene una
lista de enlaces que apuntan a cada entrada del blog y proveen informacin adicional sobre el
autor del blog. La informacin dentro de esta columna est relacionada con la informacin
principal de la pgina web pero no es relevante por s misma. Siguiendo el ejemplo del blog,
podemos ver que las entradas del blog son relevantes para la pgina web, pero los enlaces y citas
existen solo con el propsito de facilitar la navegacin y no son lo que realmente interesan al
usuario.
En HTML5 podemos diferenciar esta informacin secundaria con el elemento <aside>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
16 | P g i n a
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Cita sobre el artculo nmero uno</blockquote>
<blockquote>Cita sobre el artculo nmero dos</blockquote>
</aside>
</body>
</html>
Listado 1-15: Usando el elemento <aside>

La seccin creada por el elemento <aside> puede estar ubicada a la derecha o a la izquierda
de nuestra pgina web de ejemplo; la seccin no tiene una posicin predefinida. El elemento
<aside> solo describe la informacin que contiene, no su lugar en la estructura. Este elemento
puede ocupar cualquier parte de la organizacin y puede ser usado siempre que su contenido no
sea considerado parte del contenido principal de la pgina web. Por ejemplo, podemos usar el
elemento <aside> dentro de un elemento <section>, o incluso entre la informacin relevante
(por ejemplo, para la inclusin de una cita).
Conceptos Bsicos: El elemento <blockquote>, utilizado para mostrar
informacin relacionada con cada artculo en el Listado 1-15, define un bloque
de texto que cita otra parte del documento. Los navegadores asignan un
margen por defecto a estos elementos, otorgando un formato especfico al
prrafo que contienen.
<footer>
Para finalizar la construccin de la estructura elemental de nuestro documento HTML5, solo
necesitamos agregar un elemento ms. Ya hemos creado la cabecera y el cuerpo, secciones con
ayuda para la navegacin, reas donde mostrar la informacin ms relevante y una barra lateral
en la que podemos contener datos adicionales. Lo nico que nos queda por hacer es cerrar el
diseo y darle un toque final al cuerpo del documento. HTML5 provee un elemento especfico
para este propsito llamado <footer>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
17 | P g i n a
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
Derechos Reservados © 2013-2014
</footer>
</body>
</html>
Listado 1-16: Usando el elemento <footer>

En la tpica organizacin de una pgina web (Figura 1-1), la seccin llamada Institucional es
definida por las etiquetas <footer>. Esto se debe a que la seccin representa el final (o pie) del
documento, y esta parte de la pgina web es normalmente utilizada para compartir informacin
general acerca del autor o la compaa detrs del proyecto, como los derechos de autor,
trminos y condiciones, etc.
Generalmente, el elemento <footer> representar el final de nuestro documento y tendr
el propsito descripto anteriormente. Sin embargo, la etiqueta <footer> puede ser utilizada
varias veces dentro del cuerpo para representar tambin el final de diferentes secciones (la
etiqueta <header> puede ser utilizada varias veces del mismo modo). Estudiaremos estos casos
ms adelante.
1.5 Dentro del Cuerpo del Documento

El cuerpo de nuestro documento est listo. Ya finalizamos la estructura bsica de nuestro sitio
web pero an nos queda trabajar en su contenido. Los elementos de HTML5 estudiados hasta el
momento nos ayudan a identificar cada seccin de la estructura y asignar un propsito estricto
para cada una de ellas, pero lo que realmente importa de nuestro sitio web es lo que se
encuentra dentro de esas secciones.
La mayora de los elementos presentados anteriormente fueron creados para proveer una
estructura al documento HTML que puede ser identificada y reconocida por navegadores y
nuevos dispositivos. Hemos aprendido acerca del elemento <body> usado para declarar la parte
visible del documento, las etiquetas <header> que encierran informacin importante del
cuerpo, el elemento <nav> para ofrecer ayuda en la navegacin, las etiquetas <section> que
contienen la informacin ms relevante de la pgina web, y los elementos <aside> y <footer>
para presentar informacin adicional. Pero ninguno de estos elementos declara las
caractersticas del contenido. Todos tienen un propsito estructural muy especfico.
18 | P g i n a
Cuanto ms profundo nos internamos en el documento, ms cerca estamos de su contenido.

Esta informacin estar compuesta por diferentes elementos visuales como ttulos, textos,
imgenes, videos y aplicaciones interactivas, entre otros. Debido a esto, necesitamos tener la
posibilidad de diferenciar estos elementos y establecer relaciones entre ellos.
<article>
La organizacin considerada anteriormente (Figura 1-1) es la ms comn y bsica en los sitios
web actuales, pero es adems representativa de cmo el contenido de las pginas web es
mostrado estos das. De la misma manera que los blog se dividen en entradas, otros sitios web
tambin presentan la informacin principal repartida en varias partes que comparten similares
caractersticas. El elemento <article> nos permite identificar cada una de estas partes.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer artculo
</article>
<article>
Este es el texto de mi segundo artculo
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Listado 1-17: Usando el elemento <article>
19 | P g i n a
Como se puede ver en el cdigo HTML del Listado 1-17, las etiquetas <article> estn
ubicadas dentro de etiquetas <section>. Las etiquetas <article> pertenecen a esa seccin,
son sus hijas del mismo modo que cada elemento dentro de las etiquetas <body> es hijo de este
elemento. Pero al igual que cada uno de los elementos dentro del cuerpo, las etiquetas
<article> son declaradas una despus de la otra. Cada una es una parte independiente de
<section>, como se muestra en la Figura 1-4.
Figure 1-4: Representacin Visual de las etiquetas <article> dentro de la seccin creada para
contener la informacin ms importante del documento
Conceptos Bsicos: Como ya hemos explicado, la estructura del cdigo HTML
puede ser descripta como un rbol, con el elemento <html> como su raz. Otra
forma de describir la relacin entre elementos es nombrndolos como padres,
hijos o hermanos de acuerdo a su posicin en esta estructura tipo rbol. Por
ejemplo, en un tpico 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.
El elemento <article> no est limitado por su nombre (no est limitado a artculos). Este
elemento tiene el propsito de contener una unidad de contenido independiente. Por esto, no
solo puede incluir artculos sino adems mensajes de foro, entradas de un blog, comentarios de
usuario, etc. El elemento agrupa porciones de informacin que estn relacionadas entre s de
acuerdo a la naturaleza de los datos que contienen.
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 con anterioridad. Estos elementos son
portables y pueden ser aplicados no solo al cuerpo sino tambin a cada seccin de nuestro
documento.
20 | P g i n a
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Este es un ejemplo HTML5">
</head>
<body>
<header>
<h1>Este es el ttulo principal de nuestro sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Ttulo del primer mensaje</h1>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<h1>Ttulo del segundo mensaje</h1>
</header>
Este es el texto de mi segundo mensaje
<footer>
</footer>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Listado 1-18: Construyendo la estructura de un elemento <article>

Ambos mensajes insertados en el cdigo del Listado 1-18 fueron construidos con el elemento
<article> y tienen una estructura especfica. Primero utilizamos las etiquetas <header> para
contener el ttulo definido con el elemento <h1>. Debajo se encuentra el contenido mismo, que
es el texto del mensaje. Finalmente, luego del texto, el elemento <footer> es utilizado para
mostrar el nmero de comentarios.
21 | P g i n a
Conceptos Bsicos: El elemento <p> declarado dentro de <footer> en cada

mensaje del Listado 1-18 es usado para definir un prrafo. Navegadores
otorgan estilos por defecto a estos elementos que incluyen mrgenes y un salto
de lnea. Adems de la declaracin de prrafos, podemos aprovechar las
propiedades de este elemento para proveer formato a textos cortos, como en
este caso.
<hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada
elemento <article>, incorporamos etiquetas <h1> para especificar un ttulo. Estas etiquetas
son todo lo que necesitamos cuando tenemos que crear una lnea de cabecera en las distintas
partes del documento, pero a veces tambin debemos agregar subttulos o ms informacin para
declarar de qu se trata la pgina web o una seccin determinada. De hecho, el elemento
<header> tiene el propsito de contener otros elementos, como tablas de contenidos,
formularios de bsqueda, textos breves, logos, etc.
Para construir la cabecera podemos aprovechar el resto de las etiquetas H: <h1>, <h2>,
<h3>, <h4>, <h5> y <h6>, pero por propsitos de procesamiento interno, y para evitar generar
mltiples secciones o subsecciones durante la interpretacin del documento por parte del
navegador, estas etiquetas deben insertarse de forma agrupada. Para este propsito, HTML5
incluye el elemento <hgroup>.
IMPORTANTE: El elemento <hgroup> fue removido e incluido varias veces en
la especificacin de HTML5. Le recomendamos consultar el estado actual en el
sitio web oficial. Para mayor informacin, visite nuestra pgina web y siga los
enlaces de este captulo.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
22 | P g i n a
<hgroup>
<h2>Subttulo del primer mensaje</h2>
</hgroup>
<p>publicado 12-04-2014</p>
</header>
<footer>
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Subttulo del segundo mensaje</h2>
</hgroup>
</header>
<footer>
</footer>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Listado 1-19: Usando el elemento <hgroup>

Las etiquetas H deben conservar su jerarqua, lo que significa que primero tenemos que
declarar el ttulo con la etiqueta <h1>, luego usar <h2> para el subttulo, y as sucesivamente. Sin
embargo, a diferencia de viejas versiones de HTML, HTML5 nos permite reusar las etiquetas H y
reconstruir esta jerarqua una y otra vez en cada seccin del documento. En el ejemplo del
Listado 1-19, agregamos un subttulo y datos adicionales (metadata) a cada mensaje y
agrupamos el ttulo y el subttulo juntos con <hgroup>, reusando la jerarqua <h1> y <h2> en
cada elemento <article>.
IMPORTANTE: El elemento <hgroup> es necesario cuando tenemos un ttulo y
un subttulo o ms etiquetas H juntas en el mismo elemento <header>. Este
elemento puede contener solo etiquetas H y esa es la razn por la que en este
ejemplo mantuvimos los datos adicionales (metadata) fuera. Si solo contamos
con un elemento <h1> o el elemento <h1> junto a datos adicionales
(metadata), no necesitamos agruparlos juntos. Por ejemplo, en el elemento
<header> asignado al cuerpo no usamos <hgroup> porque solo tenemos una
etiqueta H en su interior. Siempre recuerde que <hgroup> est destinado a
agrupar etiquetas H, exactamente como su nombre lo indica.
Navegadores y programas que procesan y muestran sitios web leen el cdigo HTML y crean
su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna
23 | P g i n a
es dividida en secciones que son independientes de las divisiones del diseo grfico de la pgina
web o de las creadas por los elementos <section>. Estas son secciones conceptuales generadas
durante la interpretacin del cdigo. El elemento <header> no crea una de estas secciones por
s mismo. Esto significa que los elementos dentro de <header> representarn niveles diferentes
y pueden generar diferentes secciones internamente. El elemento <hgroup> fue creado con el
propsito de agrupar las etiquetas H y evitar una interpretacin errnea por parte del
navegador.
Conceptos Bsicos: Metadata es un conjunto de datos que describen y proveen
informacin sobre otros datos. En nuestro ejemplo, metadata es la fecha que
indica cundo el mensaje fue insertado.
<figure> y <figcaption>
La etiqueta <figure> fue creada para poder ser ms especficos a la hora de declarar el
contenido del documento. Antes de que este elemento fuera introducido, no podamos
identificar contenido que era parte de la informacin principal pero auto contenido, como
ilustraciones, fotos, videos, etc. Normalmente, estos elementos son parte del contenido
relevante de la pgina web pero pueden ser removidos sin afectar o interrumpir el flujo del
documento. Cuando este tipo de informacin est presente, el elemento <figure> puede ser
usado para identificarla.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Subttulo del primero mensaje</h2>
</hgroup>
</header>
24 | P g i n a
<figure>
<img src="http://www.formasterminds.com/content/myimage.jpg">
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Subttulo del segundo mensaje</h2>
</hgroup>
</header>
<footer>
</footer>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Listado 1-20: Usando los elementos <figure> y <figcaption>

En el primer mensaje del Listado 1-20, insertamos una imagen luego del texto del mensaje
(<img src="http://www.formasterminds.com/content/myimage.jpg">). Esta es una
prctica comn; a menudo el texto es enriquecido con imgenes o videos. Las etiquetas
<figure> nos permiten encerrar estos complementos visuales y diferenciarlos del resto de la
informacin.
En el Listado 1-20 tambin podemos ver un elemento extra dentro de <figure>.
Generalmente, unidades de informacin como imgenes o videos son descriptas por un texto
breve colocado en la parte inferior. HTML5 provee el elemento <figcaption> para ubicar e
identificar este subttulo. Estas etiquetas son usadas para encerrar el texto relacionado con el
contenido de <figure> y establecer una conexin entre ambos elementos y sus contenidos.
<details> y <summary>
Una caracterstica importante de los sitios web es la habilidad de mostrar informacin adicional
cuando es requerida por el usuario. Para evitar el uso de Javascript y facilitar la creacin de este
tipo de herramientas, HTML5 incorpora los elementos <details> y <summary>. El elemento
<details> declara la herramienta. Dentro de este elemento especificamos el ttulo de la
herramienta usando el elemento <summary>, y agregamos debajo la informacin a ser revelada.
25 | P g i n a
<details>
<summary>Clic para Expandir</summary>
<p>Hola! Soy Visible!</p>
</details>
Listado 1-21: Creando una herramienta con <details> y <summary>
Figura 1-5: El elemento <details> antes y despus de ser cliqueado
1.6 Elementos Nuevos y Viejos

HTML5 fue desarrollado con el objetivo de simplificar, especificar y organizar el cdigo. Para
lograr este propsito, nuevos elementos y atributos fueron agregados y HTML fue integrado con
CSS y Javascript. Estas incorporaciones y mejoras sobre versiones anteriores estn relacionadas
no solo con nuevos componentes sino tambin con la forma en que aplicamos los ya existentes.
<mark>
La etiqueta <mark> fue agregada para resaltar parte del texto que originalmente no era
considerado importante pero que es ahora relevante debido a la actividad del usuario. El mejor
ejemplo es un resultado de bsqueda. El elemento <mark> ser usado para resaltar la parte del
texto que concuerda con las palabras buscadas.
<span>Mi <mark>coche</mark> es rojo</span>
Listado 1-22: Usando el elemento <mark> para resaltar la palabra "coche"

Cuando alguien realiza una bsqueda en una pgina web de la palabra "coche", los resultados
podran ser mostrados con el cdigo del Listado 1-22. El texto breve representa los resultados de
la bsqueda y las etiquetas <mark> en el medio encierran la palabra que fue buscada. En algunos
navegadores, esta palabra ser resaltada con un fondo amarillo por defecto, pero podemos
sobrescribir estos estilos con los nuestros usando CSS, como veremos en siguientes captulos.
En el pasado, logrbamos un resultado similar utilizando el elemento <b>. Sin embargo, la
adicin de <mark> ayud a cambiar el significado y establecer un nuevo propsito para estos y
otros elementos relacionados, como describimos a continuacin:
<em>Este elemento es usado para indicar nfasis (reemplazando la etiqueta
<i> que
usbamos anteriormente).
<strong>Este elemento es usado para indicar importancia.

<mark>Este elemento resalta texto que es relevante de acuerdo a las circunstancias.
26 | P g i n a
<b>Este elemento debera ser usado para resaltar texto slo cuando no existe otro
elemento ms apropiado para la situacin.
<i>Este elemento ya no declara estilo de cursiva para un texto, ahora, de acuerdo con la
especificacin, representa una voz o estado de humor alternativo, como un pensamiento, un
trmino tcnico, etc.
<small>
La nueva especificidad de HTML es tambin evidente en elementos como <small>.
Previamente, este elemento presentaba cualquier texto en un tipo de letra pequea. La palabra
clave referenciaba el tamao del texto, independientemente de su significado o aplicacin. En
HTML5, el propsito del elemento <small> es representar letra pequea, como avisos legales,
descargos, etc.
<small>Derechos Reservados © 2014 MinkBooks</small>
Listado 1-23: Aviso legal con <small>
<cite>
Otro elemento que se ha vuelto ms especfico es <cite>. Ahora las etiquetas <cite> encierran
el ttulo de un trabajo, como un libro, una pelcula, una cancin, etc.
<span>Me gusta la pelcula <cite>Tentaciones</cite></span>
Listado 1-24: Citando una pelcula con <cite>
<address>
El elemento <address> es un viejo elemento de contenido que se ha convertido en un
elemento estructural. No tuvimos que usarlo anteriormente para construir nuestro documento
pero podra encajar perfectamente en algunas situaciones donde necesitamos presentar
informacin de contacto para el contenido de un elemento <article> o para el contenido
completo de <body>.
Este elemento debera ser incluido dentro de etiquetas <footer>, como en el siguiente
ejemplo:
<article>
<header>
<h1>Ttulo del mensaje</h1>
</header>
Este es el texto del mensaje
<footer>
<address>
<a href="http://www.jdgauchat.com">J.D Gauchat</a>
</address>
</footer>
</article>
Listado 1-25: Agregando informacin de contacto a un elemento <article>
27 | P g i n a
Conceptos Bsicos: La naturaleza de HTML est determinada por hipertexto,

un texto que presenta referencias a otros textos y permite a los lectores
moverse o navegar a travs de los documentos que conforman un sitio web. El
elemento <a>, implementado en el ejemplo del Listado 1-25, es usado para
crear los hiperenlaces necesarios para proveer esta caracterstica. Como ya
mencionamos, este elemento tiene un atributo importante llamado href para
declarar la ruta del documento al que estamos apuntando.
<wbr>
El elemento tradicional <br>, un elemento simple sin una etiqueta de cierre, era la nica
posibilidad de insertar un salto de lnea en un prrafo. Navegadores muestran un salto de lnea
en la posicin donde se encuentra este elemento. Pero esto es slo til cuando sabemos
exactamente dnde el salto de lnea debe ser generado. HTML5 introduce el nuevo elemento
<wbr> que sugiere la posibilidad de realizar un salto de lnea solo si es necesario. Esto asegura
que el navegador no dividir las lneas de texto en los lugares equivocados.
En el siguiente ejemplo, el navegador ejecutar un salto de lnea despus de mostrar la
primera lnea de texto, y luego, de acuerdo con el espacio disponible, mostrar la segunda lnea
completa o generar un salto de lnea al trmino del dominio:
<article>
<header>
</header>
Este es el texto del mensaje<br>
Visite esta URL: www.formasterminds.com<wbr>/content/bricks.jpg
</article>
Listado 1-26: Implementando los elementos <br> y <wbr>
<time>
En cada elemento <article> en el documento del Listado 1-20 incluimos una fecha para indicar
cundo el mensaje fue publicado. Para mostrar la fecha, usamos un elemento <p> dentro de
<header>, pero existe un elemento en HTML5 que cumple con este propsito especfico. El
elemento <time> nos permite declarar dos textos que representan la fecha y la hora, uno legible
por la ordenadores y otro que los humanos pueden entender.
<article>
<header>
<time datetime="2014-04-12" pubdate>publicado 12-04-2014</time>
</header>
Este es el texto del artculo
</article>
Listado 1-27: Fecha y hora usando el elemento <time>

En el Listado 1-27, el elemento <p> usado en anteriores ejemplos es reemplazado por el
nuevo elemento <time> para mostrar la fecha en la que el mensaje fue publicado. El atributo
28 | P g i n a
datetime tiene un valor que representa un formato de fecha legible por el ordenador. El
formato para este valor generalmente sigue un patrn como en el ejemplo: 2014-0412T12:10:45. Tambin incluimos el atributo pubdate, el cual es agregado para indicar que el
valor del atributo datetime representa una fecha de publicacin.
<data>
Para datos que no estn relacionados con una fecha y hora, podemos utilizar el elemento
<data>. Este elemento usa el atributo value para representar un valor legible por el ordenador.
<data value="32">Treinta y Dos</data>
Listado 1-28: Usando el elemento <data>
1.7 Atributos Nuevos y Viejos

En los primeros das del desarrollo web, el propsito de los atributos era proveer estilo grficos a
los elementos a los que eran aplicados. Con la integracin de HTML, CSS y Javascript, esta tarea
fue modificada. Ahora los atributos estn enfocados en declarar el tipo de contenido que el
elemento posee y el tipo de funcionalidad que tendr dentro de la estructura. Para lograr esto,
HTML5 alter algunas caractersticas de viejos atributos y agreg algunos nuevos.
Atributo data-*
Si necesitamos declarar datos adicionales, no solo para los elementos <data> y <time> sino
tambin para cualquier otro elemento HTML, el atributo data-* es la solucin que buscamos.
Este atributo ofrece la alternativa de asignar informacin adicional a un elemento sin exponerla
al usuario. Esta informacin ser destinada solo para uso del sitio web y ser accesible desde
cdigo Javascript, como estudiaremos ms adelante.
El nombre del atributo se compone por el prefijo data- seguido de un nombre
personalizado.
<p data-inicial="J" data-apellido="Gauchat">J.D Gauchat</p>
Listado 1-29: Usando el atributo data-*

IMPORTANTE: Trabajaremos ms profundamente con este atributo y la propiedad
dataset en el Captulo 4.
Atributo reversed
En el documento HTML del Listado 1-20 aprovechamos el elemento tradicional <ul> junto con
<li> para generar una lista de tems. En ese caso, el orden de los tems no era particularmente
importante, por lo que el uso de <ul> fue correcto, pero cuando el orden importa debemos usar
en su lugar el elemento <ol>. Este elemento genera una lista ascendente identificada con
29 | P g i n a
nmeros por defecto. La mejora en HTML5 es la adicin del atributo Booleano reversed para
crear una lista descendiente.
<ol reversed>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ol>
Listado 1-30: Generando una lista descendiente

Los tems son mostrados siempre en el orden en el que fueron declarados, pero los nmeros
que referencian cada tem reflejan el orden ascendente o descendente de la lista.
Atributos ping y download

El elemento <a> es probablemente el elemento HTML ms importante. Este es el elemento que
define la caracterstica ms significativa del lenguaje: el hiperenlace. Fue creado para enlazar un
documento con otro, permitiendo a los usuarios navegar y acceder fcilmente a la informacin
ofrecida por el sitio web. Pero en estos das, acceder otros documentos no es lo nico que
hacemos desde una pgina web. Tambin necesitamos poder descargar esos documentos y los
desarrolladores necesitan poder seguir el rastro de esta actividad. HTML5 incorpora dos nuevos
atributos que preservan la validez de este elemento y agregan la funcionalidad requerida:
pingEste atributo declara la ruta de la direccin URL ha ser informada cuando el usuario
hace clic en el enlace. El valor puede estar compuesto por una o ms URLs separadas por un
espacio.
downloadEste es un atributo Booleano que cuando est presente indica que en lugar de
leer el archivo el navegador debe descargarlo.
<a href="http://www.formasterminds.com/content/myfile.pdf"
ping="http://www.jdgauchat.com/control.php" download>Clic aqu para
descargar el archivo</a>
Listado 1-31: Aplicando los atributos ping y download

En el ejemplo del Listado 1-31, la direccin URL del hiperenlace apunta al archivo
myfile.pdf. En circunstancias normales, un navegador moderno mostrara el contenido del
archivo en la pantalla, pero en este caso el atributo download fuerza al navegador a descargar el
archivo. Tambin incluimos el atributo ping apuntando al archivo control.php en el servidor.
Como resultado, cada vez que el usuario hace clic en el enlace, el archivo PDF es descargado y el
cdigo PHP es ejecutado, permitiendo al desarrollador llevar un control de esta actividad (usando
este archivo podemos, por ejemplo, almacenar informacin del usuario o contar las descargas
efectuadas).
Hgalo Usted Mismo: Copie el cdigo fuente del Listado 1-31 en un archivo
vaco, grbelo con un nombre a su eleccin y la extencin.html, y abra el
archivo en su navegador. Cuando haga clic en el enlace, el navegador
30 | P g i n a
comenzar la descarga del archivo PDF. Elimine el atributo download y

compare el comportamiento del navegador en un caso y otro.
Atributo translate
La mayora de los nuevos navegadores traducen automticamente un documento cuando
detectan que est escrito en un idioma diferente al del usuario, pero en algunos casos existen
textos que deberan permanecer en su versin original, como nombres, ttulos originales de
obras extranjeras, etc. Para controlar el proceso de traduccin desde HTML, el atributo
translate fue agregado.
<p>My favorite movie is <span translate="no">Dos Caminos</span></p>
Listado 1-32: Usando el atributo translate

El atributo puede tomar dos valores: yes o no. Por defecto, el valor es yes (traduccin
activada), a menos que el elemento padre tenga el atributo con el valor no. En el ejemplo del
Listado 1-32, el nombre de la pelcula es encerrado entre etiquetas <span> para especificar que
esa parte del texto no ser traducida al espaol.
Conceptos Bsicos: El elemento <span> es un elemento genrico usado para la
organizacin de textos o con el propsito de otorgar estilos a un contenido
especfico. Debido a sus caractersticas, es usado a menudo para asignar estilos
a textos, reemplazando efectivamente la funcin del elemento tradicional
<font>, el cual se ha vuelto obsoleto. Este elemento comparte caractersticas
similares con el elemento <div>, con la diferencia de que este ltimo es un
elemento de bloque mientras que <span> es un elemento en lnea, lo cual lo
vuelve apto para proveer estilos y organizar texto.
Atributo contenteditable
La habilidad de editar el contenido de una pgina web ha existido por aos, pero nunca fue una
caracterstica oficial. Ahora, con la introduccin del atributo contenteditable, podemos
convertir cualquier elemento HTML en un rea editable.
<p>Mi pelcula favorita es <span contenteditable="true">Casablanca</span>
</p>
Listado 1-33: Usando contenteditable para editar texto

Este atributo puede tomar dos valores: true (verdadero) o false (falso). Por defecto,
ningn elemento es editable. Declarando este atributo con el valor true en un elemento
permitimos a los usuarios editar su contenido.
Hgalo Usted Mismo: Copie el cdigo fuente del Listado 1-33 en un archivo
vaco, grbelo con el nombre de su preferencia y la extensin.html, y abra el
archivo en su navegador. Haga clic sobre el nombre de la pelcula para
cambiarla.
31 | P g i n a
Atributo spellcheck
Otra funcin que es activada automticamente por los navegadores es la correccin de
ortografa (spell check). A pesar de ser una herramienta muy til que los usuarios esperan tener
disponible todo el tiempo, puede llegar a ser inapropiada en determinadas circunstancias. Para
activar o desactivar esta caracterstica, podemos usar el atributo spellcheck .
<p>La que prefiero es <span contenteditable="true"

spellcheck="false">Casablanca</span></p>
Listado 1-34: Desactivando el corrector ortogrfico

Este atributo, al igual que los anteriores, puede tomar dos valores: true o false. La
funcionalidad se encuentra siempre activada a menos que declaremos el atributo como false.
En el ejemplo del Listado 1-34, el atributo spellcheck es aplicado al mismo elemento que
usamos antes. Ahora, podr cambiar el nombre de la pelcula sin que el navegador intente
corregir errores ortogrficos o gramaticales.
32 | P g i n a

Capitulo 1 HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Capitulo 1 HTML 5

Uploaded by

Copyright:

Available Formats

Captulo 1

1.2 Breve Introduccin a HTML

Copia de Evaluacin Ana Borobio

IMPORTANTE: Los conceptos explicados a continuacin son bsicos pero

Listado 1-1: Ejemplo de un documento HTML bsico

Copia de Evaluacin Ana Borobio

Copia de Evaluacin Ana Borobio

1.3 Estructura Global

Copia de Evaluacin Ana Borobio

Esto lo ayudar a recordar los nuevos elementos y acostumbrarse a sus

Listado 1-3: Usando el elemento <!DOCTYPE>

Listado 1-4: Usando el elemento <html>

Copia de Evaluacin Ana Borobio

Listado 1-5: Usando el elemento <head>

Listado 1-6: Usando el elemento <body>

Copia de Evaluacin Ana Borobio

Listado 1-7: Usando el elemento <meta>

Listado 1-8: Agregando ms elementos <meta>

Copia de Evaluacin Ana Borobio

IMPORTANTE: La etiqueta <meta> que especifica el tipo de codificacin

Listado 1-9: Etiquetas cerradas

Listado 1-10: Usando el elemento <title>

Copia de Evaluacin Ana Borobio

Listado 1-11: Usando el elemento <link>

Copia de Evaluacin Ana Borobio

1.4 Estructura del Cuerpo

Copia de Evaluacin Ana Borobio

Figura 1-1: Representacin visual de una tpica pgina web

Copia de Evaluacin Ana Borobio

Figura 1-2: Representacin visual de la estructura de un blog tpico

Copia de Evaluacin Ana Borobio

Figura 1-3: Representacin de la organizacin de un documento usando elementos de HTML5

Listado 1-12: Usando el elemento <header>

Copia de Evaluacin Ana Borobio

En el Listado 1-12 definimos el ttulo de la pgina o el sitio web usando el elemento

y de la parte visible del documento. De ahora en ms podremos ver el resultado de nuestro

Listado 1-13: Usando el elemento <nav>

Copia de Evaluacin Ana Borobio

Copia de Evaluacin Ana Borobio

Listado 1-14: Usando el elemento <section>

Copia de Evaluacin Ana Borobio

Listado 1-15: Usando el elemento <aside>

Copia de Evaluacin Ana Borobio

Listado 1-16: Usando el elemento <footer>

1.5 Dentro del Cuerpo del Documento

Copia de Evaluacin Ana Borobio

Cuanto ms profundo nos internamos en el documento, ms cerca estamos de su contenido.

Listado 1-17: Usando el elemento <article>

Copia de Evaluacin Ana Borobio

Copia de Evaluacin Ana Borobio

Listado 1-18: Construyendo la estructura de un elemento <article>

mostrar el nmero de comentarios.

Copia de Evaluacin Ana Borobio

Conceptos Bsicos: El elemento <p> declarado dentro de <footer> en cada

Copia de Evaluacin Ana Borobio

Listado 1-19: Usando el elemento <hgroup>

Copia de Evaluacin Ana Borobio

Copia de Evaluacin Ana Borobio

Listado 1-20: Usando los elementos <figure> y <figcaption>

Copia de Evaluacin Ana Borobio

Listado 1-21: Creando una herramienta con <details> y <summary>

Figura 1-5: El elemento <details> antes y despus de ser cliqueado

1.6 Elementos Nuevos y Viejos