Contenedor div HTML - ¿Qué es y para qué sirve? Ejemplo de uso

Organizar las cajas en HTML
El tags div no tienen ningún significado especial, sólo se define como un elemento bloque, pero ayuda significativamente a estructurar la maquetación de un sitio Web.
Más información:
disenowebakus....

[@ugustokgp0404]

Poco a poco me estoy metiendo en este tema de la estructura de html y sus demás componetes. Gracias por la explicación profe Hugo

[@akusnet]

Por nada Kurman, es un gusto ayudarlos, cuídate, saludos!

[@kenetmontes3152]

Me gustó mucho la forma en la que lo explicas, esta vale oro nuevo sub ❤🤩

[@akusnet]

Gracias Kanet, saludos!

[@lucianobarili8187]

Gracias hermano. Super clara tu forma de explicar. Voy a seguir viendo el resto de tus videos. Un abrazo.

[@akusnet]

Gracias a ti Luciano por tus comentarios, saludos!

[@creanimex]

Gracias amigo !!! Explicas mucho muy bien !!! Ahora si entendí bien todito :D

[@akusnet]

Por nada Humberto, que bueno que lo comprendiste, saludos!

[@user-mc2gi8km8l]

Gracias por el video! agradezco mucho la explicación, un abrazo

[@akusnet]

Por nada amigo, que bueno que te gustó el video, saludos!

[@leonidsan]

Gracias Hugo, me fue de mucha ayuda tu video!!!!!

[@akusnet]

Por nada Cristian, que bueno que te fue útil.

[@lurichdesigner]

Que locooo .... Eres un bravooo

[@leticiafunes1306]

Muchas Gracias!!

[@akusnet]

Por nada Leti, saludos!

[@sofiamora7520]

Le entiendo más a usted que a mi profe😁😁 Gracias por el video

[@akusnet]

Gracias Sofía, pero estoy seguro tu Maestro hace su mejor esfuerzo, se paciente con él. Saludos!

[@marcoantoniovalencia8694]

@@akusnet no que sería más recomendable usar etiquetas como nav, section y demás?

[@akusnet]

Hola Marco, cómo estás. Sí claro, siempre y cuando sea posible. Lo ideal es utilizar las etiquetas semánticas de HTML5, tal como lo explico en el minuto 1:25. Te comparto un video donde hago la maquetación de un sitio combinando etiquetas modernas: kzbin.info/www/bejne/nKK6knVnYpiSq9U Saludos!

[@Eruluks]

Gracias por el video. Me sirvió mucho, saludos

[@akusnet]

Me da gusto que te fuera útil, saludos!

[@elprofepastor7829]

Buen video. Saludos.

[@urmec5128]

Hola Buen dia o Noche Estoy Vuelto Loco con este show pero me gusta. Entiendo ya algunos puntos tanto de HTML COMO CCS Mi cuestion es la siguiente veo que en algunos casos se utiliza div y otras no, Menncionas que las etiquetas DIV han sido sustituidas por nuevas como header, asside footer etc entonces al ser sutituidas no es necesario ponerlas en HTML al ya ser sustituidas por las ya mencionadas? Gracias por Tu atencion Excelentes videos.

[@akusnet]

Hola Urmec, buenos días. Muchas gracias por tus comentarios, me da gusto que te estén siendo útiles los videos. Hay un video que te puede ayudar mucho en la comprensión y uso de div y tags semánticos de HTML5, te comparto la URL: kzbin.info/www/bejne/nKK6knVnYpiSq9U Espero te sea de ayuda.

[@angelpuente]

Hola Hugo. Gracias por el vídeo. Una pregunta ¿cómo hacer para seguir poniendo contenido por debajo de los tres div? He replicado lo que explicas en el vídeo. Tengo los tres divs como los muestras en el vídeo. Pero ahora quiero poner una hr y seguir escribiendo en modo normal por debajo de eso tres divs y ocupando el 100% del ancho de la pantalla. Supongo que se puede hacer... Es que lo que escribo se coloca en el extremo derecho, al lado del poco espacio que queda a la derecha del contenedor barra. No hay forma de colocarlo debajo de los tres y que la hr con un ancho del 100% separe ambos espacios de contenido. Muchas gracias.

[@akusnet]

Hola Ángel, buen día. Sí, es posible. Aunque lo convencional es que el texto o contenido multimedia de encuentre dentro de las columnas divs. Se tiene que desactivar el efecto flotante para el último div y lo puedes lograr de la siguiente manera: .limpiar { clear:both; } texto sin efecto flotante La propiedad clear limpia el efecto flotante de la última columna. Una disculpa por la demora en responder, pero fue una semana complicada en el trabajo. Cuídate, saludos!

[@angelpuente]

@@akusnet ¡Muchas gracias! Estoy poniendo en práctica los contenidos de tus vídeos. Me viene muy bien esta ayuda.

[@saulpulidovilla6293]

