Etiquetas HTML
Enviado por Gaby_22 • 20 de Enero de 2014 • 1.237 Palabras (5 Páginas) • 299 Visitas
1. Etiqueta <header>
Como su nombre lo sugiere, la etiqueta header tiene por objeto marcar una sección de la página HTML como el encabezado. Listado 3 muestra el ejemplo de código del Listado 2 modificado para que use un header.
Listado 3. Añadiendo una etiqueta header.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>
2. Etiqueta <section>
La etiqueta section tiene por objeto identificar porciones significativas del contenido de la página. Esta etiqueta es de alguna forma análoga a dividir un libro en capítulos. Añadiendo una etiqueta section al código de ejemplo da como resultado el código en el Listado 4.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<p>
Esta es una sección importante de la página.
</p>
</section>
<div id='footer'>Footer</div>
</body>
</html>
3. Etiqueta <article>
La etiqueta article identifica las secciones principales del contenido dentro de la página Web. Piense en un blog, donde cada publicación de cada individuo constituye una porción significativa de contenido. Añadiendo etiquetas article al código de ejemplo da como resultado el código en el Listado 5.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>
4. Etiqueta <aside>
La etiqueta aside indica que el contenido dentro de ella está relacionado el contenido principal de la página pero que no es parte de ella. En cierta forma es análogo a usar paréntesis para hacer un comentario en un cuerpo de texto (como este). El contenido entre paréntesis proporciona información adicional sobre el elemento que lo contiene. Añadiendo una etiqueta aside al código de ejemplo da como resultado el código en el Listado 6.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>
5. Etiqueta <footer>
La etiqueta footer marca el contenido dentro del elemento que es el pie de página del documento. Añadiendo una etiqueta footer al código de ejemplo da como resultado el código en el Listado 7.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
6. Etiqueta <nav>
El contenido dentro de la etiqueta nav tiene por objeto propósitos de navegación. Añadiendo una etiqueta nav al código de ejemplo da como resultado el código en el Listado 8.
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
...