Estruturando Páginas Web

Quando começamos a desenvolver páginas web, é importante entender como estruturar o conteúdo de forma eficiente. Neste artigo, vamos explorar algumas das tags HTML mais comuns: div, span, fieldset, embed e iframe. Vamos entender o que cada uma faz e como usá-las.

1. Div e Span

1.1 O que são?

Div e span são elementos de contêiner que ajudam a organizar o conteúdo da página.

- Div: É um bloco de elementos. Isso significa que ocupa toda a largura disponível e começa em uma nova linha. É usado para agrupar outros elementos e aplicar estilos ou scripts a eles.

- Span: É um elemento em linha (inline). Isso significa que não quebra a linha e ocupa apenas a largura necessária para o seu conteúdo. É usado para estilizar partes do texto dentro de um bloco maior.

1.2 Exemplo

<div style="background-color: lightblue; padding: 20px;">
<h2>Meu Título</h2>
<p>Este é um parágrafo com <span style="color: red;">parte do texto em vermelho</span>.</p>
</div>

Neste exemplo, o `<div>` cria uma seção com um fundo azul claro, enquanto o `<span>` altera a cor de uma parte do texto para vermelho.

2. Fieldsets

2.1 O que são?

Fieldset é uma tag usada principalmente dentro de formulários. Ele cria um contêiner para agrupar elementos relacionados, como campos de entrada. Isso ajuda na organização e na legibilidade do formulário.

2.2 Exemplo

<form>
<fieldset>
  <legend>Informações Pessoais</legend>
  Nome: <input type="text" name="name"><br>
  Email: <input type="email" name="email"><br>
</fieldset>
<input type="submit" value="Enviar">
</form>

Neste exemplo, o `<fieldset>` agrupa os campos de nome e email, enquanto a tag `<legend>` fornece um título para esse grupo.

Conclusão

Neste artigo, aprendemos sobre div, span e fieldset . Cada um desses elementos tem sua função específica e são fundamentais para organizar e apresentar o conteúdo de forma eficaz em uma página web. Com essas informações, você pode começar a estruturar suas próprias páginas de forma mais organizada e intuitiva.