Para agregar los cuadros se utiliza un programa externo, o el mismo sublime cuenta con la herramienta?

[@akusnet]

Hola Saul, gracias por preguntar. En el editor sublime text a base de código en HTML y CSS es que creamos los cuadros. Si bien, sublime es sólo un editor. También puede utilizar otros programas como Brackets, Atom, Dreamweaver, etc. para hacer el mismo ejercicio.

[@steveferrel3674]

@@akusnet y como?

[@steveferrel3674]

increible video

[@akusnet]

Gracias Steve

[@arielwellington3349]

una pregunta ¿Ya no es necesario usar los div? ¿Puedo simplemente maquetar mi pagina usando las nuevas etiquetas? Sinceramente se me dificulta llegar a comprender correctamente el uso de los divs y como estas nuevas etiquetas ya con su nombre se para que estan destinadas, se me hacen mas facil. saludos y excelente video

[@akusnet]

Hola Ariel, buen día. Se sigue utilizando el div porque no hay etiquetas semánticas suficientes para cada propósito en la web. Te comparto un video donde explico cómo maquetar una página web con etiquetas modernas en HTML5 y contenedores div: kzbin.info/www/bejne/nKK6knVnYpiSq9U Espero te sea de ayuda.

[@arielwellington3349]

@@akusnet Mil gracias por la respuesta! Saludos desde Argentina

[@akusnet]

Por nada Ariel, saludos a los amigos de Argentina!

[@yiro999]

Cuales son los contenedores que se usan aparte de div

[@akusnet]

Hola Gabriel, gracias por preguntar. Son las etiquetas de HTML5, como: entre otros para brindarle un significado semántico hacia los navegadores. Hoy en día todos los navegadores modernos tienen soporte a estas nuevas etiquetas y es recomendable combinarlos con el contenedor

[@haroldburke5255]

Gracias por el video , una pregunta , que método se utiliza para mover un elemento como ser una imagen hacia dentro de un contenedor sin drag and drop , sino más bien con solo hacer clic sobre la imagen? Saludos buen día

[@akusnet]

Hola Harold. El método más convencional para mover objetos en el navegador es drag and drop, pero también puedes apoyarte con el uso de canvas, te comparto un enlace con el ejemplo: jsfiddle.net/m1erickson/GHSG4/ Espero te sea de ayuda, saludos.

[@haroldburke5255]

@@akusnet Gracias por responder tan rápido estimado y fue de mucha utilidad pero solo una duda más , es posible que los elementos de un slider , por ejemplo de imágenes , puedan tener la propiedad draggable para que el slider tenga drag and drop? Muchas gracias de antemano

[@akusnet]

Sería algo así? codepen.io/kellyex/pen/KKwwdYg

[@haroldburke5255]

@@akusnet más que todo sería que del slider se puedan pasar imagenes a un contenedor externo como para un juego de vestir por ejemplo , o en que lenguaje se podría hacer eso sí me pudieras orientar por favor , te lo agradecería

[@fernandopastor8946]

Buenas tardes profe, una consulta; he oído que no es recomendable utilizar las medidas en px ya que eso complica a la hora del responsive design.. Lo mismo con utilizar height... Que se puede utilizar mejor vw o vh.. Qué le parece? Muchas gracias!

[@akusnet]

Hola Fernando, buen día, cómo estás. Gracias por preguntar. Lo ideal es utilizar px sólo en casos necesario, para los contenedores debe haber flexibilidad ante distintas resoluciones de pantalla a través de unidades escalables. En el ejercicio que utilizo, es sólo para la demostración y uso del contenedor div. Te comparto un video donde explicamos el Diseño Responsivo: kzbin.info/www/bejne/qZS3ZYl_j7WMgas Saludos!

[@fernandopastor8946]

Genial! Muchas gracias! Saludos desde Argentina!

[@renderfxs.a.c2760]

capo

[@akusnet]

:)

[@mariaanaalvarado5451]

Pero div se supone que no es semántico

[@akusnet]

Hola María, buen día. Gracias por tu comentario. En efecto, el tag div no es semántico por sí mismo y como lo explico en el minuto 1:36 poco a poco se va migrando a nuevas etiquetas modernas (y semánticas) de HTML5, como , , , , y Saludos!

[@mariaanaalvarado5451]

@@akusnet gracias x responder es que siempre e tenido esa confusión con los div al igual que con los id que usan como contenedor

[@akusnet]

Por nada María, estoy para ayudarlos.

[@federicoaldana5952]

No hay que abusar de los div, pero se siguen usando dentro de etiquetas semanticas, no le veo el problema.

[@tomyg3655]

Muy completo pero... 17 minutos para explicar un div no es demaciado ?

[@akusnet]

Hola Tomy, buen día. Muchas gracias por tu opinión, para mí es muy valiosa. Depende de cada persona, me parece que quien tenga las ganas de aprender se hará del tiempo necesario para estudiar y practicar. Saludos!