Mejora la estructura y accesibilidad de tu sitio web con otras etiquetas HTML 5 «header», «footer» y «nav»

ÍNDICE
- Header
- Footer
- Nav
- Etiquetas HTML: Article
- Etiquetas HTML: Section
- Aside
Header
En este último tema vamos a tratar otras etiquetas HTML 5 para estructurar y mejorar la accesibilidad de un sitio web. «Header» define la sección de encabezado, «footer» la sección de pie de página y «nav» la navegación principal del sitio.
La etiqueta <header> es útil para la cabecera, pudiendo establecer en la misma los logos, títulos, formularios de búsqueda, etc.
Footer
La etiqueta <footer> nos servirá para establecer el pie de página de nuestro sitio web, estableciendo páginas estáticas como por ejemplo la página de «Contacto», «Condiciones legales», etc.
Footer
La etiqueta <nav> tiene la funcionalidad de establecer la barra de navegación. También puede ser utilizada para crear un menú para navegar por las diversas páginas de nuestro sitio web. Un ejemplo sería:
<header> <h1>Consolas</h1> <nav> <ul> <li><a href="" class="current">Inicio</a></li> <li><a href="">Super Nintendo</a></li> <li><a href="">Mega Drive</a></li> <li><a href="">xBox</a></li> <li><a href="">PlayStation</a></li> </ul> </nav> </header>
Etiquetas HTML: Article
Sirve para definir un contenido específico que tiene sentido por sí mismo dentro de una página web como por ejemplo:
<article> <h2>Universal Vs. Nintendo</h2> <h3>El pleito de Donkey Kong</h3> <p>...</p> </article> <article> <h2>Sony Vs. Nintendo</h2> <h3>Nintendo rompe relaciones con Sony</h3> <p>...</p> </article>
Etiquetas HTML: Section
Su utilidad es la creación de secciones. Un ejemplo podría ser cuando ordenamos un blog de artículos de consolas por las diferentes secciones de compañías.
<section class="empresasconsolas"> <h2>Consolas</h2> <a href="">Nintendo</a> <a href="">SEGA</a> <a href="">Microsoft</a> <a href="">Sony</a> </section> <section class="contacto"> <h2>Contacto</h2> <p>MovieShop<br>Calle Movie número Shop<br/>Alicante<br/>Alicante</p> </section>
Aside
Sirve para ubicar contenido de menor importancia en la barra lateral. Un ejemplo sería un banner publicitario.
En el siguiente módulo de estos tutoriales, aprenderemos a realizar formularios, imprescindibles estos si queremos ofrecer nuestros servicios, resolver dudas y/o aclaraciones de todos los usuarios, y por qué no decir, recibir consejos para mejorar nuestra web, ya que son ellos quienes nos propondrán los mejores consejos. Y ya sabes, si tienes dudas sobre los temas o sugerencias para nuevos módulos, ¡No dudes en dejárnoslas en los comentarios!
Un comentario