Seguimos donde lo dejamos en la anterior clase Etiquetas semánticas estructurales en HTML5 - <header>, <nav>, <main> y <article>. Vamos a seguir aprendiendo las siguientes etiquetas semánticas estructurales, las cuales nos van a permitir construir un sitio web profesional.
Definiendo Secciones con <section>
La W3C define la etiqueta <section> como un elemento que representa una sección genérica de un documento. Una sección es una agrupación temática de los contenidos, típicamente, con un titulo. La W3C da en su web un par de ejemplos. El primero sería los capítulos de un libro, que podrían ser encerrados en una etiqueta <section>. El segundo ejemplo que nos muestran es, la página principal de un sitio web. Puede dividirse en secciones como, introducción, noticias e información de contacto, etc.
Algunos ejemplos de uso serían:
- Un índice
- Una sección de deportes
- Una sección de información meteorológica
- Una sección de noticias locales
- Una sección sobre política
Es recomendable que las secciones tengan un título. Al encerrar <section> un contenido relacionado, es una buena practica que esa sección tenga un título o un encabezado. Habrá ocasiones donde no podamos colocar un título, como por ejemplo una sección que contenga los enlaces a redes sociales o una sección donde se muestre la información meteorológica. Las secciónes pueden estar en cualquier parte de nuestro sitio web, incluso podrían estar dentro de <header>.
La etiqueta <section> puede ir dentro de la etiqueta <article>. Nos vamos a encontrar con artículos muy extensos, en este caso podríamos encerrar bloques de artículos. Pero también la etiqueta <section> puede contener varias etiquetas <article>.
Algo a tener en cuenta es que el uso de la etiqueta <section> es similar a la etiqueta <div>, pero no igual. No es igual ya que <section> tiene un significado semántico para los rastreadores y un <div>, no tiene absolutamente ningún valor semántico. No os preocupéis, en breve vamos a estudiar el uso de la etiqueta <div>.
Recomendaciones para el uso de la etiqueta <section>:
- No utilices <section> si lo único que quieres es agrupar contenidos para aplicar estilos. Para esa función tenemos la etiqueta <div>.
- Utiliza <section> cuando su contenido tiene un tema distinto en el contexto en que se encuentra.
- Proporciona un titulo a la sección siempre que sea posible.
Definiendo contenido secundarios con <aside>
En ocasiones vamos a encontrar contenidos que se encuentran relacionados con el contenido principal. Este contenido no es lo suficientemente relevante como para ser considerado contenido importante de nuestra página.
Para indicar de manera semántica a los agentes de usuario, que cierto contenido, es un contenido secundario y que no se le debe proporcionar la misma importancia que al contenido principal, usaremos la etiqueta <aside>.
Le llamamos contenido secundario a por ejemplo:
- Una lista de artículos
- Publicidad
- Bloque para redes sociales
- Una lista de productos relacionados
- Un calendario de eventos
Estos contenidos normalmente van situados en la parte izquierda o derecha del contenido principal. Es contenido secundario, no porque no sea importante, si no, porque complementa al contenido principal.
Vamos a ver el código para entenderlo mejor:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header> <h1>Encabezado del sitio</h1> <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> </header> <main> <article> <header> <h1>ARCHIPIELAGOS EN BARCELONA</h1> <p>Publicado por ART el <time datetime="2018-07-27">27 de Julio de 2018</time></p> </header> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt earum eius, dolor voluptates vel architecto assumenda quaerat deserunt, aliquid quos, fugit. Vitae dolore nemo animi quisquam adipisci necessitatibus iure! Numquam. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt earum eius, dolor voluptates vel architecto assumenda quaerat deserunt, aliquid quos, fugit. Vitae dolore nemo animi quisquam adipisci necessitatibus iure! Numquam. </p> </article> </main> <aside> <h1>INFORMACIÓN COMPLEMENTARIA</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda reprehenderit, laborum expedita suscipit ipsum ex cum, nesciunt voluptatem, repudiandae id ullam minima molestiae quis pariatur adipisci impedit atque quibusdam. </p> <ul> <li>enlaces</li> <li>enlaces</li> <li>enlaces</li> <li>enlaces</li> </ul> </aside> </body> </html>
Os recuerdo que las etiquetas semánticas estructurales, de por si, crean una nueva sección para el documento. También cada sección o bloque puede contener su etiqueta <h1>.
Google recomienda que primero se defina el contenido principal con <main> y después el contenido secundario <aside>. De este modo los buscadores van a ser mas eficientes a la hora de buscar dentro del código. Aunque también podríamos encerrar la etiqueta <aside> dentro de la etiqueta <main>. Por ejemplo, la sección donde se habla sobre el autor del artículo, podría ir dentro de <main> y encerrada con <aside>, ya que este contenido es secundario. Incluso hay buscadores que omiten esta etiqueta, si tuvieras una serie de enlaces importantes o principales, lo suyo sería ponerlos dentro de una etiqueta <section> o mejor aún una etiqueta <div>.
Conclusiones
Acabamos de estudiar dos etiquetas importantes en cuanto a semántica estructural, las cuales son <section> y <aside>. Esto va a influir mucho a la hora de que los rastreadores pasen por nuestro sitio web y lean nuestro código. En la próxima clase intentaremos dejar zanjado el modulo que como has podido comprobar ha sido dedicado en exclusiva a la semántica estructural.
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