Etiquetas Genéricas HTML

Definición División <div>

La etiqueta <div> (abreviación de "division") es un elemento genérico de bloque en HTML que actúa como un contenedor para otros elementos HTML. Es uno de los elementos más utilizados en el desarrollo web moderno para crear estructura, organizar contenido y facilitar la aplicación de estilos CSS. No tiene significado semántico por sí mismo, sino que sirve como una herramienta de agrupación y organización.

Características División <div>

• La etiqueta <div> es un elemento de tipo bloque, lo que significa que ocupa todo el ancho disponible de su contenedor padre y siempre comienza en una nueva línea, desplazando hacia abajo cualquier contenido que le siga. Puede entenderse como un párrafo invisible que crea su propio espacio dentro del documento.
• Esta etiqueta es altamente versátil y actúa como un comodín estructural cuando se necesita agrupar contenido y no existe una etiqueta semántica más específica que se ajuste al propósito.
• Su uso principal es organizar lógicamente el contenido o aplicar estilos CSS a un conjunto de elementos, sin aportar semántica por sí misma.
• Funciona como un contenedor flexible, capaz de incluir texto, imágenes, otros elementos HTML e incluso otras etiquetas <div>.
• Se emplea ampliamente junto con CSS para diseñar interfaces y crear estructuras visuales personalizadas.
• Además, es compatible con todas las versiones de HTML, lo que garantiza su funcionamiento en cualquier entorno web moderno.

Sintaxis Correcta División <div>

La sintaxis del elemento <div> es relativamente sencilla, consistiendo en una etiqueta de apertura y una de cierre que delimitan el contenido que se desea agrupar. La estructura básica es la siguiente:

                  
                    <div>
                      <!-- El contenido va aquí -->
                    </div>
                  
                

El elemento <div> solo admite atributos globales HTML, con la excepción de align, que ya no está permitido desde la introducción de HTML5. Esto significa que puede utilizar atributos como class, id, style, data-*, entre otros, pero debería evitarse el uso de atributos obsoletos.

Con atributos comunes:

                  
                    <div>
                      <div class="nombre-clase" id="identificador-unico">
                        <p>Contenido del div</p>
                      <div>
                    </div>
                  
                

Con múltiples clases:

                  
                    <div>
                      <div class="clase1 clase2 clase3">
                        <p>Contenido del div</p>
                      <div>
                    </div>
                  
                

Con atributos de datos personalizados:

                  
                    <div data-valor="100" data-tipo="contenedor">
                        <span>Elemento con datos personalizados</span>
                    </div>
                  
                

Uso División <div>

Se emplea para:

• Estructuración de Layout: Organiza elementos HTML (texto, imágenes, etc.) en secciones o bloques.
• Agrupamiento Lógico: Organizar secciones de la página web que no tienen una etiqueta semántica específica. Por ejemplo, una sección de un formulario:

                        
                          <div class="comments">
                            <h2>Formulario de Comentarios</h2>
                            <form>
                                <div class="form-group">
                                    <label for="nombre">Nombre y Apellido:</label>
                                    <input type="text" id="nombre" name="nombre" required>
                                </div>
  
                                <div class="form-group">
                                    <abel for="comentario">Comentario:</label>
                                    <textarea id="comentario" name="comentario" placeholder="Escribe tu comentario aquí..." required></textarea>
                                </div>
  
                                <button type="submit" class="submit-btn">Enviar Comentario</button>
                            </form>
                            </div>
                          
                      

• Aplicar Estilos (CSS): Es el contenedor ideal para aplicar estilos a un grupo de elementos de una sola vez. En lugar de darle un color de fondo a cada párrafo, se puede darle ese color de fondo al <div> que los contiene. Para ello, se suelen usar los atributos: class o id:

                        
                          <div class="overlay">
                              <div class="modal">
                                  <h2>Ventana Modal</h2>
                                  <p>Contenido del modal</p>
                              </div>
                          </div>
                        
                      

• Manipulación con JavaScript: Cuando se necesita interactuar con un grupo de elementos (por ejemplo, ocultarlos, mostrarlos, cambiar su contenido), se puede apuntar al <div> que los contiene usando JavaScript:

                        
                          <div id="contador">Clics: 0</div>
                        
                      

Relación con Otras Etiquetas División <div>

• Contiene a Casi Todas Las Etiquetas: Puede contener prácticamente cualquier otra etiqueta HTML dentro de ella (párrafos, imágenes, listas, formularios, otras <div>s, etc.).
• Anidamiento: Es muy común anidar <div>s dentro de otras <div>s para crear estructuras más complejas. Pensar en cajas dentro de cajas.
• Relación con Etiquetas Semánticas: Es crucial entender que, si bien <div> es genérica, HTML5 introdujo muchas etiquetas semánticas (<header>, <nav>, <main>, <article>, <section>, <footer>, <aside>) para dar un significado más claro a diferentes partes de una página. Antes de HTML5, se usaban muchos <div>s con ids o classes como id="header" o class="navigation". Ahora, lo ideal es usar las etiquetas semánticas cuando su propósito coincide con el contenido, y reservar <div> para agrupaciones que no encajan en ninguna categoría semántica específica.
• Fragmento en Línea: la etiqueta <span> es equivalente a <div>, pero es en línea (inline), no bloque (block).

Buenas Prácticas y Errores Comunes División <div>

• Buenas prácticas:
  • Usar <div> solo cuando no haya una etiqueta más semántica apropiada.
  • Nombrar con claridad los id y class.
  • Usar comentarios cuando los <div> se anidan mucho.
  • Evitar anidar demasiados <div>s sin necesidad, ya que puede hacer que el código sea difícil de leer y mantener ("divitis").
  • Usar <div> para agrupar elementos relacionados.
  • Combinar con CSS para layouts (usar display: flex o grid en lugar de <div> para todo).
• Errores Comunes:
  • Divitis: uso excesivo e innecesario de <div> .
  • No usar atributos descriptivos, dejando <div> genéricos sin class o id, lo que dificulta el mantenimiento.
  • No estructurar adecuadamente el contenido.
  • Omitir etiquetas semánticas que ofrecen mejor accesibilidad.
  • Intentar usar <div> para aplicar estilos a una palabra o frase dentro de un párrafo. Para eso, se debe usar la etiqueta <span> (que es un elemento en línea).
  • No usar la etiqueta de cierre </div> , lo que puede romper el diseño y el funcionamiento de la página.
  • No añadir atributos ARIA cuando es necesario para usuarios con tecnologías de asistencia para tener mejor una accesibilidad.

Configuración CSS por Defecto División <div>

CSS por defecto del navegador (estilos user-agent):

                  
                    div {
                      display: block;
                      margin: 0;
                      padding: 0;
                      width: auto;
                      height: auto;
                    }
                  
                

Donde:

• display: block;: Esto es lo que lo convierte en un elemento de bloque, haciendo que ocupe todo el ancho disponible y comience en una nueva línea.
• margin: 0; y padding: 0;: Por defecto, no tiene margen ni relleno.
• width: auto;: Por defecto, su ancho se ajusta automáticamente al 100% del ancho de su contenedor padre.
• height: auto;: Su altura se ajusta al contenido que tiene dentro.

Ejemplo Aplicado en un Proyecto Real División <div>

Para ilustrar cómo se aplica el elemento <div> en un proyecto real, veamos un ejemplo completo de una sección de una página web que utiliza <div> para estructurar el contenido de manera efectiva. Este ejemplo muestra un panel de productos con tarjetas individuales:

See the Pen División <div> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.

Este ejemplo ilustra varios usos efectivos de <div>:

• productos-container: sirve como un contenedor principal que limita el ancho Y centra el contenido.
• productos-titulo: agrupa el encabezado Y el subtítulo relacionados.
• productos-grid: crea un contenedor para implementar un diseño de rejilla CSS.
• productos-tarjeta: funciona como un componente independiente para cada producto.
• producto-info y .producto-acciones: subdividen el contenido de cada tarjeta en secciones lógicas.

Este ejemplo muestra cómo los <div> pueden utilizarse para crear una estructura organizativa clara sin abusar de ellos. Se utilizan elementos semánticos como <main>, <section>, <h2>, <h3> y <p> para el contenido que lo requiere, mientras que los <div> se emplean para agrupar y estructurar.

Uso con Tecnologías de Asistencia (ARIA) División <div>

                    
                      <!-- Div con rol de navegación -->
                      <div role="navigation" aria-label="Navegación principal">
                          <ul>
                              <li><a href="#home">Inicio</a></li>
                              <li><a href="#about">Acerca</a></li>
                          </ul>
                      </div>

                      <!-- Div con rol de banner -->
                      <div role="banner" class="site-header">
                          <h1>Título del sitio</h1>
                      </div>

                      <!-- Div con rol de main -->
                      <div role="main" class="main-content">
                          <article>Contenido principal</article>
                      </div>
                    
                  

                    
                      <!-- Div con etiqueta descriptiva -->
                      <div aria-labelledby="section-title" class="content-section">
                          <h2 id="section-title">Título de la Sección</h2>
                          <p>Contenido de la sección...</p>
                      </div>

                      <!-- Div con descripción aria -->
                      <div aria-describedby="help-text" class="form-group">
                          <input type="email" id="email">
                          <div id="help-text">Ingrese un email válido</div>
                      </div>

                      <!-- Div con estado aria -->
                      <div aria-expanded="false" class="collapsible-menu">
                        <button aria-controls="menu-content">Menú</button>
                        <div id="menu-content" class="menu-content">
                            <ul>
                                <li><a href="#">Opción 1</a></li>
                                <li><a href="#">Opción 2</a></li>
                            </ul>
                        </div>
                      </div>
                    
                  

                    
                      <!-- Regiones landmark -->
                      <div role="complementary" aria-label="Barra lateral">
                          <div class="widget">
                              <h3>Widget 1</h3>
                              <p>Contenido del widget...</p>
                          </div>
                      </div>

                      <div role="contentinfo" class="site-footer">
                          <p>Información de contacto y derechos de autor</p>
                      </div>

                      <!-- Estados dinámicos -->
                      <div aria-live="polite" id="status-message" class="status-container">
                          <!-- Mensajes de estado se insertan aquí dinámicamente -->
                      </div>

                      <div aria-atomic="true" aria-live="assertive" class="alert-container">
                          <!-- Alertas importantes -->
                      </div>
                    
                  

                    
                      <!-- Cuando no se pueda usar elementos semánticos -->
                      <div role="article" class="blog-post">
                          <div role="heading" aria-level="1">Título del artículo</div>
                          <div role="paragraph">Contenido del artículo...</div>
                      </div>
                    
                  

Definición Fragmento en Línea <span>

El elemento <span> se define como un contenedor genérico en línea que abarca y agrupa contenido sin aportar significado semántico específico al documento. La etimología del término "span" proviene del inglés "abarcar" o "extenderse", lo que refleja perfectamente su función de envolver y delimitar porciones de contenido para su posterior manipulación. A diferencia de elementos estructurales como <div> que operan a nivel de bloque, <span> funciona exclusivamente como elemento en línea, integrado dentro del flujo textual sin generar saltos de línea antes o después de su contenido.

La naturaleza inline del elemento <span> significa que se comporta como texto normal dentro del documento, permitiendo que múltiples elementos span coexistan en la misma línea sin interrumpir la continuidad visual del contenido. Esta característica lo convierte en la herramienta ideal para aplicar cambios de formato a palabras específicas, frases cortas o cualquier fragmento de texto que requiera tratamiento diferenciado sin alterar la estructura general del párrafo o elemento contenedor.

El elemento <span> se clasifica como un elemento especial dentro de la especificación HTML, lo que significa que puede contener tanto texto como otros elementos en línea, proporcionando flexibilidad para crear estructuras de contenido complejas. Su versatilidad se extiende a la capacidad de anidar otros elementos <span>, crear combinaciones con elementos de formato semántico y servir como contenedor para elementos multimedia pequeños como iconos o imágenes inline.

Características Fragmento en Línea <span>

• Es un elemento en línea (display: inline ), por lo tanto no inicia una nueva línea, sólo ocupa el espacio necesario para su contenido.
• No tiene estilo visual propio por defecto; hereda los estilos del elemento padre.
• Se usa comúnmente con atributos como class, style y id para aplicar estilos o comportamientos.
• No tiene un significado semántico específico (es decir, no describe el contenido que contiene).
• Es ligero y versátil, ideal para personalizar partes pequeñas del contenido, como una palabra o frase.
• Su flexibilidad se manifiesta en su capacidad para contener diversos tipos de contenido (texto plano, otros elementos en línea (display: inline;) como <strong>, <em>, <a>, pequeñas imágenes, iconos, y prácticamente cualquier elemento que no sea de tipo bloque (display: block)).
• No tiene ningún Rol ARIA implícito.
• Cualquier elemento que admita contenido de flujo, como <p> o <div> puede contener una etiqueta <span> como su elemento hijo.

Sintaxis Correcta Fragmento en Línea <span>

Estructura Básica:

                  
                    <span>Contenido de texto<<span>
                  
                

Con Atributos Comunes:

                  
                    <span class="destacado" id="texto-importante">Texto destacado</span>
                    <span style="color: red; font-weight: bold;">Texto rojo y negrita</span>
                    <span data-info="información adicional">Texto con datos personalizados</span>
                  
                

Anidación Correcta:

                  
                    <p>Este es un párrafo con <span class="resaltado">texto resaltado</span> en el medio.</p>

                    <!-- Anidación múltiple -->
                    <span class="contenedor">
                        <span class="icono">📧</span>
                        <span class="texto">Correo electrónico</span>
                    </span>
                  
                

Uso Fragmento en Línea <span>

El uso principal de <span> incluye:

