Etiquetas de secciones del documento

aside

---

Etiqueta que utilizaremos para definir una zona secundaría de nuestra página web, se suele utilizar en los bloques derechos o izquierdos que contienen publicidad, o menús secundarios de nuestra web.Su sintaxis seria la siguiente:

<aside>….</aside>

Ejemplo:

….
<aside>
<div id=”publicidad”>
<img src=”banner.jpg” title=”banner” alt=”banner />
</div>
</aside>
….

section

---

Zonas divisibles y únicas en las que se divide nuestra web, las cuales contienen otros datos en común. Puede haber varios <section> en una misma web y puede haber <section> anidados, es decir uno o varias <section> dentro de otro <section>.

Su sintaxis seria la siguiente:

<section>….</section>

Ejemplo:

….
<section id=”tablets”>
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
</section>
….

header

---

Nueva etiqueta HTML5 que se utilizara para indicar la cabecera de la página o de cualquier cabecera de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <header>, en un mismo documento HTML.

Su sintaxis seria la siguiente:

<header>….</header>

Ejemplo:

….
<header>
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2<
</hgroup>
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
</header>
….

footer

---

Nueva etiqueta HTML5 que se utilizara para indicar el pie de la página o de cualquier pie de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <footer>, en un mismo documento HTML.

Su sintaxis seria la siguiente:

<footer>….</footer>

Ejemplo:

…
<footer>
<span>
<ul>
<li><a href=”#”>© Narf</a></li>
<li><a href=”#”>Política de privacidad</a></li>
<li><a href=”#”>Condiciones de servicio</a></li>
</ul>
</span>
</footer>
….

nav

---

Etiqueta nueva de HTML5 para señalar el menú de navegación principal de la página web que estemos maquetando.

Su sintaxis seria la siguiente:

<nav>….</nav>

Ejemplo:

….
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
….

article

---

Partes iguales y con características iguales en una pagina web, se pueden y suelen encontrar dentro de la etiqueta <section>. Pueden haber <section> dentro de <article> y otros <article> dentro del <article> padre.

Su sintaxis seria la siguiente:

<article>….</article>

Ejemplo:

….
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
….

hgroup

---

El elemento <hgroup> se utilizara para englobar varios títulos consecutivos, como por ejemplo el logo y el eslogan, titulo-subtitulo…

Su sintaxis seria la siguiente:

….
<hgroup>
<h1>….</h1>
<h2>….</h2>
….
</hgroup>
….

Ejemplo:

….
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2>
</hgroup>
….