Anteriormente la etiqueta <div> dominaba la escena a la hora de mostrar cada una de las partes de un sitio web o blog, así como en su momento lo hizo la etiqueta <table>.
Las divisiones principales logradas con HTML5 nos brindan la versatilidad de ser usadas a nuestra disposición, no obstante la estructura más estandarizada de estas secciones se basa en la función de cada una.
<header>
Esta es la primera sección del cuerpo de la página, la cabecera, y presenta el título de nuestro sitio. Dentro del header se anida la etiqueta h1, que determina el título principal del sitio.
<header>
<h1>Titulo de mi sitio</h1>
</header>
<nav>
La etiqueta nav se usa para presentar un menú o barra de navegación que facilite al usuario el acceso al contenido de nuestro sitio.
<nav>
<ul>
<li>Principal</li>
<li>Fotos</li>
<li>Videos</li>
</ul>
</nav>
<section>
La tercera sección lleva precisamente este nombre y es la que aloja la información o contenido principal de una web o blog. Si nuestro contenido está compuesto de texto, imágenes o videos, estaran anidados en esta etiqueta.
<section>
… contenido principal…
</section>
<aside>
Ubicada al lado de la información principal, en esta sección se coloca la información relacionada con el sitio o adicional al mismo, como el autor del contenido o cualquier otra información.
<aside>
… contenido secundario…
</aside>
<footer>
La última división de un diseño básico de HTML5 es el pie del sitio web o la barra de reconocimientos. En esta sección suele ubicarse información del diseñador del sitio, copyringht del contenido del sitio, etc.
<footer>
Derechos reservados AracniBlog 2014 - 2015
</footer>
Junto con los elementos considerados en el post divicion general HTML5, estos son los parámetros que nos brinda HTML5 para conformar la estructura básica de un sitio web ordenado y bien definido.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”/>
<meta name=”description” content=”Aquí iría la descripción de mi web”/><meta name=”keywords” content=”palabra1, palabra2, palabra3, etc.”><title>Nombre de mis sitio web</title><link rel=”stylesheet” href=”rutadeenlaceconestilos.css”></head>
<body>
<header><h1>AracniBlog</h1></header><nav><ul><li>Principal</li><li>Fotos</li><li>Videos</li></ul></nav><section>… contenido principal…</section><aside>… contenido secundario…</aside><footer>Derechos reservados AracniBlog 2014 - 2015</footer></body>
</html>
0 comentarios :
Publicar un comentario