Pular para conteúdo

03 div

Div#

A tag <div> é uma das tags mais utilizadas em HTML e é usada para criar seções ou grupos de conteúdo em uma página da web. A tag <div> não tem um significado específico, mas é usada para criar contêineres de bloco que podem ser estilizados ou manipulados com CSS ou JavaScript.

  <!DOCTYPE html>
  <html>
    <head>
      <title>Título da página</title>
    </head>
    <body>
      <div>
        <h1>Este é um título principal</h1>
        <p>Este é um exemplo de parágrafo em HTML.</p>
      </div>
      <div>
        <h2>Este é um título secundário</h2>
        <ul>
          <li>Item 1 da lista</li>
          <li>Item 2 da lista</li>
          <li>Item 3 da lista</li>
        </ul>
      </div>
    </body>
  </html>

No exemplo acima, a tag <div> é usada para agrupar o conteúdo em duas seções separadas. A primeira seção contém um título principal e um parágrafo, enquanto a segunda seção contém um título secundário e uma lista.

A tag <div> é muito útil para organizar e estruturar o conteúdo de uma página da web. Ela permite que você agrupe diferentes elementos em uma seção lógica, o que torna o código HTML mais fácil de entender e manter. Além disso, a tag <div> é frequentemente usada para criar layouts complexos em combinação com CSS.

Exercícios de Fixação#

  • 01 - Página de perfil: Crie uma página de perfil simples com uma imagem de perfil, nome do usuário, uma breve descrição e alguns interesses listados em parágrafos separados.

  • 02 - Lista de tarefas: Crie uma lista de tarefas com caixas de seleção para cada uma. Use divs para agrupar as tarefas e adicione um título para a lista.

  • 03 - Card de produto: Crie um card de produto com uma imagem, nome, preço e descrição do produto.