Habiendo finalizado el modulo 3 del curso de HTML5 desde 0, pasamos ya a estudiar las etiquetas semánticas estructurales en HTML5. No voy a ponerme a contar la historia de lo que son los elementos semánticos, ya que lo que queremos nosotros es crear páginas web profesionales. Evidentemente, vamos a estudiar como usar estos elementos semánticos, pero solo lo que necesitamos para completar nuestros proyectos. Siempre podéis pasaros por www.w3schools.com para saber más sobre el tema, nunca se sabe demasiado.
Para que los agentes de usuario (que son todos aquellos dispositivos desde donde el usuario puede acceder a la web), entiendan nuestro contenido, deben saber exactamente el contexto donde se definen. Para esto están las etiquetas semánticas estructurales, que les dirán a los agentes de usuario que tipo de contenido hay dentro de cada etiqueta.
En anteriores clases hemos hablado de las etiquetas semánticas de contenido. Recordemos etiquetas como <strong> para darle fuerza o importancia al texto. La etiqueta <time> para encerrar contenido relacionado con el tiempo o la fecha. Pero ahora vamos a ver etiquetas semánticas para crear estructura. Son aquellas etiquetas que nos van a permitir crear el diseño de nuestro sitio.
Recuerda esto:
- La etiquetas semánticas no tienen estilo alguno. Sera CSS el encargado de definir los estilos de estas etiquetas.
- Las etiquetas semánticas estructurales no indican la forma en como se deben mostrar los contenidos, no indican ni la forma ni el lugar.
- Las etiquetas semánticas estructurales sirven para dar significado al contenido que tienen dentro y ese contenido puede estar en cualquier lugar del sitio.
Creando encabezados con <header>
Si una sección de tu página tiene un grupo de contenido introductorio y este incluye algún menú de navegación, titulo de la página, enlaces, logo, etc y sirve de introducción para algo, ese contenido debe ser agrupado con la etiqueta <header>. Así de sencillo, sin más palabrería ni enrrollarme en historias raras.
Definiendo la navegación de nuestro sitio con la etiqueta <nav>
La etiqueta <nav> sirve para presentar explicitamente una zona de navegación de nuestro sitio web. Marca semanánticamente una zona de navegación de nuestra página, es decir, agrupa los enlaces principales de nuestro sitio con una sola etiqueta. Estos enlaces, deben ser los enlaces más importantes de nuestra página y que nos lleven a diferentes secciones de nuestro sitio o inclusive a diferentes secciones de una misma página. La etiqueta <nav> debe ser usada solo para los grupos importantes de enlaces.
Normalmente los enlaces van a estar dentro de una etiqueta <ul>, porque los CMS como Magento, Drupal, Wordpress, etc, generan los enlaces de navegación usando esta estructura. Así que es recomendable usar este modo de crear enlaces de navegación.
La W3C recomienda no encerrar los enlaces de pié de pagina dentro de <nav>, ya que es información irrelevante o poco importante. Si abusáramos de esta etiqueta terminaría perdiendo su valor semántico.
<nav> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="nosotros.html">Nosotros</a></li> <li><a href="servicios.html">Servicios</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </nav>
Definiendo el área principal de un sitio con <main>
La etiqueta <main> se utiliza para encerrar el contenido principal de la página y debe utilizarse solo una vez por página, no puede haber en un sitio web dos secciones donde se encuentre el contenido principal. La W3C recomienda no colocar la etiqueta <main> dentro de una etiqueta <header>, <footer>, <nav>, <article> o <aside>.
Definiendo el contenido principal con <article>
Normalmente la etiqueta <article> va a estar dentro de la etiqueta <main>. Recordamos que la etiqueta <main> define la zona principal del sitio, pero la etiqueta <article> es más especifica. La etiqueta <article> indica que el contenido que está dentro de esa etiqueta, se encuentra la información valioso del sitio. La razón o motivo por la que el usuario esta en la página, el contenido valioso.
En una página puede haber varias etiquetas <article>, ya que esta etiqueta no está limitada únicamente a encerrar artículos. La W3C define la etiqueta <article> como un contenedor de unidades independientes de contenido. Con lo cual puede contener su propia estructura si así lo requiere. Por ejemple se podría colocar una etiqueta <header> de encabezado y una etiqueta <footer> de pié de página si así lo requiere. Incluso se puede ir más allá, se puede colocar otro <h1> en la misma página ya que están en diferentes secciones.
Conclusiones
En esta clase ya nos hemos familiarizado y además, aprendido el significado de las etiquetas <header>, <nav>, <main> y <article>. Todas ellas imprescindibles a la hora de desarrollar un sitio web profesional. Dejo la clase aquí hasta la siguiente donde estudiaremos las etiquetas semánticas estructurales que nos faltan para completar una página web básica. Mas que nada porque sino lo mismo se os va a hacer eterno o pesado.
No tengo nada más que añadir en esta clase así que os invito a continuar con la siguiente, va a ser muy interesante. Me gustaría pedirte que compartas esta clase con tus amigos, ya que de esa manera otras personas se beneficiaran de estos conocimientos al igual que lo has hecho tu. Si te apetece regalanos un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios