Etiqueta <header>

La etiqueta header sirve para mostrar información de cabecera útil para un documento u otras secciones principales.

Típicamente se utiliza para agregar encabezados, es decir, h1-h6 que definen el título y subtítulos de la sección, aunque también se puede utilizar para dar información sobre fechas de publicación, versiones del contenido mostrado, o enlaces de navegación dentro del documento (por ejemplo, enlaces a la home, información de contacto, o al mapa web de una página). A pesar del nombre de la etiqueta, ésta no tiene porque ir situado al principio del HTML, sino que puede estar posicionado en cualquier posición dentro de nuestro documento.

<header>!<h1>Blog: cundweb.blogspot.com</h1>!<p>Clase de diseño web</p>!</header>

Etiqueta <div>

La etiqueta <div> se utiliza para definir una sección dentro del documento.

Esta etiqueta se usa comúnmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado.

<div style="color:red">!   <h3>Grupo 1</h3>!   <p>Este bloque tiene definido el texto de color rojo.</p>!</div>!<div style="color:green">!   <h3>Grupo 2</h3>!   <p>Este bloque tiene definido el texto de color verde.</p>!</div>!

Atributos de la Etiqueta <div>

class

nombre de la claseAsigna un nombre de clase. El atributo class actúa: • Como selector para las hojas de

estilo(CSS), cuando se asigna información de estilo a un conjunto de elementos.

• Para procesos generales por parte del usuario.

id

nombreAsigna un nombre a un elemento. El atributo id actúa: • Como selector para las hojas de estilo(CSS). • Como vínculo destino para vínculos de

hipertexto. • Como medio de hacer referencia a un

elemento en particular desde un script. • Como nombre de un elemento object

declarado. • Para procesos generales por parte del

usuario.

style

estiloEste atributo especifica información de estilo para el elemento actual.

title

nombre

Este atributo ofrece información consultiva sobre el elemento para el cual se establece.

dir

ltr o rtlEspecifica la dirección del texto. Valores posibles: • ltr : De izquierda a derecha (left to right). • rtl : De derecha a izquierda (right to left).

lang

código de lenguaje!!Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. !El atributo lang es útil para: ! • Ayudar a los motores de búsqueda. • Ayudar a los sintetizadores de voz. • Ayudar al agente de usuario a hacer decisiones sobre separación de

palabras, ligaduras, y espaciado. • Ayudar a los verificadores de ortografía y gramática.

etiqueta <nav>

Nueva semántica con HTML 5

Una de las grandes innovaciones de HTML5 ha sido la de introducir semántica en nuestro código html de forma que de nuestra web se pueda extraer más información de la que of recemos mediante nuestros contenidos. Vamos a centrarnos un poco en como trabajábamos hasta ahora, por ejemplo, a la hora de hacer un menú:

<div class="menu">!<ul>!<li><a href="seccion1.html">ir a sección 1</li>!<li><a href="seccion2.html">ir a sección 2</li>!<li><a href="seccion3.html">ir a sección 3</li>!<li><a href="seccion4.html">ir a sección 4</li>!</ul>!</div>

Esto que vemos es una lista de enlaces, y será el menú principal de nuestra web. Hasta el momento con html4 no podíamos diferenciar entre estos enlaces que formaban el menú de nuestra web, con un enlace externo relacionado con, por ejemplo, una noticia de nuestro portal. !

La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo.

<nav>!<ul>!<li><a href="seccion1.html">ir a sección 1</li>!<li><a href="seccion2.html">ir a sección 2</li>!<li><a href="seccion3.html">ir a sección 3</li>!<li><a href="seccion4.html">ir a sección 4</li>!</ul>!</nav>

De esta forma estamos diciendo, de una forma transparente a los visitantes de nuestro sitio web, que esa lista de enlaces es nuestro menú de navegación. Ahora la pregunta es, realmente, ¿para qué sirve todo esto?

Evidentemente, el darle significado a las cosas solo tiene sentido si luego hay alguien que es capaz de interpretar ese significado (sino sería como hablarle a los sordos por teléfono). En nuestro caso, los motivos pueden ser desde un mejor posicionamiento SEO (mientras más información le demos a los rastreadores más información podrán sacar de nuestros sitios), hasta una mejor interpretación de los lectores para ciegos u otros tipos de software similares. La nueva lista de elementos que tenemos en html5 es:

!•!section!!•!nav!!•!article!!•!aside!!•!hgroup!!•!header!!•!footer!!•!time!!•!mark!

etiqueta <section>

La etiqueta <section> y su correspondiente etiqueta de cierre </section> se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. Además, todo el contenido que engloba ha de guardar cierta relación entre sí.

etiqueta <aside>

El Elemento HTML Aside (<aside>) representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

etiqueta <article>

Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos.

Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle.  Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article.