HTML5 es una especificación que organiza tres tecnologías clave - HTML, CSS y JavaScript - para crear sitios y aplicaciones web. HTML5 permite desarrollar aplicaciones interactivas que se comportan como nativas sin necesidad de crear versiones separadas para cada plataforma, y define nuevos elementos para estructurar el contenido de manera semántica. Un documento HTML5 típico incluye una cabecera con metadatos y una estructura básica en el cuerpo con elementos como cabecera, navegación, secciones y pie de página para
1. 1. ¿Qué es HTML5?
• Especificación experimental del consorcio internacional W3C y del grupo de trabajo WHATWG que organiza
tres tecnologías altamente dependientes como HTML, CSS y Javascript bajo un mismo propósito, la
construcción de sitios y aplicaciones web.
• ¿Por qué estudiar estos lenguajes de programación?
HTML5 permite a los programadores crear aplicaciones no nativas (web) que se comportan como si lo fueran,
eliminando la pesada tarea que supone diseñar aplicaciones nativas para cada una de las plataformas
(Android, iOS, Windows Mobile, Symbian, BlackBerry OS, Palm OS).
• A pesar de no ser un estándar oficial, actualmente la mayoría de navegadores web (Safari, Chrome, Firefox,
Opera, Internet Explorer ) soportan los nuevos elementos (HTML y CSS) y APIs (Javascript) que incorpora
HTML5. Sustituye al anterior estándar HTML 4.0.1. que data del año 1999.
• ¿Qué función desempeña cada tecnología?
HTML5 lenguaje hipertexto de marcado usado para generar la estructura del documento (plantilla) y
facilitar la inserción tanto de contenido multimedia como de aplicaciones.
CSS, versión 3, es el responsable de representar la estructura y su contenido.
Javascript es el responsable de dotar de mayor funcionalidades a la web, haciendo que las
aplicaciones interactúen con el contenido y los servicios externos de la nube. Javascript permite añadir
contenido dinámico a la estructura (Web 2.0).
HTML5 Francesc Pérez
Fdez
2. 2. Estructura del documento
• Con un editor de texto es posible crear un documento HTML, tan sólo se ha de guardar con la extensión .html.
El código HTML debe ser introducido dentro del elemento “html” representado por las etiquetas de apertura
<html> y cierre </html>.
• La estructura principal de un documento HTML está formada por dos elementos: la cabecera (<head>) y el
cuerpo (<body>).
• La información de cabecera no se muestra en el navegador y se utiliza para referenciar estilos y scripts
externos (<link>), además de proporcionar meta información a los motores de búsqueda (<meta>).
• El cuerpo es la parte más importante y visible del documento HTML y es donde se organiza la plantilla.
Cabecera
Cuerpo
HTML5 Francesc Pérez
Fdez
Etiqueta <!DOCTYPE> define el tipo de archivo
El atributo “lang” de la etiqueta “html”, con valor “es”,
define el idioma del contenido.
Head (no
visible)
Body (visible)
3. 3. Cabecera del documento
• La información de cabecera no es visible para el usuario; pero sí puede ser leída por ordenadores,
navegadores web y motores de búsqueda que utilizan la meta información (descripción, etc) para realizar sus
funciones.
HTML5 Francesc Pérez
Fdez
Los archivos externos de estilos, imágenes y
scripts deben ubicarse en la misma carpeta
donde se aloja el archivo .html. Si no se hace
referencia a archivos externos de estilos el
navegador aplica los suyos por defecto.
Conjunto de caracteres
que debe utilizar el navegador
<!-- --> Comentarios. No afectan al código
4. 4. Cuerpo del documento
• La imagen muestra un diseño, con una organización básica, hecho con los nuevos elementos estructurales
que incorpora HTML5. Cada elemento del cuerpo desempeña un propósito diferente dentro de la plantilla.
• Un error común es confundir el elemento <head> con <header>. El primero hace referencia a la cabecera del
documento HTML y no se muestra en el navegador, el segundo hace referencia a la cabecera del cuerpo del
documento HTML y por lo tanto su contenido se muestra al usuario.
HTML5 Francesc Pérez
Fdez
Cabecera del cuerpo
(logo y título)
Barra de navegación
Información
Principal
Barra Lateral
(info adicional)
Institucional, personal derechos de autor,
<header> </header>
<nav> </nav>
<section> </section>
<aside>
</aside>
<footer> </footer>
5. 4. Cuerpo del documento
• El siguiente código implementa la estructura básica de la plantilla anterior. Observe que todo el código
relacionado con la estructura está alojado dentro del cuerpo <body>.
HTML5 Francesc Pérez
Fdez
Header
Nav
Aside
Footer
Section
En nuestro ejemplo, hemos suprimido de la cabecera del documento la línea que hace referencia a archivos de estilo
externos por lo que el navegador los representará con los estilos que tiene definidos por defecto. Para el navegador
todos los elementos son elementos “block”, motivo por el cual los apila como cajas uno encima de otro. Como veremos
más tarde, creando nuevos estilo se puede corregir este comportamiento hasta obtener el resultado esperado.
6. 4. Cuerpo del documento
• Para crear unidades independientes de contenido dentro de la estructura básica creada, utilice el elemento
<article>.
HTML5 Francesc Pérez
Fdez
Insertar párrafo
Declara que el contenido es
Imagen, vídeo
Texto descriptivo de la
imagen, vídeo
Sección
Artículo
Artículo
7. 4. Cuerpo del documento
• Hasta aquí hemos diseñado y configurado la estructura básica y común de una web, pero carente de estilo.
Todos los elementos (header, nav, section, aside, footer, article) son interpretados por el navegador como un
conjunto de cajas apiladas. Creando nuevos estilos podemos reorganizar las cajas para que adopten la
estructura básica propuesta (elemento aside aparezca al lado del section).
• Otras etiquetas relevantes: mark, small, cite, address, time, details, progress, ruby, rp, rt, wbr, datalist, audio,
vídeo, source, embed, fieldset, keygen, meter, output,
• Nuevos type de Inputs: tel, search, url, email, datetime, date, month, week, time, datetime-local, range, color
• Nuevos tipos de atributos para Inputs: autocomplete, autofocus, loadform, formaction, formenctype,
formmethod, formtarget, height, width, list, min, max, step, multiple, novalidate, pattern, placeholder, required
Ejemplo de plantilla básica
HTML5 Francesc Pérez
Fdez