Meta tags:
description=Aprende a usar la etiqueta div para agrupar elementos HTML y aplicarles estilos con CSS. Atributos class, id, style y más. Con ejemplos.;

Headings (most frequently used words):

div, de, etiqueta, la, html, ejemplo, css, posicionamiento, con, vs, grid, flexbox, propiedad, float, márgenes, negativos, relativo, absoluto, bloques, definidos, por, sintaxis, elementos, semánticos, span, técnica, heredada, atributos, práctica, resultado,

Text of the page (most frequently used words):
div (121), html (81), #etiqueta (29), los (24), para (23), css (22), color (22), que (21), class (21), svg (19), una (18), title (18), style (17), elementos (16), con (16), aprender (15), grid (15), contenido (15), span (14), tag (14), background (14), this (13), body (13), content (13), head (13), the (13), ejemplo (13), línea (12), atributos (11), como (10), inside (10), las (10), posicionamiento (9), flexbox (9), bloques (9), bloque (9), some (9), etiquetas (9), canvas (9), float (8), dentro (8), html5 (8), copiar (8), width (8), list (8), item (8), main (8), layouts (8), márgenes (7), negativos (7), propiedad (7), más (7), 8ebf42 (7), doctype (7), elemento (7), nav (7), por (6), estilos (6), usa (6), position (6), mismo (6), paragraph (6), green (6), blue (6), container (6), agrupar (6), header (6), w3docs (5), práctica (5), scripts (5), pruébalo (5), 1faadb (5), document (5), del (5), columnas (5), footer (5), introducción (5), formatter (5), code (4), generator (4), herramientas (4), relativo (4), absoluto (4), semántico (4), texto (4), página (4), left (4), padding (4), border (4), height (4), margin (4), son (4), flex (4), cuando (4), filas (4), usar (4), caja (4), json (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), ejemplos (3), web (3), semánticos (3), definidos (3), dir (3), significado (3), principal (3), text (3), align (3), right (3), center (3), atributo (3), relative (3), hyperlink (3), href (3), auto (3), aplicar (3), forma (3), referencia (3), permite (3), otro (3), display (3), solo (3), contenedor (3), dos (3), template (3), 1fr (3), pero (3), and (3), divs (3), article (3), ver (3), string (3), tools (3), todos (2), desarrolladores (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), libros (2), fragmentos (2), técnica (2), heredada (2), sintaxis (2), page (2), inserta (2), cuál (2), función (2), está (2), lugar (2), tiene (2), accesible (2), data (2), globales (2), afecta (2), desplazamientos (2), peligro (2), top (2), absolute (2), 666 (2), solid (2), darkblue (2), pueden (2), mucho (2), este (2), floats (2), uno (2), entre (2), diferentes (2), tipos (2), incluyendo (2), etc (2), páginas (2), radius (2), use (2), necesitas (2), único (2), herramienta (2), adecuada (2), modernos (2), columns (2), construir (2), bidimensionales (2), técnicas (2), cada (2), mejor (2), diseño (2), colocar (2), pantalla (2), general (2), envolver (2), block (2), 1c87c9 (2), word (2), dar (2), estilo (2), comienza (2), nueva (2), ancho (2), disponible (2), listas (2), otros (2), ambas (2), propio (2), marcado (2), antes (2), section (2), after (2), before (2), genérica (2), párrafo (2), emplea (2), ningún (2), utiliza (2), aplicarles (2), accept (2), formularios (2), tutorial (2), imágenes (2), video (2), audio (2), url (2), http (2), iso (2), plantillas (2), hash (2), 2026, derechos, reservados, hecho, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, desde, 2014, next, previous, yes, was, helpful, comprobar, lleva, describe, contiene, envuelve, hace, vídeo, agrupa, pueda, recibir, unidad, establece, propiedades, específicos, usaba, alinear, soportado, obsoleto, justify, descripción, valor, propios, depende, frecuentemente, ser, estilizada, manipulada, hecha, también, admite, evento, aria, flujo, normal, menos, añadan, bottom, 400, quieres, posicionar, concreto, puedes, combinar, tanto, estáticos, flotantes, acercar, hacer, superpongan, truco, nicho, mayormente, heredado, nuevos, logran, mismos, solapamientos, predecible, mantiene, prefiere, información, resultado, overflow, aparezcan, lado, separados, nos, crear, barras, laterales, cuadrículas, varias, 200, 100, another, value, see, result, items, distribuir, largo, eje, fila, columna, sitios, basados, están, siendo, reemplazados, idea, detrás, controlar, alineación, orden, tamaño, dirección, crea, tres, iguales, seis, distribuyen, automáticamente, gap, moderna, estándar, decir, organizan, tiempo, defines, cuadrícula, describes, sus, pistas, luego, hijos, fluyen, hacia, celdas, según, objetivos, podemos, combinaciones, ellas, determinar, posición, debes, recurrir, primero, unidimensionales, antiguas, muestran, continuación, siguen, funcionando, rara, vez, opción, hoy, día, trabajamos, múltiples, estos, núcleo, posiciones, relativas, correctas, tamaños, tareas, importantes, regla, whole, grouped, given, sits, flow, highlighted, fluye, seleccionar, fragmento, pequeño, palabra, frase, ocupa, secciones, grandes, párrafos, contenedores, genéricos, sin, diferencia, tipo, crean, todo, anidados, produce, difícil, leer, ofrece, nada, útil, tecnologías, asistencia, añadir, pregúntate, encajan, cuidado, sopa, advertencia, versiones, renderizan, idéntica, defecto, segunda, fácil, mantener, semantic, elements, self, describing, generic, meaning, compara, misma, estructura, escrita, formas, esa, representa, región, significativa, navegación, encabezado, artículo, preferible, correspondiente, semánticas, describen, ayuda, motores, búsqueda, lectores, comprender, qué, level, element, line, break, placed, pay, attention, that, place, within, group, two, paragraphs, for, applying, add, pares, escribe, apertura, cierre, anidarse, romperá, punto, donde, coloque, posible, cualquier, salto, después, recomendamos, introducido, sea, apropiado, consejo, expande, ocupar, unas, pocas, palabras, oración, equivalente, definir, división, sección, inherentemente, sino, principalmente, manipularlos, mediante, aprende, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, async, alt, attribute, reference, forms, vídeos, youtube, multimedia, media, obsoletos, attributes, degradado, radial, lineargradient, sombras, efectos, desenfoque, filtros, trazado, path, polyline, polygon, ellipse, círculo, rectángulo, gradientes, coordenadas, dibujo, xmp, wbr, var, track, time, thead, tfoot, textarea, tbody, table, sup, summary, sub, strong, strike, spacer, source, small, select, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, meter, meta, menuitem, menu, marquee, mark, map, link, legend, label, keygen, kbd, isindex, ins, input, img, iframe, hgroup, frameset, frame, form, font, figure, figcaption, fieldset, embed, dialog, dfn, details, datalist, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, aside, area, applet, address, acronym, abbr, eventos, desuso, tags, xhtml, tabla, mime, mensajes, estado, métodos, atajos, teclado, entidades, codificación, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migración, compatibilidad, navegadores, templates, computercode, rutas, archivo, tablas, comentarios, colores, enlaces, formato, encabezados, básicas, editores, basics, iniciar, sesión, buscar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, cursos, uso,

