Estructura en HTML5

Si eres un programador web de la old school seguramente recuerdes la época en que las tablas eran el elemento más utilizado para estructurar tu web. La generalización del uso de cajas (div) acabó con esta forma de maquetar, siendo a día de hoy la fórmula predominante. Esto provoca el uso indiscriminado de elementos div por todo el documento, que nos vemos obligados a ir posicionando con CSS (a veces rompiéndonos mucho los huevos para conseguir la compatibilidad en todos los navegadores) a base de definirlos a base de id y clases. Los nuevos elementos que incorpora HTML5 para la estructura son los siguientes, y nos permitirán un código mucho más limpio:

  • header: El elemento header es el encabezado de la página web, formado por una serie de elementos introductorios o de navegación.
  • footer: Este elemento es el pié de la página o la sección, donde suele insertarse información sobre la licencia, el autor, fecha de creación, empresa relacionada…
  • nav: Se usa para insertar un menú de navegación en la página, formado por enlaces. No todos los grupos de enlaces de la página tienen que estar dentro de una sección nav, sólo los principales, como el menú de navegación bajo el encabezado o un menú en el pie.
  • section: Define una sección general en un documento o aplicación, como si fuera una especie de “capítulo”. Puede contener subsecciones y si se utilizan con elementos h1-h6 se pueden crear jerarquías, muy útiles para una buena estructuración de la web.
  • article: Un elemento article es seguramente lo más complicado de explicar. Es un elemento, una seccion reutilizable de la página web para mostrar un determinado contenido, como un post en un foro, un artículo en un periódico, un widget interactivo… Los elementos article pueden anidarse, siendo el artículo anidado parte del principal, como los comentarios a una publicación en un blog.
  • aside: Es una sección de la página que abarca un contenido relacionado con el contenido que lo rodea, perp que se puede considerar un contenido independiente. Puede utilizarse para barras laterales, elementos publicitarios, grupos de elementos de la navegación…

Ahora un ejemplillo de código bien tochaco con una página html. Desde la declaración hasta el último pie:

html>
lang="es">
<head>
  charset="utf-8" />
  IE=edge,chrome=1" />
  <title>prueba</title>
  name="description" content="EjemploHTML5" />
  name="author" content="DonnieRock" />
  name="viewport" content="width=device-width; initial-scale=1.0" />
</head>

<body>
  <div>
    <header>
      <h1>prueba</h1>
    </header>
    <nav></pre>
<a class="hiddenSpellError">href="/">Home</a>
<pre></pre>
<a class="hiddenSpellError">href="/contact">Contact</a>
<pre>
    </nav>

    <div>
      <article>
      	<h2>Artículo1</h2>
<section>El artículo1: Ninguna banda finlandesa llegará nunca aser como Black Sabbath</section>
      	<h2>Artículo34</h2>
      	<section>El artículo34: Hago lo que quiero, donde quiero y cuando quiero</section>
      	<article>
      		<h3>Subartículo</h3>
<section>Kobe Bryant nunca será Michael Jordan</section>
      	</article>
      </article>
      <aside>Esto, para el lado</aside>
    </div>

    <footer></pre>
© Copylefted by Old Dog Donnie Rock
<pre>
    </footer>
  </div>
</body>
</html>

En fin, espero que estoy os sea de ayuda empezando con HTML5.

Anuncios

2 comentarios en “Estructura en HTML5

  1. xbello

    Ollo, que sigue habendo que facer CSS. Sólo que agora en lugar de facer

    div.nav {opcions} ou
    #nav {opcions}

    Cambiamos a:

    nav {opcions}

    Co cal, dentro dos novos tags podemos meter CSS alternativo máis fácilmente, por exemplo para tunear un elemento de nav:

    nav {opcions do nav}
    nav a {opcions de links}
    nav p {opcions de párrafo}

    etc. con todo agrupado por anidados lóxicos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s