En clases anteriores aprendimos la introducción a html 5, cual es su estructura básica y algunas etiquetas como el nav o el article. Aprendimos que HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML 4 seguirá funcionando sin problemas en HTML5. Vamos a hacer un repaso rápido por todas las etiquetas nuevas que incorpora HTML:
<header>
Está diseñada para incluir los datos de cabecera de la página: logo, info del sitio.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin modificar la importancia del primero. Se utiliza mucho en seo, en posicionamiento web.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Esta etiqueta está diseñada para indicar el menú principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<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.
<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>.
<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.
<footer>
Es el pie de página y todo lo que lo compone.
vamos a dejar como ejemplo una plantilla de una portada de un posible blog en html 5.
y de tarea sería completar esta plantilla con contenidos (textos, info, links)
código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi blog en html5</title>
</head>
<body>
<header>
<hgroup>
<h1>El blog de yo</h1>
<h2>Este es el blog de un estudiante de html 5</h2>
</hgroup>
</header>
<nav>
Aqui va la botonera de navegación
</nav>
<section>
<article>Aqui va un post, con su titulo en h2</article>
<article>Aqui va el segundo post, con su titulo en h2</article>
<article>Aqui va el tercer post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que casi nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, info de contacto, datos de licencia o de copyright, etc.
</footer>
</body>
</html>
hasta la próxima clase!
No hay comentarios:
Publicar un comentario