Etiquetas HTML

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

Etiquetas HTML

Í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!

Publicaciones Similares

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *