Tags de elementos de bloco

3.1 Elemento <p>

Elementos de bloco no HTML são usados para criar a estrutura e a organização do conteúdo de uma página da web. Eles ajudam a dividir o conteúdo em blocos e segmentos lógicos. Esses elementos começam uma nova linha e ocupam toda a largura disponível. Vamos ver mais detalhadamente três tags frequentemente usadas: <p>, <div>, e <span>.

Tag <p>

A tag <p> é usada para criar parágrafos de texto. É um elemento de bloco: isso significa que cada parágrafo começa em uma nova linha e tem margens acima e abaixo.

Exemplo de uso:

    
      <p>
        Este é o primeiro parágrafo de texto. Os parágrafos são usados para dividir o texto em blocos lógicos,
        melhorando a sua legibilidade.
      </p>
      <p>Este é o segundo parágrafo de texto. Cada parágrafo começa em uma nova linha.</p>
    
  

Propriedades:

• Elemento de bloco: Inicia em uma nova linha e ocupa toda a largura disponível.
• Margens automáticas: Geralmente, os navegadores adicionam margens antes e depois do parágrafo.
• Aninhamento: A tag <p> não pode conter outros elementos de bloco.

Estilização com CSS:

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

3.2 Elemento <div>

A tag <div> é um contêiner de bloco universal que é usado para agrupar outros elementos e aplicar estilos a eles. Ela não tem estilos incorporados e é usada exclusivamente para estruturar o conteúdo.

Exemplo de uso:

    
      <div class="container">
        <h2>Título do bloco</h2>
        <p>Algum texto dentro do bloco div.</p>
      </div>
    
  

Propriedades:

• Elemento de bloco: Inicia em uma nova linha e ocupa toda a largura disponível
• Universalidade: Pode conter quaisquer outros elementos, incluindo elementos de bloco e inline
• Estilização e scripts: frequentemente usado para aplicar estilos CSS e scripts JavaScript

Estilização com CSS:

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

3.3 Elemento <span>

A tag <span> é um elemento inline e é usada para destacar partes do texto ou outro conteúdo dentro de elementos de bloco. Ela não possui estilos embutidos e serve para aplicar estilos CSS e scripts JavaScript em partes específicas do texto.

Exemplo de uso:

    
      <p>Este texto contém uma <span class="highlight"> palavra</span> destacada, que se diferencia do resto do texto.</p>
    
  

Propriedades:

• Elemento inline: não cria uma nova linha e ocupa apenas a largura necessária
• Flexibilidade: usado para aplicar estilos a partes específicas do texto ou outros elementos
• Frequentemente usado em combinação com CSS e JavaScript: ajuda a estilizar ou manipular partes do texto de forma precisa

Estilização com CSS:

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

3.4 Comparação entre <div> e <span>

<div>:

• Elemento de bloco
• Inicia em uma nova linha
• Pode conter outros elementos de bloco e inline
• Usado para agrupar e estruturar conteúdo

<span>:

• Elemento inline
• Não quebra o fluxo de texto
• Usado para estilizar partes específicas do texto
• Frequentemente aplicado para destaque e scripts JavaScript

Exemplo de uso combinado de <div> e <span>:

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

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

    
      <div class="article">
        <h2>Título do artigo</h2>
        <p>
          Este é um parágrafo do texto do artigo com a palavra-chave <span class="keyword">destacada</span>, que se destaca para chamar a atenção.
        </p>
      </div>
    
  

As tags <p>, <div> e <span> são os blocos de construção principais do HTML que permitem criar páginas web estruturadas, estilizadas e interativas. Entender suas características e usá-las corretamente ajuda a criar interfaces de usuário convenientes e funcionais.