Tema 2: HTML5

Este tema pretende introducir a la programación web comenzando por su estructura base: el documento HTML. Una vez finalizado se comprenderá perfectamente su estructura y cometido y se podrán realizar documentos complejos.

Índice

1. Introducción.
2. Sintaxis.
3. Estructura de un documento HTML.
4. Etiquetas más utilizadas.
5. Enlaces e imágenes.
6. Novedades de HTML5.

---

1. Introducción

HTML, HyperText Markup Language (lenguaje de marcado de hipertexto), es un lenguaje de marcado utilizado para describir la estructura y contenido de un documento. Se usa principalmente en la elaboración de páginas web.

Un archivo HTML no es más que un fichero de texto, con extensión htm o html, compuesto por etiquetas. Las etiquetas son las que definen la estructura y suelen englobar al contenido.

Nota del autor: perdonad si a lo largo de este tema y del curso utilizo indistintamente el término documento y página ya que, aunque HTML realmente define un documento HTML, en nuestro caso lo vamos a utilizar para definir la estructura de una página web, y es por eso que son dos conceptos muy unidos. Lo importante es que entendáis bien la diferencia.

---

2. Sintaxis

Un documento HTML es un documento de texto plano formado por una serie de etiquetas anidadas. La estructura de una etiqueta es la siguiente:

<etiqueta atributo="valor">contenido</etiqueta>

Donde etiqueta define el nombre de la etiqueta, atributo es un atributo cualquiera con valor y contenido es lo que va entre ambas etiquetas.

Cada etiqueta debe estar siempre debidamente cerrada, para ello se escribe el nombre de la etiqueta añadiendo la barra /. De modo que una etiqueta inicial siempre va entre <…> y una de cierre entre </…>. Puede no contener ningún atributo o todos los que se quiera, pero sin repetir.

Algunas etiquetas no tienen contenido y se abren y cierran en una sola sentencia, terminando con />:

<etiqueta atributo="valor" />

O bien no queremos especificar contenido:

<etiq></etiq>

Si el elemento ocupa más de una línea se suele escribir sangrado para mayor claridad, aunque como norma general los espacios y saltos de línea en un documento HTML no se tienen en cuenta a la hora de mostrar la información. En nuestro caso una etiqueta debidamente sangrada:

<etiqueta atributo="valor">
   contenido
</etiqueta>

Lo que sí que es imprescindible es mantener las etiquetas debidamente alineadas, por lo que no sería correcto escribir:

<etiqueta1>
   <etiqueta2>
      Contenido
   </etiqueta1>
</etiqueta2>

Los atributos se definen sobre las etiquetas y las etiquetas definen la estructura del contenido que engloban. Así, por ejemplo, la etiqueta p (párrafo) define una porción de documento como un párrafo:

<p>
   En un lugar de La Mancha, de cuyo nombre no quiero acordarme.
</p>

Para algunas etiquetas se deben definir siempre una serie de atributos. Como es el caso de la etiqueta a (anchor) que permite ir de un documento o parte de documento a otro. En esta etiqueta se debe especificar, al menos, el atributo href (hypertext reference) que indica la referencia a saltar.

<a href="documento1.html">Documento 1</a>

En HTML para indicar que un trozo de texto es un comentario lo englobamos entre <!– y –>:

<!-- Comentario -->

A continuación un trozo de código HTML real para hacer una idea más amplia de todo lo explicado:

<h1>Título 1</h1>
<!-- Bloque de contenido -->
<div id="contenido">
	<p> 
		Párrafo de texto <br />
		Continúa debajo.
	</p>
	<!-- Lista de artículos -->
	<ul class="lista-articulos">
		<li>Artículo 1</li>
		<li>Artículo 2</li>
		<li>Artículo 3</li>
	</ul>
	<a href="http://google.es">Enlace a Google</a>
</div>

Un último comentario referente a la sintaxis, antiguamente era muy común escribir las etiquetas y atributos HTML en mayúsculas y, aunque HTML no es sensible a mayúsculas, el W3C [2] recomienda escribir siempre en minúscula, tal y como vienen en estos ejemplos.

---

3. Estructura de un documento HTML

La estructura básica de un documento HTML se compone de una cabecera (head) que define parámetros generales del documento y un cuerpo (body) que es el que define el contenido, y todo ello entre las etiquetas generales <html></html>. De la forma:

<html>
   <head>...</head>
   <body>...</body>
</html>

A esto hay que añadir la definición del tipo de documento (<!DOCTYPE>) [3] que va al comienzo, donde indicamos al navegador sobre la versión de HTML en la que está escrito el documento (HTML 1.0, 1.1 o 4.01) y la definición del tipo de documento (Document Type Definition o DTD) que define las reglas para que el navegador muestre el documento correctamente. Existen tres niveles:

• Strict: no permite etiquetas obsoletas (deprecated).
• Transitional: permite etiquetas obsoletas, menos frameset.
• Frameset: permite etiquetas obsoletas incluyendo frameset.

Podéis consultar las cabeceras disponibles en las recomendaciones de W3C en [3]. Para el caso de HTML 4.01 Strict, la estructura quedaría como:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>...</head>
   <body>...</body>
</html>

Todo lo explicado anteriormente sobre doctype es válido para versiones de HTML hasta la 4.01, sin embargo para HTML5 no es necesario indicar el DTD [4], simplemente indicamos:

<!DOCTYPE html>

¿Y qué información va en la cabecera (head) y cual en el cuerpo (body)?

• En la cabecera [6] indicamos características propias de todo el documento. En ella es obligatorio definir el título de la página mediante la etiqueta titlle, éste título se mostrará, por ejemplo, arriba en la pestaña del navegador y en los resultados de búsqueda. Por tanto, las etiquetas que pueden definirse dentro de la cabecera son:
  • title (obligatorio): título del documento.
    • Ejemplo:

<title>Curso de Python y HTML5</title>

• style: para definir información de estilos del documento. Lo veremos mejor en el siguiente tema sobre CSS.
• base: se usa para definir una URL que se tomará como base para las direcciones relativas del documento. Así si definimos como base http://empresa.com/docs y en el cuerpo hacemos referencia a la dirección fichero.txt realmente se buscará ese documento dentro de docs, como http://empresa.com/docs/fichero.txt.
• link: Hace referencia a un fichero externo, lo usaremos en el tema siguiente con CSS.
• meta: para indicar metadatos sobre el documento: palabras clave de búsqueda (keywords), descripción de la página que se muestra en los resultados de búsqueda (description), autor del documento (author), idioma del documento (content-language), codificación del documento (content-type), etc.
  • Algunos ejemplos:

<meta name="keywords" 
	content="html5, css3, python, django" />

<meta name="description" 
	content="Curso de Python y HTML5" />

<meta name="author" content="Ignacio Pérez" />

<meta http-equiv="Content-Type" 
	content="text/html; charset=utf-8" />

• script: se usa para definir un trozo de script del lado del cliente, como javascript.
• noscript: contenido alternativo que se muestra si el navegador no permite usar javascript.
• Por otra parte en el cuerpo es donde va el contenido en sí de la página web. Aquí es donde se pueden indicar el resto de etiquetas HTML para incluir el contenido, que puede ser: texto, listas, tablas, formularios, imágenes, enlaces, etc.

---

4. Etiquetas más utilizadas

En HTML hay definidas, actualmente, 116 etiquetas. Algunas de ellas ya están obsoletas y otras en fase experimental. Un listado completo de etiquetas según la versión y DTD se puede ver en [5] donde podéis acceder a la definición y ejemplos de cada una pulsando sobre el nombre de la etiqueta.

Aquí veremos las etiquetas más comunes y casi las únicas que utilizaréis salvo casos concretos en los que podéis consultar la referencia.

Texto

El texto es el contenido básico y más común en una página web. En el tema siguiente veremos como darle formato en cuanto a color, tipogtrafía, tamaño, justificación, etc. Sin embargo es en HTML donde definimos su estructura y los diferentes bloques en los que se compone.

Empezaremos viendo las etiquetas que definen los títulos de la página que van de la <h1> a la <h6>, siendo <h1> el título de mayor importancia y <h6> el de menos. Es importante hacer uso de estas etiquetas ya que de esa manera le estamos dando pistas al motor de búsqueda (como Google o Bing) sobre la estructura semántica de nuestro contenido.

Así un código como el siguiente:

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3> 
<h4>Titulo 4</h4> 
<h5>Titulo 5</h5> 
<h6>Titulo 6</h6>

Produciría una salida como ésta, dependiendo del navegador:

Otras etiquetas de texto son:

• <p></p> Define un párrafo de texto.
• <br /> Etiqueta única, sin cierre. Indica un salto de línea.
• Obsoletas (deprecated): <font></font>, <b></b>, <u></u>, <i></i>, <center></center>. Estas etiquetas se utilizaban para definir la fuente, indicar que el texto es negrita, subrayado, itálica y centrado respectivamente, sin embargo su uso está desaconsejado a favor de utilizar definiciones de estilos en CSS, como veremos en el tema siguiente. De todos modos las incluyo porque todavía se encuentran muchas páginas webs que las siguen utilizando y los navegadores siguen interpretándolas.

Existen etiquetas que definen el estilo del texto al que referencian, no obsoletas, pero que en algunos casos se podrían expresar mejor utilizando CSS. Son:

• <em> Texto enfatizado.
• <strong> Texto resaltado.
• <dfn> Definición.
• <code> Trozo de código.
• <samp> Muestra de un programa de ordenador.
• <kbd> Entrada de teclado.
• <var> Una zona de texto variable.
• <cite> Una cita.

Listas

Existen dos tipos de listas: ordenadas (<ol>) y sin ordenar (<ul>). Y no quiere decir que HTML realice la ordenación sino que al poner una lista como ol estáis indicando que esa lista está ordenada.

Los distintos elementos de la lista se indican, en ambos casos, con <li>. Por ejemplo:

<ol>
	<li>Barco</li>
	<li>Cama</li>
	<li>Dado</li>
</ol>

<ul>
	<li>Inicio</li>
	<li>Servicios</li>
	<li>Contacto</li>
</ul>

Se vería en el navegador como:

Tablas

Las tablas se definen con la etiqueta <table> y deben usarse para mostrar tablas de datos pero no para definir la estructura y maquetar así una página web. Durante mucho tiempo se estuvieron utilizando las tablas como instrumento para estructurar una web y ese uso está ya desde hace tiempo desaconsejado, porque no es ese el objetivo de la etiqueta <table> y porque a los navegadores les resulta pesado renderizar tablas. Todo esto no quiere decir, en absoluto, que el uso de las tablas esté desaconsejado, es ideal para mostrar registros de una base de datos como un listado de partes de trabajo o personal de una empresa.

Los elementos de una tabla son:

• <tr> Define una fila de la tabla.
• <th> Define, junto con tr, una celda de la cabecera.
• <td> Define, junto con tr, una celda de la tabla.

Un ejemplo:

<table border="1">
	<tr>
		<th>Apellidos</th>
		<th>Nombre</th>
		<th>Profesion</th>
	</tr>
	<tr>
		<td>Threepwood</td>
		<td>Guybrush</td>
		<td>Pirata</td>
	</tr>
	<tr>
		<td>Tornasol</td>
		<td>Silvestre</td>
		<td>Inventor</td>
	</tr>
</table>

Cuyo resultado:

Con border=”1” expresamos que se le incluya borde a la tabla. También podemos indicar el espaciado entre celdas (cellspacing) o la combinación de varias de ellas (colspan), y otros estilos que veremos en el tema de CSS. El ejemplo anterior usando cellspacing y colspan:

<table border="1" cellspacing="0">
	<tr>
		<th>Apellidos</th>
		<th>Nombre</th>
		<th>Profesion</th>
	</tr>
	<tr>
		<td>Threepwood</td>
		<td>Guybrush</td>
		<td>Pirata</td>
	</tr>
	<tr>
		<td>Tornasol</td>
		<td colspan="2">Silvestre</td>
	</tr>
</table>

Produce:

Secciones dentro de una tabla: thead, tbody, tfoot

En una tabla se pueden especificar las filas que compone la cabecera (thead), cuerpo (tbody) y pie (tfoot) de la tabla. Veamos un ejemplo:

<table border="1" cellspacing="0">
	<thead>
		<tr>       
			<th>Producto</th>
			<th>Coste</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>780€</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Portátil</td>
			<td>600€</td>
		</tr>
		<tr>
			<td>Monitor</td>
			<td>180€</td>
		</tr>
	</tbody>
</table>

Los navegadores pueden usar estos elementos para habilitar el desplazamiento del cuerpo de la tabla independientemente del encabezado y pie de página. O bien que al imprimir una tabla que abarque varias páginas, permitir que el encabezamiento y pie de página se impriman en la parte superior e inferior de cada página. Se visualizaría como:

Puede extrañar que se haya puesto tfoot antes de tbody, es la manera correcta, y el navegador al visualizar lo coloca al final de la tabla.

---

5. Enlaces e imágenes

Los enlaces son los que permiten la navegación entre documentos HTML, los enlaces se indican con la etiqueta <a> y se debe indicar la página a la que se salta.

<a href="http://djangoproject.com">Enlace a Django</a>

En href podemos indicar una dirección absoluta como la del ejemplo o una relativa a nuestro directorio de trabajo:

<a href="agenda.html">Agenda</a>

Donde el documento agenda.html debería estar en el mismo directorio que el documento que incluye ese código o bien en la raíz indicada en el <base> de la cabecera.

También podemos indicar un documento dentro de un directorio con la misma sintaxis que en Unix:

<a href="/docs/doc1.html">Documento</a>

Para incluir una imagen en HTML lo indicamos con la etiqueta <img> de la forma:

<img src="/imagenes/flor.jpg" alt="Imagen de una flor" />

Donde en src (source) indicamos la ruta de la imagen y con alt indicamos un texto alternativo en caso de que no pueda mostrar la imagen. El uso de alt no es obligatorio pero sí recomendable tanto para la indexación de la imagen en los buscadores como, sobretodo, para permitir la accesibilidad con usuarios invidentes o que utilicen dispositivos que no puedan mostrar imágenes. Estos temas de accesibilidad los veremos más adelante.

Formularios

Los formularios son, junto con los enlaces, la vía más común de interacción con el usuario, utilizados como formularios de alta de facturas, formularios de inicio de sesión del usuario, formularios donde se escribe un nuevo tema en un foro…

Todo formulario está englobado con las etiquetas <form></form> y debe indicar la página a la que se le va a enviar la información introducida en el formulario y el método por el que se le va a pasar.

Los métodos posibles son: GET y POST.

• GET: envía los datos usando la URL. Así por ejemplo con la petición http://empresa.com/?nombre=pepe&apellidos=perez estaríamos enviando por GET la variable nombre con valor pepe y la variable apellidos con valor perez.
• POST: envía los datos codificados y suelen ser obtenidos en el destino, por ejemplo por medio de Django o PHP. Los datos no son visibles en la transacción aunque eso no quiere decir que no se puedan ver, no están encriptados a no ser que se use https.

Ya veremos el uso de GET y POST cuando tratemos Django, simplemente indicar que normalmente se recomienda el uso del método GET cuando queremos que los datos queden visibles en la URL, tanto para que puedan invocarse directamente en la dirección como porque queramos que sean cacheados por los motores de búsqueda, como podría ser al enviar los datos de un formulario de búsqueda; y se usa POST cuando esos datos pertenecen a una transacción que se va a hacer una vez como un alta de usuario, formulario de login…

Un ejemplo de uso de form en el que se indica que los datos se van a enviar por post a nuevo_usuario.html es:

<form action="nuevo_usuario.html" method="post">
	...
</form>

 ¿Qué se puede indicar dentro de un formulario?

• <input> No tiene etiqueta de cierre sino que se escribe <input … />. Es un campo de entrada al formulario como puede ser:
  • Campo de texto: <input type=”text” … />
  • Botón de submit: <input type=”submit” … />
  • Campo de password: <input type=”password” … />
  • Checkbox: <input type=”chekbox” … />
  • Campo oculto: <input type=”hidden” … />
  • etc.
• <textarea> Define un campo de texto de varias líneas.
• <button> Botón, se diferencia del de submit porque en éste se puede incluir texto o imágenes.

<button type="button">Texto del botón</button>

• <select> Lista desplegable con distintas opciones (<option>). Las opciones pueden estar agrupadas (<optgroup>).
• <fieldset> Agrupa elementos relacionados de un formulario.
• <label> Etiqueta del campo a solicitar.

A continuación se muestra un formulario que hace uso de casi todos los elementos:

