3

el motivo de la pregunta es que al intentar habituarme a etiquetar de forma correcta semanticamente y seguir las buenas practicas para la maquetación HTML y Css, siempre tengo dudas con la etiqueta "section", no tanto por cuando usarlo ya que de esto hay muchos articulos y ya tengo claro que es para agrupar contenidos relacionados entre si mientras que si es para elementos independientes es más correcto usar un "Article" por ejemplo o si es un elemento puramente estetico un Div.

Pero es precisamente esta última parte la que me confunde, entiendo que para por ejemplo que para contener un span y darle forma bonita o cosas similares, se usa div y ya esta, pero empiezo a tener dudas con cosas como el ejemplo que he puesto en el titulo, de acuerdo para cosas solo visuales div, ¿pero y para temas de estructura del formato? por ejemplo display:flex, los anchos de columna ya sea con flex-grow o width, etc, ¿y si es para una parte visual y otra de estructura? por ejemplo tengo 2 articulos quiero ponerlos en un display flex y que tengan un fondo azul.

<section class="estructura_articulos">
 <article>
... diferentes partes del article que puede tener sus sections también
 </article>
</section>

.estructura_articulos{
display:flex;
background-color: blue;
}

¿Es correcto según las buenas practicas o no?, ¿o debería meter dentro del section un div para hacer esto o para por ejemplo el fondo pero no para el display:flex?.

Nota: Respecto a esto he buscado previamente dudas sobre los section pero solo he encontrado como centrarlos, colocarlos, se ven mal etc, pero nada sobre las buenas practicas, de ahí que abra esta pregunta, también he visto muchos otros articulos en ingles pero casi todos se centran en cuando se deben usar y no en lo que busco que es no si se puede o no ponerle un estilo css eso obviamente como a cualquier otra etiqueta, es si es correcto según las buenas practicas/ guias de estilo.

3
  • 1
    ¿Porqué piensas que darle estilo a un tag section puede ser una mala práctica? Si aplicamos la lógica que parece que te hace creer esto, entonces darle estilo al tag body también sería una mala práctica. De lo que entiendo del planteamiento de tu duda, crees que los estilos no deberían aplicarse a un tag de tipo section sino a un contenedor hijo. Creo que la mala práctica allí sería añadir mayor complejidad al DOM con un elemento que puede ser totalmente innecesario (serviría solamente para aplicar un estilo). ¿Es esa tu duda? Saludos Commented el 18 sept. 2021 a las 19:22
  • El motivo por el que empece a pensarlo, es por ejemplo al ver paginas como esta css-tricks.com/how-to-section-your-html/… "<div> has no semantic meaning, so it is quite useful whenever we are altering the HTML purely for the sake of styling purposes" Esto me da a entender que si solo va a ser para modificar el estilo deberiamos usar div, y a partir de ahí empezo mi duda de bueno, ¿donde esta el limite de esta afirmación?, ¿implica que el section no "debería" contener nada de estilo o hasta cuanto puede tener?. Commented el 18 sept. 2021 a las 22:15
  • Aunque entiendo que a lo mejor se refiere solamente a cuando debemos usar div y cuando section y no a oye un section no puede tener estilo, pero como me dejo en duda pues por eso la pregunta Commented el 18 sept. 2021 a las 22:17

1 respuesta 1

2

Mira, para responder sucintamente a tu pregunta: el CSS jamás va a afectar a la corrección semántica del HTML, porque cumplen funciones independientes.

El HTML semántico lo que pretende es ayudar al navegador a comprender el documento y la función de cada uno de sus elementos.

Por ejemplo, si usas la etiqueta nav para hacer un menú de navegación, los robots comprenderán de inmediato su función porque tú mismo se lo indicas en el marcado HTML.

Si, por contra, usaras un div, el navegador podría llegar a comprenderlo igual, pero tendría que computar el contexto para ello. La cantidad y tipo de elementos que contuviera, su ubicación, su estructura, o la interacción de los usuarios con él. Todo eso haría que al final entendiera el tipo de elemento que es, pero si, de entrada, lo hubieras etiquetado como un nav, le hubiera resultado más fácil.

El CSS, por su parte, es pura estética, no interviene lo más mínimo en la estructura semántica del HTML ni en su comprensión. Interviene en otros factores importantes, como la Usabilidad móvil o la Experiencia de la página, que podrían llegar a afectar al SEO de tu web, pero no en la semántica del HTML.

Por lo tanto, siempre podrás aplicar todo el CSS que desees a cualquier etiqueta HTML que te plazca.

Con respecto a la diferencia entre un section y un div, es sencillamente que el section tiene una identidad semántica y el div no. Es decir, que el section hay que utilizarlo para cumplir la función que ya tiene asignada, mientras que el div se puede utilizar para cualquier cosa, porque no tiene ningún rol predefinido.

Un section se utiliza para delimitar piezas concretas del documento. Secciones, como su propio nombre indica. Por simplificar, diremos que sirve para indicar al navegador en qué parte de un mismo documento te encuentras. Tomando como ejemplo un blog, podría utilizarse así:

<article>

    <section id="intro">
      <h1>Título del post</h1>
      <div>Contenido de la introducción.</div>
    </section>

    <section id="contenido">
      <h2>Cuerpo de texto</h2>
      <div>Contenido del cuerpo de texto.</div>
    </section>

    <section id="posts-relacionados">
      <h2>Posts relacionados</h2>
      <div>Widget de posts relacionados.</div>
    </section>

</article>

Como ves, el article se emplearía para envolver todo el post, mientras que los sections sirven para delimitar las secciones generales de cada artículo. Eso ayuda a los robots a orientarse en el contenido de tu documento.

Por su parte, los div pueden utilizarse para envolver cualquier cosa porque, como hemos dicho, no tiene una identidad semántica. Digamos que es el elemento-bloque comodín del HTML (su equivalente como elemento-inline sería el span).

Si quisiéramos asignarle una semántica HTML concreta, podríamos con atributos ARIA como role="". Por ejemplo, <div role="button"></div>, pese a ser un div, es reconocido por el navegador como un botón gracias al role="button" que le hemos asignado.

Cabe recalcar que, semánticamente, sería igual de correcto usar <button></button> que <div role="button"></div>, ya que en ambos casos se está dando la información semántica al navegador.

1
  • 1
    Muchas gracias por la información, siempre me habian dicho que intentara escribir correctamente la semantica de una pagina etc pero nunca porque y ahora por fin se la respuesta. Commented el 20 sept. 2021 a las 8:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.