La etiqueta <main>, cómo se usa y la diferencia con <section>
El uso de la etiqueta <main> en el lenguaje HTML
La estructura HTML de una página web es clave para la accesibilidad y usabilidad de la página, además de para el posicionamiento SEO. Uno de los elementos que se añadieron al "crear" HTML5 es la etiqueta <main>, que permite identificar el contenido principal de una página web. Los usuarios no verán ninguna diferencia al entrar en la web pero los navegadores y los motores de búsquedas sabrán cuál es la parte principal de la página y el tema del que trata.
¿Qué es la etiqueta <main>?
La etiqueta <main> es un elemento HTML5 que se utiliza para identificar el contenido principal de una página web. El contenido que se encuentra en la etiqueta <main> debe ser único en la página y representar su propósito principal. Además, esta etiqueta solo debe aparecer una vez en el documento HTML.
¿Para qué sirve la etiqueta <main>?
La etiqueta <main> ayuda a los desarrolladores a mejorar la accesibilidad de una página web, ya que permite que los usuarios lleguen al contenido principal y lo identifiquen fácilmente. También es muy útil para los motores de búsqueda, ya que les indica claramente cuál es el tema principal de la página. Además, la etiqueta <main> también ayuda a los desarrolladores a estructurar el contenido de la página, lo que facilita su mantenimiento y actualización.
¿Cómo se diferencia la etiqueta <main> de la etiqueta <section>?
Es necesario diferenciar entre estas dos etiquetas porque muchas veces se confunden y no queda clara la diferencia entre cada una ni cuándo hay que usar una o la otra.
La etiqueta <section> se utiliza para dividir el contenido de una página en secciones de contenidos o temas diferentes, como capítulos en un libro o secciones de un periódico. Cada sección debe tener un encabezado, que se puede crear usando las etiquetas <h1>-<h6>. Por otro lado, la etiqueta <main> indica cuál es el contenido principal de una página y solo debe aparecer una vez.
Un ejemplo de cómo usar la etiqueta <main> y <section> juntas sería una página web sobre recetas de cocina. Podríamos utilizar la etiqueta <main> para identificar el contenido principal de la página, que sería una lista de todas las recetas. En la etiqueta <main>, podríamos incluir la etiqueta <section> para dividir las recetas en diferentes categorías, como "postres", "entrantes" y "platos principales". Cada sección tendría un encabezado <h2> que describiría la categoría.
En resumen, la etiqueta <main> es un elemento HTML5 que se utiliza para identificar el contenido principal de una página, mientras que la etiqueta <section> se utiliza para dividir el contenido en secciones. Utilizando ambas etiquetas de manera apropiada, los desarrolladores pueden mejorar la accesibilidad y usabilidad de la página web y facilitar el mantenimiento y actualización del contenido, además de mejorar el posicionamiento SEO en los buscadores para aparecer más arriba en la lista de resultados y conseguir más visitas.