Mejora la estructura y accesibilidad de tu sitio web con otras etiquetas con HTML5 «header», «footer» y «nav»
ÍNDICE
Header
En este último tema vamos a tratar otras etiquetas con HTML5 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.
Nav
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>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>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.
Vídeo
Vídeo pendiente de publicar…
En futuros posts aprenderemos a utilizar la Inteligencia Artificial para que nos genere código, y lo insertaremos en nuestro sitio web creado con WordPress. De hecho, el banner publicitario de MovieShop que aparece en esta web, está realizado con la Inteligencia Artificial.
