Etiquetas HTML

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!

TEMA ANTERIOR
TUTORIALES

Relacionado

COMPARTE: