Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
de una pgina en
HTML5
Cada fichero HTML est compuesto de dos partes. El <head>, donde se aade toda la
informacin que el navegador necesita pero que no se visualiza y el <body>, que agrupa
todo el contenido de la pgina y que el navegador s que muestra.
La codificacin de la pgina (para que aparezcan smbolos como la "", "" o los
acentos correctamente) utilizando meta charset="utf-8".
Otra informacin que habitualmente podemos encontrar en el <head> pero que no hemos
aadido en el ejemplo superior para no sobrecargarlo es:
Por otra parte, dentro del <body> colocaremos todo aquello que s se tiene que visualizar
en el navegador, entre lo que vamos a destacar las etiquetas semnticas.
Con la versin anterior de HTML (HTML4) slo exista un tipo de caja (<div>), por lo que
una caja poda contener cualquier tipo de contenido.
Una de las novedades de HTML5, aparte de disponer de esta misma caja genrica (<div>),
tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto. As,
las cajas de tipo <header> estn destinadas a contener los encabezados de la pgina, las de
tipo <footer> para el pie de pgina, los enlaces estarn dentro de las cajas de tipo (<nav>),
para el contenido normal tenemos cajas de tipo <section> y <article>, para el contenido
relacionado con el tema central pero no directamente tenemos el tipo <aside> o las
imgenes que tienen su propia caja <figure>.
De esta manera, posteriormente entender y encontrar cualquier elemento o contenido es
mucho ms rpido, sencillo y fiable.
Adems, al ver (nosotros, cualquier otra persona o "araa/robot" que explore nuestra
pgina) una estructura html es posible identificar la organizacin del contenido con un
primer golpe de vista.
<header>
<nav>
<section>
<article>
<article>
<aside>
<footer>
<header>:
Es el equivalente a la cabecera de la pgina web. Contiene el ttulo o nombre de la
empresa/titular de la pgina, logo e informacin relacionada.
<nav>:
Contiene los enlaces (barra de navegacin) externos o internos de la pgina.
<section>:
Es una gran caja que sirve para mostrar grandes bloques de contenido de la pgina. Puede
contener diferentes subapartados de diferentes temas (de tipo <article>).
<article>:
Es una caja independiente de contenido que puede estar contenida (o no) dentro de
un <section>. Normalmente utilizada para contenidos no demasiado extensos.
<aside>:
Define un bloque de contenido relacionado de manera indirecta con el contenido principal,
pero que no es esencial para la compresin del mismo.
<footer>:
Equivale al pie de pgina de un apartado concreto (<section>, <article>...) o de la pgina
web en general.
Para seleccionar el nombre de estas etiquetas, Ian Hickson (el editor de HTML5) recurri a
las herramientas de Google para extraer datos de ms de mil millones de pginas web
reales, repasando los ID y los nombres de clase ms utilizados en la web. Si quieres ms
informacin puedes acceder a Google Code: Web Authoring Stadistics: Classes.