Etiquetas de estructura
En las páginas web actuales, normalmente no nos limitaremos a definir todo el texto de la página exclusivamente con etiquetas <hx> y <p>, ya que se consigue una estructura demasiado general, para aplicaciones lectoras para personas con discapacidad o para los propios buscadores de Internet.
Los estándares actuales nos proporcionan un conjunto de elementos HTML para englobar los contenidos que se suelen encontrar en una página web. Cada uno de estos elementos está pensado para contener diferentes elementos HTML, como párrafos, imágenes, etc. Estas son sus etiquetas:
- <header> y </header>: para definir un bloque de contenido que hará las veces de título de la página web.
- <footer> y </footer>: define el pie de página de nuestra web.
- <nav> y </nav>: donde incluiremos diferentes enlaces para que el usuario pueda desplazarse entre las partes de nuestro sitio web.
- <section> y </section>: para definir grandes secciones de nuestra página.
- <article> y </article>: marca los límites de un contenido específico, como una entrada de un blog o un artículo en general.
- <aside> y </aside>: se emplea para definir un contenido que está relacionado con la página, pero que se debe considerar como separado del contenido principal.
Junto a estos elementos aún contamos con algunos más como <hgroup> para cabeceras de secciones, <figure> para contenidos multimedia, <time> para definir la fecha del contenido o <mark> para definir textos destacados para referencias; todas estas etiquetas con sus respectivos cierres.
Veamos un ejemplo de cómo quedaría una página web con estas etiquetas. Todas ellas aparecerán dentro del elemento <body>.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mi primera página</title>
</head><body>
<header>
<h1>Cabecera de nuestra página</h1>
</header><nav>
<p>Navegación. Aquí podríamos insertar diferentes enlaces al resto de nuestras páginas</p>
</nav><section>
<h1>Presentación</h1>
</section><article>
<h2>Una breve nota</h2>
<p>Mi primera página web, con estructura.</p>
</article><footer>
<p>Autor y fecha de publicación</p>
</footer></body>
</html>
Si mostramos esta página en el navegador, se verá exactamente igual que si quitamos las etiquetas de estructura, pero el matiz es que con ellas conseguiremos numerosas ventajas, aunque no sean visibles.
Por el momento no haremos un uso profuso de estas etiquetas de estructura, pero un sitio web que se vaya a distribuir por Internet debería emplearlas.
Pregunta de Elección Múltiple
Actividad 3
Modifica el fichero indice.html como se ve en esta sección, Guardarlo como index2.html
Obra colocada bajo licencia Creative Commons Attribution Share Alike 3.0 License