Introducción a Etiquetas HTML 5

joaquinls
Nuevas etiquetas
HTML5 estructurales
Joaquín Lara Sierra
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.
Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
1

joaquinls
De que hablar
• ¿Qué es HTML5?
• El contexto de HTML.
• Los Navegadores.
• DocType.
• Nuevos elementos
estructurales.
• Enfoque HTML 4.
• Enfoque HTML 5.
• Ejemplos.
2

joaquinls
HTML5, la última versión del Hypertext Markup Language
(HTML), es la versión más radical del lenguaje a la fecha.
Esta presenta muchos recursos nuevos en una variedad
de áreas. Algunas de las adiciones más notables incluyen:
• Etiquetas integradas multimedia para audio y video
• Un bastidor para dibujar contenido en el navegador
• Formatos más inteligentes que le permiten hacer cosas
como validación mediante el uso de un atributo
requerido
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
3

joaquinls
Contexto
• Tim Berners-Lee creó el HTML original en 1989 para
solucionar las deficiencias de los métodos existentes para
acceder a información en Internet. Desde que se concibió,
encontrar su camino en Internet era una tarea difícil.
• HTTP es un protocolo de servicio utilizado para entregar
contenido.
• La combinación de HTTP y HTML ofrece una navegación
rápida y fácil por el contenido en Internet, al permitirle
simplemente hacer clic en los enlaces de texto para
navegar entre documentos.
• Después de crear estas dos tecnologías, Berners-Lee
continuó y fundó el World Wide Web Consortium (W3C)
Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
4

joaquinls
• Para el momento de este escrito, HTML5 ha sido
lanzado oficialmente. La mayoría del contenido en la
Web todavía está siendo escrito para la especificación
HTML4. No obstante, varios navegadores incluyen
soporte para la especificación HTML5. Como cada
navegador puede soportar solo ciertos recursos de
HTML5, las cosas se complican un poco. Antes de
escribir un sitio basado en HTML5, revise cada uno de
sus navegadores objetivo para asegurarse de que
soporten los recursos que va a utilizar para su sitio.
5

joaquinls
Sin importar las capacidades de sus navegadores objetivo,
usted debe decirle al navegador que usted desea que su
contenido sea presentado usando la especificación
HTML5. Usted hace esto usando la declaración doctype.
Afortunadamente, la declaración doctype se ha
simplificado bastante en HTML5. De hecho es sólo una.
Para que su navegador presente en pantalla usando la
especificación HTML5
<!DOCTYPE html>
6

joaquinls
La razón para crear nuevas
etiquetas estructurales es
dividir las páginas Web en
partes lógicas que describan
el tipo de contenido que
incluyen. Conceptualmente,
piense en la página Web
como un documento. Los
documentos tienen
encabezados, pies de
página, capítulos y otras
convenciones diferentes que
dividen el documento en
partes lógicas.
7

joaquinls
De HTML 4
Si usted ha creado incluso los documentos HTML más
simples, entonces estará familiarizado (a) con la etiqueta
div . La etiqueta div es el principal mecanismo de la era
pre-HTML5 para crear bloques de contenido en un
documento HTM.
8
Header
Footer
Content

joaquinls
De HTML 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Una página HTML simple usando Divs</title>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>
9

joaquinls
De HTML 5
HTML5 responde a este problema proporcionando un
conjunto de etiquetas que definen con mayor claridad los
bloques principales de contenido que componen un
documento HTML.
Las nuevas etiquetas son:
• header
• section
• article
• aside
• footer
• nav
10
<div id = “header”>
<div id = “nav”>
<div id = “footer”>
<div id = “sction”> <div id = “aside”>
<div id = “article”>

joaquinls
El área header
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML simple </title>
</head>
<body>
<header>Header</header>
<div id='content'>Content</div>
</body>
</html>
11

joaquinls
El área section
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML simple </title>
</head>
<body>
<section><p>
Esta es una sección importante de la página. </p>
</section>
</body>
</html>
12

joaquinls
El área article
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title> </head>
<body>
<section>
<article>
<p>Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog. </p>
</article>
<article>
<p> Esta es una sección importante del contenido de la página.
</article>
</section>
</body>
</html>
13

joaquinls
La etiqueta aside
<!DOCTYPE html>
<html>
<body>
<section>
<article>
</aside> </p> Este es un aparte de la primera publicación en blog. </p>
</aside>
</article>
<article>
</article>
</section>
</body>
</html>
14

joaquinls
La etiqueta footer
<!DOCTYPE html>
<html>
<body> <header>Header</header>
<section>
<article> <p> Esta es una sección importante del contenido de la página. Tal vez una
publicación en blog. </p>
</aside>
</article>
<article> <p> Esta es una sección importante del contenido de la página. Tal vez una
publicación en blog. </p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
15

joaquinls
La etiqueta nav
<!DOCTYPE html>
<html>
<body>
<header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
<article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p>
</aside>
</article>
</article>
</section>
</body>
</html>
16

joaquinls
Ejemplo completo
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title></head>
<body> <header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
</aside>
</article>
</article>
</section>
</body>
</html>
17

Introducción a Etiquetas HTML 5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introducción a Etiquetas HTML 5

Semelhante a Introducción a Etiquetas HTML 5 (20)

Mais de Joaquin Lara Sierra

Mais de Joaquin Lara Sierra (20)

Introducción a Etiquetas HTML 5