HTML5 desde cero: diferencia entre div, section y article

Подписаться 24 тыс.

Просмотров 14 тыс.

50% 1

En este vídeo respondo con ejemplos a una duda muy común cuando estamos aprendiendo HTML5, la diferencia entre las etiquetas div, section y article.
Además, te dejo ejemplo de cómo y cuándo usar cada una, así como un ejemplo de cómo usar todas a la vez.
Como siempre, cualquier feedback es bienvenido, así que no olvides dejar tu comentario y suscribirte para más Programación en español.
¡Que tengas buen código!
Contenido del vídeo:
▬▬▬▬▬▬▬▬▬▬
00:00 - Introducción
00:20 - Contexto y semántica en etiquetas HTML
01:48 - Etiqueta div
03:05 - Etiqueta section
05:00 - Etiqueta article
06:57 - Cómo y cuándo usarlas todas (ejemplo)
10:24 - Despedida
Referencias útiles:
▬▬▬▬▬▬▬▬▬▬
- Estándar HTML5: html.spec.whatwg.org/multipage/
Redes de Programación en Español:
▬▬▬▬▬▬▬▬▬▬
- Ve todas mis redes aquí: my.bio/prog-es

Опубликовано:

10 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@webpagedesigns4536 Год назад

Muchas gracias amigo, me a sido de gran ayuda para comprender esto, he comenzado con esto de diseño de paginas web porque en la escuela me la daban, lamentablemente solo fue un semestre. ya aprendí HTML y ahora estoy aprendiendo CSS, luego aprenderé JAVA

@programacion-es Год назад

Me alegra un montón que te haya sido útil, un saludo y que tengas buen código!

@ivanfarinas862 Год назад

muchas gracias por tomarte el tiempo de explicar estos conceptos tan básicos, teniéndonos en cuenta a los nuevos!

@programacion-es Год назад

Para eso estamos! =) Muchas gracias a ti por comentar

@nickypalacios2405 2 года назад

Muchas Gracias, por tu explicación, e empezado con html, css y js, me a sido de gran ayuda.

@programacion-es 2 года назад

Muchas gracias a ti por el feedback, un saludo y que tengas buen código! 👨‍💻

@Josan719 2 года назад

Muchas gracias por la explicación, tenia dudas sobre las diferencias, los ejemplos han sido de mucha ayuda.

@programacion-es 2 года назад

Muchas gracias por tu comentario, me alegra que te haya sido útil, un saludo y que tengas buen código!

@delak115 2 года назад

Muchas gracias por la información y bien explicado.

@programacion-es 2 года назад

Muchas gracias por comentar! Un saludo y que tengas buen código!

@distopiamonocronica8768 Год назад

Gracias compadre, la mejor explicación que he visto hasta ahora.

@programacion-es Год назад

Muchas gracias a ti por comentar! Un saludo y que tengas buen código!

@williamjaimesj.1366 7 месяцев назад

Excelente explicación, muy agradecido

@programacion-es 7 месяцев назад

Gracias a ti por comentar, un saludo y que tengas buen código 😎👨‍💻🤘

@luher7 Год назад

Muy bien explicado y mostrado

@programacion-es Год назад

¡Muchas gracias!

@alejandroflores6769 Год назад

Gracias por la explicación.

@programacion-es Год назад

¡Gracias a ti por comentar! Me alegra que te haya sido útil =)

@reaperking537 Год назад

Muy buena explicacion, sigue asi.👍

@programacion-es Год назад

Muchas gracias! Un saludo y que tengas buen código!

@LuSlower 2 года назад

Te la rifaste hermano, la verdad no sabía diferenciar estas etiquetas para separar contenido ( DIV, SECTION, ARTICLE), pero con tu explicación me quedo muy clara, gracias

@programacion-es 2 года назад

Muchas gracias por tu comentario! Me alegra que te haya sido útil el video, un saludo y que tengas buen código!

@MrMartinezDev 2 года назад

Que buena explicación 👍🏽

@programacion-es 2 года назад

Me alegra que te haya gustado, muchas gracias por comentar! Un saludo y que tengas buen código!

@Ruben13xD 2 года назад

Excelente explicación

@programacion-es 2 года назад

Muchas gracias por tu comentario, me alegra que te haya sido útil, un saludo y que tengas buen código!

@Mundo-Resumen Год назад

muy buen contenido Hombre me sirvio de mucho

@programacion-es Год назад

¡Muchas gracias por tu comentario, me alegra un montón que te haya sido útil, un saludo y que tengas buen código!

@jamesgc8646 2 года назад

Que buenos videos

