{"id":9750,"date":"2022-06-28T11:10:44","date_gmt":"2022-06-28T09:10:44","guid":{"rendered":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/?p=9750"},"modified":"2022-06-25T12:23:44","modified_gmt":"2022-06-25T10:23:44","slug":"que-es-la-etiqueta-div-en-html-usos-y-ejemplos","status":"publish","type":"post","link":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/que-es-la-etiqueta-div-en-html-usos-y-ejemplos\/","title":{"rendered":"\u00bfQu\u00e9 es la etiqueta div en HTML? Usos y ejemplos"},"content":{"rendered":"
\"\"<\/a><\/div>

Puedes pensar en una p\u00e1gina web en tres partes principales: tienes el encabezado y el pie de p\u00e1gina y, en el medio, el cuerpo principal. Pero al mirar cualquier p\u00e1gina web, puedes ver que el cuerpo tambi\u00e9n est\u00e1 formado por secciones. Es probable que haya una secci\u00f3n para productos y servicios, testimonios, miembros del equipo, informaci\u00f3n de contacto y m\u00e1s.<\/p>\n

Cada una de estas secciones probablemente se ve un poco diferente. Tal vez tengan diferentes colores y fuentes. Tal vez uno tenga un fondo de paralaje y el otro tenga un fondo de video. Tal vez uno est\u00e9 formado por m\u00faltiples filas y columnas, y as\u00ed sucesivamente.<\/p>\n

Esta variaci\u00f3n en el estilo es posible debido al elemento de divisi\u00f3n de contenido en HTML. Mejor conocido como \u00abdiv HTML\u00bb, este elemento puede dividir tu p\u00e1gina web en secciones para que puedas darles propiedades CSS \u00fanicas.<\/p>\n

En esta publicaci\u00f3n, veremos m\u00e1s de cerca qu\u00e9 es este elemento, qu\u00e9 hace exactamente y por qu\u00e9 querr\u00edas usarlo en tu propio sitio.<\/p>\n

\u00bfQu\u00e9 es la etiqueta <div> en HTML?<\/h2>\n

En HTML, la etiqueta <div> es un contenedor gen\u00e9rico de bloque para otros elementos. Es \u00abgen\u00e9rico\u00bb porque no describe el contenido que contiene.<\/p>\n

Otros elementos como <nav>, <header>, <footer> y <form> describen el contenido que contienen y se conocen como elementos HTML sem\u00e1nticos. Siempre debes usar un elemento sem\u00e1ntico sobre un div cuando sea posible, ya que esto hace que tu c\u00f3digo sea m\u00e1s accesible y m\u00e1s f\u00e1cil de mantener.<\/p>\n

En segundo lugar, un div es un contenedor de bloque. Para entender lo que eso significa,\u00a0comparemos un div con un elemento span, que es un contenedor en l\u00ednea.<\/p>\n

Hay varias diferencias clave entre un elemento de bloque y un contenedor en l\u00ednea. Por ejemplo, un div siempre comienza en su propia l\u00ednea, mientras que un span permanece en la misma l\u00ednea. Un div tambi\u00e9n ocupa todo el ancho de la p\u00e1gina y un span no.\u00a0Eso significa que si tienes varios div\u00a0seguidos, aparecer\u00e1n apilados uno encima del otro en el front-end.<\/strong>\u00a0Los span, por otro lado, pueden existir uno al lado del otro. La \u00faltima gran diferencia es que puedes definir la altura y el ancho de un div, pero no puedes hacerlo para un span.<\/p>\n

En tercer lugar, los elementos que pueden estar contenidos en un div se conocen m\u00e1s espec\u00edficamente como \u00abcontenido palpable\u00bb o \u00abcontenido de flujo\u00bb. El contenido palpable es b\u00e1sicamente cualquier elemento HTML que contiene texto o contenido incrustado, y el contenido de flujo es b\u00e1sicamente cualquier elemento utilizado en el cuerpo de los documentos HTML. Por lo tanto, los elementos de anclaje, cita en bloque, audio, imagen, p\u00e1rrafo y encabezado se consideran contenido palpable o fluido, y se pueden agregar dentro de un div.<\/p>\n

\u00bfD\u00f3nde aparece una etiqueta <div> en HTML?<\/h3>\n

Los div\u00a0van en la secci\u00f3n del cuerpo de un archivo HTML. Esto est\u00e1 claramente marcado por etiquetas <body><\/body> en un archivo HTML. (Nota: estas etiquetas a menudo se omiten en los editores de c\u00f3digo, como\u00a0CodePen<\/a>).<\/p>\n

Para crear un elemento div,\u00a0debes usar una etiqueta de apertura y cierre<\/strong>. Puedes agregar los elementos que deseas agrupar dentro de estas etiquetas. A menudo, estos aparecer\u00e1n sangrados, como se muestra a continuaci\u00f3n.<\/p>\n

<div<\/span> class<\/span>=\u00abmyDiv\u00bb<\/span>><\/span><\/p>\n

<h2<\/span>><\/span>This is a heading in a div element<\/h2<\/span>><\/span><\/p>\n

<p<\/span>><\/span>This is some text in a div element.<\/p<\/span>><\/span><\/p>\n

<\/div<\/span>><\/span><\/p>\n

Ahora que entendemos la definici\u00f3n y la sintaxis del elemento div en HTML, echemos un vistazo m\u00e1s de cerca a lo que hace exactamente.<\/p>\n

\n

<\/p>\n

[wp-rss-aggregator template=\u00bbDefault\u00bb]<\/p>\n

\n

\u00bfQu\u00e9 hace la etiqueta div en HTML?<\/h2>\n

La etiqueta <div> puede ayudar a organizar un archivo HTML en secciones en el back-end, pero eso no afectar\u00e1 c\u00f3mo se muestran esas secciones en el front-end. No obstante, permite dise\u00f1ar f\u00e1cilmente estas secciones con CSS.<\/p>\n

Para dise\u00f1ar estas secciones con CSS, debes agregar un atributo de clase o ID al elemento div. Luego, utilizar\u00e1s un selector de CSS para aplicar propiedades de estilo \u00fanicas a los elementos contenidos en el div.<\/p>\n

Ahora que sabes que un elemento div no hace nada por s\u00ed solo, es posible que te preguntes por qu\u00e9 usar uno. Veremos algunos casos de uso a continuaci\u00f3n.<\/p>\n

\u00bfPara qu\u00e9 usar la etiqueta div en HTML?<\/h2>\n

Por lo general, se utiliza el elemento div para agrupar secciones de c\u00f3digo que deseas orientar con CSS. Puedes dise\u00f1arlos para que se vean diferentes de otras secciones de la p\u00e1gina o para colocarlos de manera diferente. Tambi\u00e9n puedes usar un atributo div y de idioma para cambiar el idioma de una secci\u00f3n particular de la p\u00e1gina.<\/p>\n

A continuaci\u00f3n, echemos un vistazo m\u00e1s de cerca a estos casos de uso.<\/p>\n

\n

<\/p>\n

[wp-rss-aggregator template=\u00bbDefault\u00bb]<\/p>\n

\n

Ejemplos de uso de las etiquetas <div><\/h3>\n

La etiqueta <div> se usa mejor para agregar estilo o para marcar la sem\u00e1ntica com\u00fan a un grupo de elementos consecutivos. Estos son algunos ejemplos de estilos o sem\u00e1nticas que puedes agregar con el elemento div.<\/p>\n

1. Etiqueta <div> con atributo lang<\/strong><\/h4>\n

Comencemos con el ejemplo m\u00e1s f\u00e1cil. Digamos que el idioma predeterminado del texto en una p\u00e1gina web es el ingl\u00e9s, pero una secci\u00f3n est\u00e1 en otro idioma. Para marcar esta secci\u00f3n en particular en una p\u00e1gina web, simplemente pon los elementos dentro de un div. Luego, agrega un atributo de idioma y config\u00faralo en el idioma que desees. Mira este ejemplo en espa\u00f1ol y franc\u00e9s:<\/p>\n

<article<\/span> lang<\/span>=\u00aben\u00bb<\/span>><\/span><\/p>\n

<p<\/span>><\/span>The default language of the web page is in English. But below is a sentence in French, which is marked accordingly in the code.<\/p<\/span>><\/span><\/p>\n

<div<\/span> lang<\/span>=\u00abfr\u00bb<\/span>><\/span><\/p>\n

<p<\/span>><\/span>Dans le num\u00e9ro de novembre de Marie Claire, une erreur s’est gliss\u00e9e dans la rubrique Mode Actualit\u00e9s.<\/p<\/span>><\/span><\/p>\n

<\/div<\/span>><\/span><\/p>\n

<p<\/span>><\/span>This is some text in English outside the div element. <\/p<\/span>><\/span><\/p>\n

<\/article<\/span>><\/span><\/p>\n

Esto establecer\u00eda el idioma del encabezado y el p\u00e1rrafo dentro del div a la vez, por lo que no tienes que establecer el idioma de cada elemento por separado. Los elementos fuera del div permanecer\u00edan establecidos en el idioma predeterminado (espa\u00f1ol).<\/p>\n

Ahora veamos un ejemplo de cu\u00e1ndo usar\u00edas un div para cambiar la apariencia de una secci\u00f3n de tu p\u00e1gina web.<\/p>\n

2. Etiqueta <div> con atributo de clase<\/strong><\/h4>\n

Para cambiar el estilo del div, comenzar\u00e1s de la misma manera en que lo hiciste anteriormente, pero en lugar de agregar un atributo de idioma, agregar\u00e1s un atributo de ID o clase. Luego usar\u00e1s el selector correspondiente para agregar el CSS que quieras.<\/p>\n

Supongamos que deseas dise\u00f1ar un t\u00edtulo y un p\u00e1rrafo en particular en la p\u00e1gina y dejar el resto sin estilo. Entonces,\u00a0envolver\u00edas el encabezado y el p\u00e1rrafo individuales en un elemento div y le dar\u00edas un nombre de clase<\/strong>. Por el bien de esta demostraci\u00f3n, usaremos \u00abmiDiv\u00bb como el nombre de la clase.<\/p>\n

Aqu\u00ed est\u00e1 el HTML:<\/p>\n

<div<\/span> class<\/span>=\u00abmyDiv\u00bb<\/span>><\/span><\/p>\n

<h2<\/span>><\/span>This is a heading in a div element<\/h2<\/span>><\/span><\/p>\n

<p<\/span>><\/span>This is some text in a div element.<\/p<\/span>><\/span><\/p>\n

<\/div<\/span>><\/span><\/p>\n

<p<\/span>><\/span>This is some text outside the div element.<\/p<\/span>><\/span><\/p>\n

Luego, en la secci\u00f3n principal de tu documento HTML o en una hoja de estilo externa, puedes usar el selector de clase .miDiv y definir las propiedades CSS que desees. Para esta demostraci\u00f3n, usaremos las propiedades de borde, color de fondo, alineaci\u00f3n de texto y color.<\/p>\n

Aqu\u00ed est\u00e1 el CSS:<\/p>\n

.myDiv<\/span> {<\/p>\n

font-family<\/span>: ‘Avenir Next LT Pro’<\/span>;<\/p>\n

font-weight<\/span>: bold;<\/p>\n

border<\/span>: 5px<\/span> outset #00A4BD<\/span>;<\/p>\n

color<\/span>: #2D3E50<\/span>;<\/p>\n

background-color<\/span>: #EAF0F6<\/span>;<\/p>\n

text-align<\/span>: center;<\/p>\n

}<\/p>\n

3. Etiqueta <div> como flexbox<\/strong><\/h4>\n

Ahora veamos un ejemplo de cu\u00e1ndo usar\u00edas la etiqueta\u00a0div para cambiar el posicionamiento o el dise\u00f1o de una secci\u00f3n de tu p\u00e1gina web.<\/p>\n

Digamos que\u00a0quieres crear una cuadr\u00edcula de caja flexible con siete columnas. Comenzar\u00edas creando siete elementos div y luego posicion\u00e1ndolos dentro de otro elemento div. Agregar\u00edas la clase\u00a0.flex-container\u00a0<\/strong>a esta divisi\u00f3n principal.<\/p>\n

Aqu\u00ed est\u00e1 el HTML:<\/p>\n

<body<\/span>><\/span><\/p>\n

<h1<\/span>><\/span>Flexbox Container<\/h1<\/span>><\/span><\/p>\n

<p<\/span>><\/span>Notice how the flex items shrink and expand as the browser is resized, but do not fill the entire container once the viewport exands beyond a particular point.<\/p<\/span>><\/span><\/p>\n

<div<\/span> class<\/span>=\u00abflex-container\u00bb<\/span>><\/span><\/p>\n

<div<\/span>><\/span>1<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>2<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>3<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>4<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>5<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>6<\/div<\/span>><\/span><\/p>\n

<div<\/span>><\/span>7<\/div<\/span>><\/span><\/p>\n

<\/div<\/span>><\/span><\/p>\n

<\/body<\/span>><\/span><\/p>\n

Luego, en la secci\u00f3n de encabezado del\u00a0documento o en una hoja de estilo externa,\u00a0usar\u00edas el selector de clase .flex-container para hacer que el contenedor sea flexible<\/strong>. Despu\u00e9s de establecer la propiedad de visualizaci\u00f3n como flexible, especificar\u00edas la altura del contenedor y el color de fondo. Para dise\u00f1ar los elementos flexibles dentro del contenedor, usar\u00edas el selector\u00a0.flex-container\u00a0<\/strong>>\u00a0div<\/strong>.<\/p>\n

Aqu\u00ed est\u00e1 el CSS:<\/p>\n

.flex-container<\/span> {<\/p>\n

display<\/span>: flex;<\/p>\n

height<\/span>: 200px<\/span>;<\/p>\n

background-color<\/span>: #00A4BD<\/span>;<\/p>\n

}<\/p>\n

.flex-container<\/span> > div<\/span> {<\/p>\n

background-color<\/span>: #EAF0F6<\/span>;<\/p>\n

width<\/span>: 90px<\/span>;<\/p>\n

margin<\/span>: 10px<\/span>;<\/p>\n

text-align<\/span>: center;<\/p>\n

line-height<\/span>: 50px<\/span>;<\/p>\n

font-size<\/span>: 60px<\/span>;<\/p>\n

flex<\/span>: 1<\/span> 1<\/span> 200px<\/span>;<\/p>\n

}<\/p>\n

Los div\u00a0son uno de los elementos m\u00e1s utilizados en HTML. Si bien tiene m\u00faltiples prop\u00f3sitos,\u00a0el principal es agrupar elementos HTML para que puedas dise\u00f1arlos con CSS<\/strong>. Esto hace que el elemento div sea fundamental para personalizar tu sitio web para que se vea exactamente como lo deseas. La mejor parte es que es f\u00e1cil de usar.<\/p>\n

Maria Coppola<\/a><\/p>\n

\"LucusHost,<\/a><\/div>","protected":false},"excerpt":{"rendered":"

Puedes pensar en una p\u00e1gina web en tres partes principales: tienes el encabezado y el pie de p\u00e1gina y, en el medio, el cuerpo principal. Pero al mirar cualquier p\u00e1gina… <\/p>\n","protected":false},"author":1,"featured_media":5047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[20,19,24],"class_list":["post-9750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teletrabajo","tag-fuprisa","tag-jose-manuel-fuentes-prieto","tag-recursos-para-redactores"],"nelio_content":{"autoShareEndMode":"never","automationSources":{"useCustomSentences":false,"customSentences":[]},"efiAlt":"","efiUrl":"","followers":[1],"highlights":[],"isAutoShareEnabled":true,"networkImageIds":[],"permalinkQueryArgs":[],"series":[],"suggestedReferences":[]},"jetpack_featured_media_url":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2021\/07\/teletrabajando.jpg","_links":{"self":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/comments?post=9750"}],"version-history":[{"count":1,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9750\/revisions"}],"predecessor-version":[{"id":9751,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9750\/revisions\/9751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/media\/5047"}],"wp:attachment":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/media?parent=9750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/categories?post=9750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/tags?post=9750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}