Veo que se utiliza “div” para hacer contenedores pero también para hacer secciones en una pagina web. Entonces, es mas recomendado usar &...

Jorge Augusto Mora Arias

Jorge Augusto Mora Arias

EstudiantePregunta

Veo que se utiliza “div” para hacer contenedores pero también para hacer secciones en una pagina web. Entonces, es mas recomendado usar <div> o recomiendan usar <section>?

2 respuestas
    Jose David Nuñez Procchio

    Jose David Nuñez Procchio

    Estudiante

    Te cuento la principal diferencia si basa en su significado semántico, sirve para ayudar al SEO (posicionamiento en los buscadores).

    En cuanto a propiedades, funcionan casi 100% igual, ambos son elementos de bloque y no tienen ninguna diferencia. Pero sirve para hacer mucho mas optimo la diferenciación de secciones dentro de tu sitio.

    Antiguamente una sección de artículos se hubiera codeado de la siguiente manera:

    <div class="productos"> <div class="producto">
    <!-- Aqui iria el codigo de cada uno de tus productos -->
    </div> </div> Como se puede notar esta todo separado por div's. Si los cambiamos por la nuevas etiquetas semánticas que nos provee HTML5 quedaría algo así: <section class="productos"> <article class="producto">
    <!-- Aqui el codigo de tu producto --> </article>
    </section> Realmente tiene mucho mas sentido semántico, y tiene exactamente las mismas propiedades que el antiguo <div>.

    Existen otras etiquetas semánticas como <aside>, <em>, <strong>, <main>, etc...

    Espero haberte ayudado.

    Giuseppe Ramirez

    Giuseppe Ramirez

    Estudiante

    Hola, Jorge. Quiero darte un complemento a la buena explicación que te han dado, los

    <div>
    con contenedores generales, es decir, para realizar dibujos en CSS, contener elementos no semánticos, o simplemente utilizar espacios en tu layout funciona de maravilla. Pero para contenedores específicos que por ejemplo tengan una imagen o un texto, etc. Si es recomendable
    <section>
    en este caso solo para elementos explicativos el profesor usa
    <div>
    , pero intenta usar elementos específicos para construir tus proyectos. :D

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.