@programacion-es 2 года назад

Muchas gracias! Un saludo y que tengas buen código!

@programacion-es 2 года назад

Muchas gracias! Un saludo y que tengas buen código!

@jaquematematicas3391 2 года назад

👍👍👍👏👏👏

@CALVOJOSEPY13 2 года назад

Crack

@programacion-es 2 года назад

Muchas gracias por comentar, me alegra que te haya sido útil, un saludo y que tengas buen código!

@ErikTory Год назад

Vale...!!!

@programacion-es Год назад

xD creo que ya he mejorado lo de la muletilla en vídeos actuales ajksdhasjhdajksda

@juansebastian8647 Год назад

Gracias por el tutorial, una duda como ingresas el codigo dentro del div automaticamente y queda con identación?

@programacion-es Год назад

¡Hola! Con la extensión Prettier, la configuras para formatear tu código al guardar el archivo =)

@juansebastian8647 Год назад

@@programacion-es Gracias :)

@spake8999 Год назад

Hola amigo excelente explicacion, pero deberias enseñarlo como queda en la pagina tmb para entederlo mas rapido

@programacion-es Год назад

Hola! A nivel visual no hay diferencia, por eso la explicación para poder diferenciar las etiquetas a nivel semántico y cuándo usarlas =)

@retsagdw603 Год назад

En conclusion, estas etiquetas tienen distinta utilidad y su unica diferencia es el nombre, podria usar un div para lo mismo que un section o un article, simplemente no se hace porque es mas ordenado hacerlo con las etiquetas recomendadas para hacrlo, pero el resultado no cambia?

@programacion-es Год назад

Si y no, en efecto, las tres actúan como contenedores, divs en versiones anteriores, sin embargo, su uso sí que tiene peso semántico para temas de accesibilidad, SEO y estructura del contenido, a nivel funcional, por llamarlo de alguna manera, son contenedores, a nivel semántico, cada uno tiene su uso y su contexto para mejorar la legibilidad de la web en base a su estructura =)

@0szkr Год назад

Excelente explicación, solo si puedes evitar decir tanto vale porque si distrae😅

@programacion-es Год назад

XD lo he corregido en videos más recientes, pero igual lo tengo presente, muchas gracias por el feedback =)

@chungachunga1268 2 года назад

en lo personal me gustaria que le dieras al F5 tras cada expilcacion para entender un poco mejor como funcionan

@programacion-es 2 года назад

En este caso la diferencia entre los 3 contenedores es más semántica que visual, por eso me centré en la diferencia de uso más que en resultado visual dado que este no varía, pero lo tendré en cuenta para próximos ejercicios, muchas gracias por comentar Un saludo y que tengas buen código!

@luliusripa Год назад

hermano se que tu explicación es buena por el feedback que veo, pero llevo viendo varios videos y logro entender para que sirven, pero en el momento de la practica siento que las uso mal. Apenas llevo 2 días aprendiendo de desarrollo web y no se si seguir avanzando más adelante lo lograre comprender mejor, porque me estoy quedando aqui.

@programacion-es Год назад

¡Hola! Un par de cosas, si no estás seguro si las estás usando bien, mírate el vídeo de cómo validar tus documentos HTML, ahí muestro una web y extensión para validar la estructura y uso de las etiquetas. Otra cosa, me comentas que llevas dos días, calma, es normal que tengas dudas, pero ten paciencia porque no es algo que se domine en un par de semanas o un mes, la práctica y el aprendizaje debe ser constante para siempre ir mejorando, ánimo. ¡Un saludo y que tengas buen código!

@luliusripa Год назад

@@programacion-es si he validado el código y no me sale ningún error, creo era la idea que tenía yo de estarías usando mal. Igualmente muchas gracias por apoyar a los que recién están empezando 🙌

@arturobacs7742 Год назад

GG ME MAREE XD

@programacion-es Год назад

@Eperezmosqueda Год назад

Ya he visto 3 videos de diferente autor donde tienen una ligera obsesión con la palabra "vale"

@programacion-es Год назад

xD en los últimos vídeos de hace un tiempo para acá he tratado de controlarlo un poco más asjdhasjdhaksjdhasd

@juancarlosramirezleon9750 10 месяцев назад

Muy buena explicacion pero el video pudo haber durado la mitad si solo hubieras dicho cuanto mucho tres veces "vale". Lo repites exageradamente y pierdes oratoria.

@programacion-es 10 месяцев назад

Mil gracias por el feedback, en efecto, me he dado cuenta de esto y lo he tratado de corregir en los vídeos más recientes =) Un saludo!