HTML 26-32

Documentos HTML5
<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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=”iso-8859-1”>
</head>
<body>
</body>
</html>
Listado 1-5. Usando el elemento <meta>.
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, CSS3, Javascript”>
</head>
<body>
</body>
</html>
Listado 1-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
5
El gran libro de HTML5, CSS3 y Javascript
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
del Listado 1-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. Para aprender más sobre la etiqueta <meta>, visite nuestro sitio web y
siga los enlaces proporcionados para este capítulo.
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<meta name="description" content="Ejemplo de HTML5" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
</body>
</html>
Listado 1-7. Cierre de etiquetas simples.
<title>
La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no

hay nada nuevo para comentar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>
Listado 1-8. Usando la etiqueta <title>.
6
Documentos HTML5
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.
<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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel=”stylesheet” href=”misestilos.css”>
</head>
<body>
</body>
</html>
Listado 1-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 misestilos.css es un archivo CSS con estilos requeridos para presentar la
página en pantalla (en el próximo capítulo estudiaremos cómo utilizar estilos CSS).
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
7
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, donde la magia ocurre.
1.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 interpretació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
8
Documentos HTML5
cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas, como
veremos pronto.
Organización
La Figura 1-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:
Figura 1-1. Representación visual de un clásico diseño web.
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és del sitio. Los usuarios 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 encuentra, 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-1 se utilizaron
9
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, dividiendo 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 apuntando 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
normalmente 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 desarrollador 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, como podemos apreciar en el siguiente ejemplo:
Figura 1-2. Representación visual de un clásico diseño para blogs.
10
Documentos HTML5
La Figura 1-2 es una representación de un blog normal. En este ejemplo se puede

claramente identificar cada parte del diseño considerado anteriormente.
1. Cabecera
2. Barra de Navegación
3. Sección de Información Principal
4. Barra Lateral
5. El pie o la barra Institucional
Esta simple representación de un blog nos puede ayudar a entender que cada sección
definida en un sitio web tiene un propósito. A veces este propósito no es claro pero en
esencia se encuentra siempre allí, ayudándonos a reconocer cualquiera de las secciones
descriptas anteriormente en todo diseño.
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:
Figura 1-3. Representación visual de un diseño utilizando elementos HTML5.
11

HTML 26-32

Cargado por

Copyright:

Formatos disponibles

HTML 26-32

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML 26-32

Cargado por

Copyright:

Formatos disponibles

Documentos HTML5

Listado 1-5. Usando el elemento <meta>.

La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo

Listado 1-6. Agregando más elementos <meta>.

anteriormente, aparte del título y algunos íconos, la mayoría de la información

Listado 1-7. Cierre de etiquetas simples.

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no

Listado 1-8. Usando la etiqueta <title>.

Listado 1-9. Usando el elemento <link>.

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo

Conceptos básicos: Un archivo de estilos es un grupo de reglas de formato que

principal, incrementar la velocidad de carga y aprovechar las nuevas

Con esta última inserción podemos considerar finalizado nuestro trabajo en la

1.3 Estructura del cuerpo

Figura 1-1. Representación visual de un clásico diseño web.

En la parte superior, descripto como Cabecera, se encuentra el espacio donde usualmente

Figura 1-2. Representación visual de un clásico diseño para blogs.

La Figura 1-2 es una representación de un blog normal. En este ejemplo se puede

Figura 1-3. Representación visual de un diseño utilizando elementos HTML5.

También podría gustarte