Nuevas etiquetas estructurales en HTML5

Publicado el en la categoría Diseño y Programación

El diseño de las páginas web ha evolucionado mucho desde sus inicios. Si bien es cierto que hace unos años, las tablas copaban gran parte del protagonismo, hoy su uso es mas bien limitado, dejando paso a otro tipo de etiquetas que permiten un alto de personalización y sobre todo, de posteriores modificaciones, ya que con una simple edición del fichero CSS, cambiaremos el aspecto de todas las páginas.

Uno de los numerosos cambios que ha sufrido HTML desde la versión 4 a la 5, es la de incluir ciertas etiquetas para definir la estructura del sitio. Un ejemplo de documento HTML5 sería:

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>Ejemplo estructura - todohosting.es</title>
</head>
 
<body>
    <header>
       <h1>Mi sitio web</h1>
       <p>Mi sitio web creado en html5</p>
       
        <nav>
          <ul>
              <li><a href="#">Inicio</a></li>
              <li><a href="#">Quienes somos</a></li>
              <li><a href="#">Varios</a></li>
              <li><a href="#">Contacto</a></li>
          </ul>
        </nav>       
    </header>
    
    <section>
       <article>
           <h2>Titilo de contenido principal<h2>
           <p> Contenido principal </p>
       </article>
    </section>
    
    <aside>
       <h3>Titulo de contenido secundario</h3>
           <p>contenido secundario</p>
    </aside>
    
    <footer>
        todohosting.es 2012
    </footer>
    
</body>
</html>

En el que se han utilizado las siguientes etiquetas estructurales:

  • <header> : Cabecera de la página. Viene a ser lo mismo que <div id=”header”>. Aqui albergaremos título, logo, barras de navegación, etc.
  • <nav> : Entre ésta etiqueta colocaremos la botonera de navegación, o categorias o apartados de la web. Generalmente éstos enlaces estarán constuidos a partir de listas <ul> y sus respectivos <li>
  • <section> : Esta etiqueta se destinará a albergar el contenido propiamente dicho.
  • <article> : Mediante ésta etiqueta especificamos un contenido totalmente independiente y autónomo.
  • <aside> : La finalidad de ésta etiqueta, es la de contener información adicional “no relevante”, como puede ser el blogscroll, reproductor multimedia, galeria de imagenes, etc.
  • <footer> : Es el pie de la página. Con ésta etiqueta delimitaremos la zona destinada a los datos de contacto, copyright, etc.

Como no hemos definido ningún estilo el aspecto actual de la página sería:

Facebooktwittergoogle_plus