• Aplicación de estilos: Cambiar el color, tamaño, fuente, o añadir efectos como subrayados a partes específicas del texto. Por ejemplo:

                        
                          <p>La palabra <span class="destacado">importante</span> está resaltada.</p>
                        
                      

  Con CSS:

                        
                          .destacado { color: blue; font-weight: bold; }
                        
                      

• Manipulación con JavaScript: Agrupar contenido para seleccionarlo y modificarlo dinámicamente, como cambiar texto o añadir eventos:

                        
                          <p>Hola, <span id="nombre">Juan</span>.</p>
                          <script>
                            document.getElementById("nombre").textContent = "Pedro";
                          </script>
                        
                      

• Agrupación semántica: Aunque no es semántico, puede usarse para agrupar contenido relacionado cuando no hay otra etiqueta más adecuada, como en accesibilidad con ARIA.

                        
                          <p>
                            <span class="status-indicator status-away"
                              role="img"
                              aria-label="Ausente"></span>
                            Usuario María está <span aria-live="polite">ausente</span>
                          </p>
                        
                      

Relación con Otras Etiquetas Fragmento en Línea <span>

• Nivel de Bloque vs. En Línea:: Similar a <div>, pero mientras <div> es un contenedor de bloque, <span> es en línea.
• Semántica: A diferencia de etiquetas como <strong> o <em>, <span> no aporta semántica, solo sirve como gancho para estilo o comportamiento.
• Relación con Otros Elementos en Línea:: Puede contener otros elementos en línea o "phrasing content", pero no debe contener elementos de bloque (como <div>, <p> o "flow content").

Buenas Prácticas y Errores Comunes Fragmento en Línea <span>

• Buenas Prácticas:
  • Usar <span> solo cuando se requiera aplicar estilos, eventos o atributos específicos.
  • Acompañar con atributos como class o id para separar contenido de presentación.
  • Usar CSS externo o interno en lugar de style en línea cuando sea posible.
  • Utilizar <span> cuando no hay una etiqueta semántica más adecuada.
• Errores Comunes:
  • Usar <span> en exceso sin necesidad (provoca código innecesariamente complejo).
  • Incluir elementos de bloque dentro de <span> (no permitido).
  • Usar <span> sin aplicar ningún estilo o función, lo cual no tiene sentido práctico.
  • Falta de accesibilidad ARIA.
  • Usar <span> cuando una etiqueta semántica como <strong> o <em> sería más adecuada.
  • Usar <span> para estructurar layouts, lo que debe hacerse con CSS y elementos de bloque como <div>.
  • No cerrar la etiqueta, lo que puede causar errores de renderizado en navegadores.

Configuración CSS por Defecto Fragmento en Línea <span>

Por defecto, <span> no tiene estilos específicos. Hereda los estilos de su elemento padre.

                  
                    span {
                        display: inline;
                        margin: 0;
                        padding: 0;
                        border: none;
                        background: transparent;
                        font: inherit;
                        color: inherit;
                        text-decoration: none;
                        vertical-align: baseline;
                    }
                  
                

Estilos comunes aplicados:

                  
                    /* Estilos típicos para diferentes usos */

                    /* Para badges o etiquetas */
                    .badge {
                        display: inline-block;
                        padding: 0.25em 0.6em;
                        font-size: 0.75em;
                        font-weight: 700; 
                        line-height: 1;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: baseline;
                        border-radius: 0.375rem;
                    }

                    /* Para resaltado de texto */
                    .highlight {
                        background-color: #fff3cd;
                        padding: 0.1em 0.2em;
                        border-radius: 0.2em;
                    }

                    /* Para tooltips */
                    .tooltip {
                        position: relative;
                        cursor: help;
                        border-bottom: 1px dotted #666;
                    }

                    .tooltip:hover::after {
                        content: attr(data-tooltip);
                        position: absolute;
                        bottom: 125%;
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: #333;
                        color: white;
                        padding: 0.5em;
                        border-radius: 0.3em;
                        white-space: nowrap;
                        z-index: 1000;
                    }
                  
                

Ejemplo Aplicado en un Proyecto Real Fragmento en Línea <span>

Sistema de Notificaciones:

See the Pen Fragmento en Línea <span> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.

Uso con Tecnologías de Asistencia (ARIA) Fragmento en Línea <span>

El <span> puede usarse con atributos ARIA para mejorar la accesibilidad si tiene un propósito funcional o semántico al aplicar estilos o interacción:

                  
                    <span role="alert" aria-live="polite">Mensaje importante</span>
                  
                

En este ejemplo, el <span> informa a lectores de pantalla que este texto debe anunciarse cuando cambie dinámicamente.