Etiquetas de elementos de bloque

3.1 Elemento <p>

Los elementos de bloque en HTML se utilizan para crear la estructura y organización del contenido de una página web. Ayudan a dividir el contenido en bloques y segmentos lógicos. Estos elementos comienzan una nueva línea y ocupan todo el ancho disponible. Vamos a ver más a fondo tres etiquetas de uso común: <p>, <div>, y <span>.

Etiqueta <p>

La etiqueta <p> se utiliza para crear párrafos de texto. Es un elemento de bloque: esto significa que cada párrafo comienza en una nueva línea y tiene márgenes arriba y abajo.

Ejemplo de uso:

    
      <p>
        Este es el primer párrafo de texto. Los párrafos se utilizan para dividir el texto en bloques lógicos,
        mejorando su legibilidad.
      </p>
      <p>Este es el segundo párrafo de texto. Cada párrafo comienza en una nueva línea.</p>
    
  

Propiedades:

• Elemento de bloque: Se coloca en una nueva línea y ocupa todo el ancho disponible.
• Márgenes automáticos: Por lo general, los navegadores añaden márgenes antes y después de un párrafo.
• Anidamiento: La etiqueta <p> no puede contener otros elementos de bloque.

Estilizado con CSS:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Elemento <div>

La etiqueta <div> es un contenedor de bloque universal que se utiliza para agrupar otros elementos y aplicar estilos a ellos. No tiene estilos incorporados y se usa exclusivamente para estructurar contenido.

Ejemplo de uso:

    
      <div class="container">
        <h2>Título del bloque</h2>
        <p>Algún texto dentro del bloque div.</p>
      </div>
    
  

Propiedades:

• Elemento de bloque: se coloca en una nueva línea y ocupa todo el ancho disponible
• Versatilidad: puede contener cualquier otro elemento, incluidos elementos de bloque e inline
• Estilización y scripts: a menudo se utiliza para aplicar estilos CSS y scripts JavaScript

Estilizado con CSS:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Elemento <span>

La etiqueta <span> es un elemento inline y se utiliza para resaltar partes del texto u otro contenido dentro de elementos de bloque. No tiene estilos incorporados y sirve para aplicar estilos CSS y scripts JavaScript a partes específicas del texto.

Ejemplo de uso:

    
      <p>Este texto contiene una <span class="highlight"> palabra</span> destacada, que se diferencia del resto del texto.</p>
    
  

Propiedades:

• Elemento inline: no crea una nueva línea y ocupa solo el ancho necesario
• Flexibilidad: se utiliza para aplicar estilos a partes específicas del texto u otros elementos
• A menudo se utiliza en combinación con CSS y JavaScript: ayuda a estilizar o manipular con precisión partes del texto

Estilizado con CSS:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 Comparación <div> y <span>

<div>:

• Elemento de bloque
• Comienza en una nueva línea
• Puede contener otros elementos de bloque e inline
• Se utiliza para agrupar y estructurar contenido

<span>:

• Elemento inline
• No interrumpe el flujo del texto
• Se utiliza para estilizar partes específicas del texto
• A menudo se utiliza para resaltar y trabajar con JavaScript

Ejemplo de uso combinado de <div> y <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Título del artículo</h2>
        <p>
          Este es un párrafo de texto en el artículo con una <span class="keyword">palabra</span> clave destacada para llamar la atención.
        </p>
      </div>
    
  

Las etiquetas <p>, <div> y <span> son los principales bloques de construcción de HTML que permiten crear páginas web estructuradas, estilizadas e interactivas. Comprender sus características y usarlas correctamente ayuda a crear interfaces funcionales y amigables.