Text of the page (random words):
etiqueta html div uso atributos y ejemplos w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender html html basics introducción a html editores y herramientas elementos html etiquetas html básicas atributos html encabezados html formato html enlaces html listas html colores en html comentarios html tablas html bloques html scripts html estilos html css rutas de archivo en html html computercode html templates plantillas de diseño plantillas de formularios html 5 introducción a html5 etiquetas html5 elementos semánticos audio y video compatibilidad de html5 con navegadores migración a html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificación utf 8 entidades html atajos de teclado métodos http imágenes html mensajes de estado http tipos mime tabla de etiquetas html xhtml url en html html tags etiquetas en desuso atributos globales de html atributos de eventos etiquetas html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introducción a canvas dibujo en canvas coordenadas del canvas gradientes en canvas texto en canvas imágenes en canvas referencia de canvas svg tutorial introducción a svg svg en html5 rectángulo svg círculo svg svg ellipse línea svg svg polygon svg polyline svg path texto svg trazado en svg introducción a los filtros svg efectos de desenfoque svg sombras en svg svg lineargradient degradado radial svg referencia svg html attributes atributos obsoletos atributo class de html atributo id de html html media multimedia en html vídeos de youtube en html html forms formularios html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset etiqueta html div aprende a usar la etiqueta div para agrupar elementos html y aplicarles estilos con css atributos class id style y más con ejemplos la etiqueta div es un contenedor que se utiliza para definir una división o sección es un elemento de bloque que no afecta inherentemente al contenido sino que se emplea principalmente para agrupar elementos html y aplicarles estilos con css o manipularlos mediante scripts como div es un elemento de bloque cada uno comienza en una línea nueva y se expande para ocupar el ancho disponible no tiene ningún significado semántico propio es una caja genérica usa div para agrupar contenido de bloque para agrupar o dar estilo a contenido en línea unas pocas palabras dentro de una oración utiliza en su lugar el equivalente en línea la etiqueta span posicionamiento de bloques definidos por la etiqueta div consejo recomendamos usar la etiqueta div solo cuando ningún otro elemento semántico introducido en html5 como nav main o article sea apropiado como div es un elemento de bloque se inserta un salto de línea antes y después de él es posible colocar cualquier elemento html dentro de una etiqueta div incluyendo otro div peligro los elementos de bloque como div no pueden anidarse dentro de etiquetas p ya que el párrafo se romperá en el punto donde se coloque la etiqueta div para aplicar estilos dentro de un párrafo usa la etiqueta span que se emplea con elementos en línea sintaxis la etiqueta div va en pares el contenido se escribe entre las etiquetas de apertura div y cierre div ejemplo de la etiqueta html div ejemplo de la etiqueta html div doctype html html head title the div tag title head body h1 the div tag h1 div style background color 8ebf42 p we use the div tag to group two paragraphs for applying a background to the text and to add color to this span style color 1c87c9 word span we place it within span tag p p pay attention that the div tag is a block level element so a line break is placed before and after it p div body html copiar pruébalo tú mismo div vs elementos semánticos un div es la herramienta adecuada cuando solo necesitas una caja genérica a la que aplicar estilos o scripts pero cuando esa caja representa una región significativa de la página navegación encabezado artículo es preferible usar el elemento semántico html5 correspondiente las etiquetas semánticas describen qué es el contenido lo que ayuda a los motores de búsqueda los lectores de pantalla y otros desarrolladores a comprender tu marcado compara la misma estructura escrita de dos formas before generic divs no meaning div class header div div class nav div div class main div div class footer div after semantic elements self describing header header nav nav main main footer footer copiar ambas versiones se renderizan de forma idéntica por defecto pero la segunda es mucho más accesible y fácil de mantener advertencia cuidado con la sopa de divs envolver todo en elementos div anidados div class nav div class header etc produce un marcado difícil de leer que no le ofrece nada útil a las tecnologías de asistencia antes de añadir un div pregúntate si nav header main article section o footer encajan mejor div vs span las etiquetas div y span son ambas contenedores genéricos sin significado propio la diferencia está en el tipo de caja que crean div es de bloque comienza en una línea nueva ocupa el ancho disponible y se usa para agrupar secciones más grandes de contenido párrafos listas otros divs span es en línea fluye dentro de una línea de texto y se usa para dar estilo o seleccionar un fragmento pequeño de contenido como una palabra o frase p the word span style color 1c87c9 highlighted span sits inside the text flow p div style background color 8ebf42 p this whole block is grouped and given a background p div copiar como regla general usa div para agrupar contenido de bloque y span para envolver contenido en línea al construir layouts trabajamos con múltiples bloques definidos por la etiqueta div el posicionamiento de estos bloques es el núcleo del diseño de páginas colocar los elementos en las posiciones relativas correctas en todos los tamaños de pantalla es una de las tareas más importantes según el contenido y los objetivos de la página podemos usar diferentes técnicas o combinaciones de ellas para determinar la posición de cada bloque para los layouts modernos las dos herramientas a las que debes recurrir primero son css grid para layouts bidimensionales de filas y columnas y flexbox para filas o columnas unidimensionales las técnicas más antiguas que se muestran a continuación floats márgenes negativos y posicionamiento absoluto siguen funcionando pero rara vez son la mejor opción hoy en día css grid css grid es la forma moderna y estándar de construir layouts bidimensionales es decir layouts que organizan bloques div en filas y columnas al mismo tiempo defines una cuadrícula en el contenedor con display grid y describes sus pistas luego los bloques hijos fluyen hacia las celdas ejemplo de la etiqueta html div con css grid un ejemplo de la etiqueta html div con css grid doctype html html head title title of the document title style grid container display grid grid template columns 1 fr 1 fr 1 fr gap 10 px padding 10 px background color 1faadb grid container div height 60 px border radius 3 px background color 8ebf42 style head body div class grid container div div div div div div div div div div div div div body html copiar este único grid template columns 1fr 1fr 1fr crea tres columnas iguales y los seis bloques div se distribuyen automáticamente en dos filas flexbox cuando solo necesitas distribuir elementos a lo largo de un único eje una fila o una columna flexbox es la herramienta adecuada en los sitios web modernos los layouts basados en float están siendo reemplazados por flexbox y css grid la idea principal detrás de flexbox es que permite controlar la alineación la dirección el orden y el tamaño de los elementos dentro del contenedor ejemplo de flexbox con la etiqueta html div un ejemplo de la etiqueta html div con flexbox doctype html html head title title of the document title style flex container display flex align items center use another value to see the result width 100 height 200 px background color 1faadb flex container div width 25 height 60 px margin 5 px border radius 3 px background color 8ebf42 style head body div class flex container div div div div div div div body html copiar pruébalo tú mismo propiedad css float la propiedad css float o floats permite que los elementos aparezcan uno al lado del otro o separados entre sí lo que nos permite crear diferentes tipos de layouts incluyendo páginas de varias columnas barras laterales cuadrículas etc ejemplo de la etiqueta html div con la propiedad css float ejemplo de la etiqueta html div con la propiedad css float doctype html html head title title of the document title style content overflow auto border 3 px solid 666 content div padding 10 px content a color darkblue blue float right width 45 background color 1faadb green float left width 35 background color 8ebf42 style head body div class content div class blue p this is some paragraph inside div tag p a href this is some hyperlink inside div tag a ul li list item 1 li li list item 2 li ul div div class green p this is some paragraph inside div tag p ol li list item 1 li li list item 2 li ol div div body html copiar pruébalo tú mismo resultado márgenes negativos técnica heredada i información los márgenes negativos son un truco de posicionamiento de nicho mayormente heredado para nuevos layouts prefiere css grid o flexbox que logran los mismos solapamientos y desplazamientos de forma mucho más predecible este ejemplo se mantiene como referencia los márgenes negativos se pueden aplicar tanto a elementos estáticos como flotantes para acercar bloques o hacer que se superpongan ejemplo de márgenes negativos ejemplo de la etiqueta html div con márgenes negativos doctype html html head title title of the document title style content div padding 2 content a color darkblue main content width 30 margin left 32 blue width 25 margin top 10 background color 1faadb green width 20 margin 35 auto auto 70 background color 8ebf42 style head body div class content div class main content a href this is some hyperlink inside div tag a div div class blue p this is some paragraph inside div tag p a href this is some hyperlink inside div tag a ul li list item 1 li li list item 2 li ul div div class green p this is some paragraph inside div tag p ol li list item 1 li li list item 2 li ol div div body html copiar pruébalo tú mismo posicionamiento relativo absoluto si quieres posicionar un div relativo a un elemento concreto puedes combinar position relative y position absolute ejemplo de posicionamiento relativo absoluto de la etiqueta html div un ejemplo de la etiqueta html div con la propiedad css position doctype html html head title title of the document title style content position relative height 400 px border 1 px solid 666 content div position absolute width 35 padding 10 px blue right 20 px bottom 0 background color 1faadb green top 10 px left 15 px background color 8ebf42 style head body div class content div class blue p this is some paragraph inside div tag p div div class green p this is some paragraph inside div tag p div div body html copiar pruébalo tú mismo peligro position relative no afecta al posicionamiento de los elementos en el flujo normal a menos que se añadan desplazamientos atributos la etiqueta div no tiene atributos propios en la práctica depende de los atributos globales más frecuentemente id class style data y aria para ser estilizada manipulada por scripts o hecha accesible también admite los atributos de evento atributo valor descripción align left right center justify obsoleto se usaba para alinear el contenido dentro de una etiqueta div no está soportado en html5 usa la propiedad css text align en su lugar práctica práctica cuál es la función principal de la etiqueta html div cuál es la función principal de la etiqueta html div establece propiedades css para elementos específicos de la página agrupa contenido de bloque para que pueda recibir estilos o scripts como una unidad inserta contenido de vídeo en una página web envuelve contenido en línea dentro de una línea de texto como hace la etiqueta span lleva un significado semántico que describe el contenido que contiene comprobar was this page helpful yes no previous dir next dl on this page posicionamiento de bloques definidos por la etiqueta div sintaxis div vs elementos semánticos div vs span css grid flexbox propiedad css float márgenes negativos técnica heredada posicionamiento relativo absoluto atributos práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores