1. Instituto Normal de Enseñanza Técnica
Gabriela Pérez Caviglia
http://creativecommons.org/licenses/by-nc-nd/3.0/
2. HTML5 es la última versión del
lenguaje de marcación e incluye
nuevas características, además de
mejorar algunas características
existentes.
El objetivo es que sea más fácil
codificar, usar y acceder a las páginas
Web.
3. doctype
XHTML 1.0 HTML5
<!DOCTYPE html PUBLIC <!doctype html>
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xht
ml">
4. head
Codificación de caracteres para el documento.
XHTML 1.0 HTML5
<meta http-equiv="Content-Type" <meta charset="utf-8">
content="text/html; charset=utf-
8" />
<!DOCTYPE HTML><html><head>
<meta charset="utf-8"><title>Titulo
del documento</title></head>
<body></body></html>
5. head
Enlace a la hoja de estilos
XHTML 1.0 HTML5
<link href="estilos.css" <link href="estilos.css"
rel="stylesheet" type="text/css" /> rel="stylesheet">
6. body
Aquí están los cambios más improtantes, ya que se agregan nuevos elementos que
ayudan a identificar cada sección del documento.
XHTML 1.0 HTML5
Estas secciones se resolvíamos con divs En html5 tiene sus propias etiquetas
7. Nuevas etiquetas
<header>
Presenta información introductoria y puede ser aplicado en diferentes secciones del
documento. Tiene el propósito de contener la cabecera de una sección.
<nav>
Indica una sección de enlaces con propósitos de navegación, como menús. Son
bloques de navegación.
<section>
Contenido que está relacionado con el contenido principal pero no es parte del
mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc.
8. Nuevas etiquetas
<footer>
Representa información adicional sobre su elemento padre, como el pie normal de
una página web.
<article>
Representa una porción independiente de información relevante (por ejemplo, cada
artículo de un períodico o cada entrada de un blog)
<hgroup>
Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples
niveles (por ejemplo, una cabecera con título y subtítulo).
9. Nuevas etiquetas
<figure>
Este elemento representa una porción independiente de contenido (por ejemplo,
imágenes, diagramas o videos.
<figcaption>
Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con
el contenido de un elemento <figure>, como la descripción de una imagen.
<mark>
Este elemento resalta un texto que tiene relevancia en una situación en particular
10. Nuevas etiquetas
<small>
Este elemento representa contenido al margen, como letra pequeña (por ejemplo,
descargos, restricciones legales, declaración de derechos, etc.).
<address>
Este elemento encierra información de contacto para un elemento <article> o el
documento completo. Es recomendable que sea insertado dentro de un elemento
<footer>.
11. Ejemplo
<div id="contenedor"><header
id="cabezal"><h1>El título principal del
sitio</h1></header><nav id="menu">
<ul><li>inicio</li><li>item 1</li><li>item
2</li><li>item 3</li></ul></nav><section
id="principal">La información principal
del sitio...</section><aside
id="secundaria">Información
secundaria...</aside><footer id="pie">El
pie del documento...</footer></div>
12. video con HTML5
HTML5 introduce un elemento para insertar y reproducir video
dentro de un documento HTML. Para esto se usa el elemento
<video></video>
<article><video id=”" width="560" height="310"
controls><source src=“video1.mp4"><source src=
“video1.ogg"></video></article>
13. video con HTML5
controls. muestra los controles del video
autoplay: empezará a reproducir el video automáticamente tan
pronto como pueda.
loop: Para que el video se reproduzca continuamente.
poster: Muestra una imagen mientras esperamos que el video
empiece a reproducirse.
14. video con HTML5
HTML5 provee un nuevo elemento para incorporar audio en un
documento HTML, el elemento <audio> que comparte casi las
mismas características del elemento <video>.
<section id="reproductor_audio"><audio
id="sonido" controls><source
src="sonidos/explosion.mp3"><source
src="sonidos/explosion.ogg"></audio></section>