<form action="nuevo_usuario.html" method="post">
	<label for="hombre">Hombre</label>
	<input type="radio" name="sexo" id="hombre" />
	<br />
	<label for="mujer">Mujer</label>
	<input type="radio" name="sexo" id="mujer" />
	<br />

    <fieldset>
        <legend>Nompre y apellidos</legend>
        <label for="id_nombre">Nombre</label>
        <input type="text" id="id_nombre" name="nombre" />
		<br />
        <label for="id_apellidos">Apellidos</label>
        <input type="text" id="id_apellidos" name="apellidos" />
    </fieldset>
    <br />

	<label for="civil">Estado civil</label>
    <select id="civil">         
		<option value="soltero">Soltero</option>
		<option value="casado">Casado</option>
    </select>
    <br />

    <label for="dpto">Departamento</label>
    <select id="dpto">
        <optgroup label="Direccion">
            <option value="gerente">Gerente</option>
            <option value="director">Director</option>
        </optgroup>
        <optgroup label="Informatica">
            <option value="desarrollo">Desarrollo</option>
            <option value="sistemas">Sistemas</option>
        </optgroup>
    </select>
    <br />

	<label for="observaciones">Observaciones</label>
    <textarea id="observaciones" rows="2" cols="20"></textarea>
    <br />

    <input type="submit" value="Enviar" />
</form>

Y el navegador lo muestra:

Comentarios sobre el formulario anterior:

• Todos los campos tienen un elemento label que es el que muestra la etiqueta de cada campo. Se relacionan a través de for en el label e id en el campo.
• El atributo name de cada campo es el que va a permitir referir cada uno para obtener el valor (value) una vez que procesemos el formulario al recibirlo.
• Los campos “Hombre” y “Mujer” son del tipo option, ambas opciones tienen el mismo name ya que ambas se refieren al mismo campo, sexo.
• Hemos decidido utilizar fieldset para englobar el nombre y apellidos.
• Tanto nombre como apellidos son del tipo input de texto.
• El desplegable del estado civil tiene dos opciones “Soltero” y “Casado” pero los valores que se pasarán son los del value: “soltero” y “casado”, respectivamente.

• El desplegable de departamento es igual al anterior pero tiene opciones agrupadas.

• Añadimos un textarea donde se pueden escribir varias líneas de texto.
• El botón de submit es el que realiza el envío del formulario.

Volveremos a tratar el tema de los formularios y su tratamiento una vez que lleguemos al tema de Django.

Estructura

Existen un par de etiquetas que se utilizan para definir la estructura del documento HTML [7] (que ya hemos dicho que no debemos hacer con tablas) son:

• <div> Define una sección en un documento.
• <span> Similar pero agrupa distintos elementos de una línea.

He incluído <span> para darlo a conocer pero no define realmente la estructura sino que eso se realiza con <div>. Con <span> hacemos agrupaciones para, por ejemplo, aplicar una serie de estilos a varios elementos a la vez.

Veamos un ejemplo del uso de <div> donde vamos a estructurar una página web en cuatro bloques: la cabecera, un menú en el lado izquierdo, un bloque de contenido y un pie de página:

Y cuyo codigo sería algo como:

<html>
	<head>...</head>
	<body>
		<div id="cabecera">
			<h1>Cabecera</h1>
		</div>
		
		<div id="menu-izquierdo">
			<b>Menu</b>
		</div>
		
		<div id="contenido">
			Contenido
		</div>
		
		<div id="pie">
			Pie
		</div>
	</body>
</html>

Aunque tal y como hemos escrito el documento HTML, sin especificar reglas de estilos, esos bloques aparecerían uno a continuación del otro:

Y tampoco aparecerían con colores y con esos tamaños, los he puesto así para que quede más gráfico. La realidad, usando solo HTML sin CSS, sería ésta:

Sirva esto como introducción a la necesidad de las hojas de estilos o CSS.

---

6. Novedades de HTML5

Todo lo visto hasta ahora sobre HTML es común tanto para HTML4.01 como para HTML5, sin embargo HTML5 añade una serie de mejoras y avances [11]. Lamentablemente HTML5 todavía no es un estándar oficial, está en fase experimental y aunque la mayor parte está implementada ya en los navegadores todavía hay elementos que no lo están. Por ahora queda a decisión del desarrollador el decidir si empezar a utilizar HTML5 o no.

Para los que no tengan conocimiento anterior de HTML puede que las novedades no le resulten tan gratificantes pero el objetivo de HTML5 es el de simplificar, evitar tener que utilizar javascript o flash para algunos eventos y eliminar elementos que ya estaban obsoletos.

Algunas de las nuevas características más interesantes para los autores son APIs para dibujar gráficos en dos dimensiones, incorporar y controlar contenido de audio y vídeo, mantener persistente en la parte del cliente el almacenamiento de datos y para ofrecer a los usuarios la edición de documentos, o partes de éstos, de forma interactiva. Otras características facilitan la representación de elementos comunes de las páginas, incluyendo <section> (sección), <footer> (pie), <nav> (para navegación) y <figure> (para asignación de un título a una foto u otro contenido incluido en la página). Los autores escriben el HTML5 usando una sintaxis HTML «clásica» o una sintaxis XML, de acuerdo con las necesidades de la aplicación.

Veamos algunas de sus novedades.

Doctype más simple

Como hemos visto ahora simplemente se indica con:

<!DOCTYPE html>

La etiqueta <canvas> para dibujar gráficos en 2D

Soportado a partir de Internet Explorer 9, Firefox, Opera, Chrome y Safari.

La etiqueta <canvas> sirve para dibujar utilizando Javascript. Aunque no hemos explicado nada de Javascript dejo un ejemplo de su uso:

<canvas id="id_canvas">El navegador no soporta canvas</canvas>
<script type="text/javascript">
	var canvas=document.getElementById('id_canvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#284df9';
	ctx.fillRect(0,0,100,100);
</script>

Que muestra como resultado:

Las etiquetas <audio> y <video> para reproducción multimedia

Soportados a partir de Internet Explorer 9, Firefox, Opera, Chrome y Safari.

Permite la inclusión de elementos de audio y vídeo de manera simple, sin tener que recurrir a bibliotecas externas. Veamos un par de ejemplos:

<audio controls="controls">
  <source src="cancion.mp3" type="audio/mp3" />
  Su navegador no soporta la etiqueta audio.
</audio>

<video width="320" height="240" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  Su navegador no soporta la etiqueta video.
</video>

Simplemente con eso ya obtenemos la canción y el vídeo incrustados con controles para su reproducción:

Soporte de almacenamiento local

Soportado a partir de Internet Explorer 8, Firefox, Opera, Chrome y Safari.

El almacenamiento local consiste en que se puede utilizar el navegador para almacenar información. Antes esto se realizaba a través de cookies pero de esta manera es más rápido, seguro y permite almacenar grandes cantidades de información. Cada página solo puede acceder a la información introducida por ella.

Hace uso de javascript y existen dos maneras de almacenar información.

Usando localStorage: información sin tiempo de expiración

<div id="prueba"></div>
<script>
	localStorage.clave="Valor";   
	document.getElementById("prueba").innerHTML="Clave: " + localStorage.clave;
</script>

Usando sessionStorage: información solo para una sesión

Igual que el anterior pero usando “sessionStorage”.

<div id="prueba"></div>
<script>
	sessionStorage.clave="Valor";   
	document.getElementById("prueba").innerHTML="Clave: " + sessionStorage.clave;
</script>

Etiquetas específicas de contenido

Soportadas a partir de Internet Explorer 9, Firefox, Opera, Chrome y Safari.

Etiquetas como: <article>, <footer>, <header>, <nav> y <section> que son específicas para definir secciones de una página web, tal y como hacíamos antes con <div>. Así el ejemplo anterior de <div> quedaría como:

<html>
	<head>...</head>
	<body>
		<header>
			<h1>Cabecera</h1>
		</header>
		
		<nav>
			<a href="...">Servicios</a>
			<a href="...">Contacto</a>
		</nav>
		
		<section id="contenido">
			Contenido
		</section>
		
		<footer>
			Pie
		</footer>
	</body>
</html>

Arrastrar y soltar (drag and drop)

Soportadas a partir de Internet Explorer 9, Firefox, Chrome y Safari 5.

Hace uso de Javascript y permite arrastrar cualquier elemento a una zona donde se pueda depositar. Para ello hay que definir el elemento arrastrable (draggable), qué ocurre cuando se se arrastre (ondragstart) y donde se puede arrastrar (ondragover). Una vez depositado se produce un evento (ondrop).

No quiero marear a los alumnos con menos conocimientos, aquellos más aventajados que quieran conocer más sobre esta cualidad de HTML5 tienen varias referencias donde consultar [8, 9, 10].

---

Referencias