Estructura semántica de HTML5
Profesor: Javier López
Volver
Estructura básica de una página en HTML5
Elementos que contiene el <head>
Las nuevas etiquetas semánticas de HTML5
Ejemplo de una estructura compleja
Guardar con formato UTF-8

Estructura básica de una página en HTML5
En HTML5 la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico, que sería el siguiente:
 <!doctype html>
 <html>

   <head>
      <meta charset="utf-8"/>   
      <title>Título de la web</title>
   </head>

   <body>
      Contenido de la web
   </body>

 </html>
Descarga este código o copia, pega y guarda como HTML en cualquier editor.
Cada fichero HTML está compuesto de dos partes. El <head>, donde se añade toda la información que el navegador necesita pero que no se visualiza y el <body>, que agrupa todo el contenido de la página y que el navegador sí que muestra.

Elementos que contiene el <head>
Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza en el navegador, ofrece información importante sobre la propia página, por lo que en el <head> se introduce información referente a: Otra información que habitualmente podemos encontrar en el <head> pero que no hemos añadido 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 semánticas.

Las nuevas etiquetas semánticas de HTML5
Con la versión anterior de HTML (HTML4) sólo existía un tipo de caja (<div>), por lo que una caja podía contener cualquier tipo de contenido.

Una de las novedades de HTML5, aparte de disponer de esta misma caja genérica (<div>), tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto. Así, las cajas de tipo <header> están destinadas a contener los encabezados de la página, las de tipo <footer> para el pie de página, los enlaces estarán 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 imágenes que tienen su propia caja <figure>.

De esta manera, posteriormente entender y encontrar cualquier elemento o contenido es mucho más rápido, sencillo y fiable.

Además, al ver (nosotros, cualquier otra persona o "araña/robot" que explore nuestra página) una estructura html es posible identificar la organización del contenido con un primer golpe de vista.


Las etiquetas semánticas más importantes son:
(Coloca el cursor sobre los enlaces azules o las zonas del esquema para resaltar su relación).

<header>
<nav>
<section>
<article>
<article>
<aside>
<footer>

<header>:
Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada.
<nav>:
Contiene los enlaces (barra de navegación) externos o internos de la página.
<section>:
Es una gran caja que sirve para mostrar grandes bloques de contenido de la página. 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 compresión del mismo.
<footer>:
Equivale al pie de página de un apartado concreto (<section>, <article>...) o de la página 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 más de mil millones de páginas web reales, repasando los ID y los nombres de clase más utilizados en la web. Si quieres más información puedes acceder a Google Code: Web Authoring Stadistics: Classes.

Ejemplo de una estructura compleja
Una estructura HTML que contenga referencia a un CSS externo, el bloque de código CSS interno y tenga las etiquetas semánticas básicas podría ser el siguiente:
 <!doctype html>
 <html>

   <head>
      <meta charset="utf-8"/>   
      <meta name="description" content="Resumen del contenido de la página">
      <title>Título de la página</title>
      <link rel=stylesheet href="css/estilo.css" type="text/css"/>
      <style type="text/css">
      </style>   
   </head>

   <body>
      <header>
      </header>

      <section id="contenido">
         Contenido de la web
      </section>

      <footer>
      </footer>
   </body>

 </html>
Descarga este código o copia, pega y guarda como HTML en cualquier editor.
Guardar con formato UTF-8
El último punto a tener en cuenta es guardar el documento HTML usando la codificación especificada en la etiqueta <head>:
<meta charset="utf-8"/>

Así, si en la etiqueta anterior le estamos diciendo al navegador que la página va a utilizar una codificación UTF-8 (para que permita reconocer los acentos) la página tiene que tener realmente esta codificación.

Esta codificación se tiene que indicar en el editor de html que estemos utilizando. Como cada editor tiene sus características y sus propios menús, vamos a indicar donde su ubica esta opción en dos editores muy populares (Sublime Text 2 y NotePad ++)