Tienda » BLOG » Otras etiquetas con HTML5
Otras etiquetas con HTML5

Otras etiquetas con HTML5

Otras etiquetas con HTML5
Otras etiquetas con HTML5

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.

COMPARTE:

1 comentario en “Otras etiquetas con HTML5”

  1. Pingback: Listas y tablas con HTML5

Deja un comentario

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

Carrito de compra
Scroll al inicio