section-lacks-heading

Section lacks heading

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0
¡Vota!

El warning completo es: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Si estás intentando que tu sitio WordPress cumpla con los estándares HTML5 de W3C, y si estás leyendo este post es porque te ha saltado el warning Section lacks heading.

Un par de cosas antes

Para resolverlo tenemos que tener presente un par de cosas antes:

  • Es un warning, por lo que podemos fácilmente obviarlo y no pasaría nada.
  • La descripción del warning dice: Consider, es decir, no te está diciendo must o have to, lo que significa que más es un consejo que te dan y no una obligatoriedad.

Si pese a ello, quieres seguir resolviendo dicho warning de Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections lo que tendrás que hacer es investigar el código de tu sitio web para ver las posibles opciones.

Section lacks heading. Solución general.

De manera general, la solución pasa por:

  • Añadir un h2-h6, es decir, una etiqueta desde <h2> a <h6> dentro de la <section>
  • Cambiar la etiqueta <section> por una etiqueta <div>

Aquí tenéis un artículo de stackoverflow que habla del warning de Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Como he dicho, eso son las soluciones generales. Ahora habría que profundizar más en el código para decidir cuál sería la correcta.

Section lacks heading. Soluciones particulares o workarounds.

Como ejemplos, aquí os puedo dejar dos posibles opciones:

  • Si tenemos una etiqueta de párrafo <p></p> dentro de nuestra <section>, podemos cambiarla por una etiqueta h2-h6 de manera que si tiene una clase css asociada, mantendrá el mismo estilo y a la misma vez resolveremos nuestro problema de tener un heading.
  • Esta solución me gusta menos, pero si no tenemos otra opción, podemos incluir un h2-h6 dentro de nuestro <section> con algún texto que por ejemplo puede ser el título del post, etc… algo que realmente luego no se va a mostrar en pantalla porque nos vamos a encargar de asignarle una clase a dicha etiqueta h2-h6 para luego por css hacerle un display:none. De esta manera evitamos el Section lacks heading, pero no alteramos el resultado final de nuestro sitio web.

Aquí os dejo más información sobre el tema. Es un artículo que nos explica the section element.

¿Y vosotros? ¿Cómo resolvéis vuestros Section lacks heading?

¿Hablamos?

Rafa Labrador

Rafa Labrador es el autor del blog del mismo nombre rafalabrador.com. Rafa ayuda a negocios unipersonales a conseguir más visibilidad y ventas en Internet gracias al SEO y el posicionamiento orgánico.
¿Hablamos?

Latest posts by Rafa Labrador (see all)

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0

2 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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