Nuevas etiquetas en html5

NUEVAS ETIQUETAS EN HTML5
<header>
Provee información introductoria (títulos, subtítulos, logos), > es usado solo para el
cuerpo o secciones específicas dentro del cuerpo.
Ejamplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
</html>
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un título y un
tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del
header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
Ejemplo:

<!DOCTYPE html>
<html lang="es"><head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>

<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>

<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
Listad
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de
navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo
recomendado es usar listas <ul>.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>

</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
</body>
</html>
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde
están todos los posts. En un video de youtube, habría un section para el video,
uno para los datos del video, otro para la zona de comentarios.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>

<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
</html>
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada
post sería un article. En un post del blog, el post y cada uno de sus comentarios
sería un <article>.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<header>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>

</aside>
<footer>
Derechos Reservados © 2010-2011</footer>
</body>
</html>
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página
va en un aside. En un blog, obviamente el aside es la barra lateral de información.
En el home de un periódico, puede ser el área de indicadores económicos.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>

<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
</body>
</html>
<footer>
Es el pie de página y todo lo que lo compone.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>

Nuevas etiquetas en html5

Más contenido relacionado

La actualidad más candente (18)

Destacado (20)

Similar a Nuevas etiquetas en html5 (20)

Último (9)

Nuevas etiquetas en html5