Introdução ao HTML

Estruturando o HTML

As tags HTML são responsaveis por dar corpo ao seu site, algumas delas podem ser usandas dentro de outras tags, por exemplo:

<div>
  <p>Hello World</p>
</div>

Se você escrever esse código la no nosso CodePen vai perceber que não tem diferença nenhuma do primeiro e segundo exemplo da nossa aula anterior, isso acontece porque a tag div nada mais é que uma tag de divisão, uma especie de caixa onde podemos colocar nossos elementos para que eles não se misturem com outros elementos.

Outros exemplos que usamos muito tag dentro de tag é quando vamos fazer listas, formularios e tabelas.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<form>
  <input type="text" />
  <button>Enviar</button>
</form>

<table>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>João</td>
    <td>20</td>
  </tr>
</table>

Experimente criar esses exemplos no CodePen e veja o resultado.

Nem tudo pode ser colocado dentro de tudo

É importante saber que nem tudo pode ser colocado dentro de tudo, por exemplo, não podemos colocar uma tag p dentro de uma tag ul ou uma tag li dentro de uma tag form.

Perceba que os exemplos abaixo, mesmo que funcionem, semanticamente estão errados, isso acontece porque o HTML não limita o uso das tags, mas o comportamento delas no seu site pode não funcionar como você espera.

<ul>
  <p>Item 1</p>
  <p>Item 2</p>
</ul>

<form>
  <li>Item 1</li>
  <li>Item 2</li>
</form>

Respeitando a Hierarquia das Tags

Agora que você já tem uma ideia de como aninhar tags dentro de outras tags, é crucial entender a importância de abrir e fechar essas tags na ordem certa. A estrutura do HTML é hierárquica e deve ser respeitada para evitar erros e comportamentos inesperados.

A Regra do Aninhamento

Imagine que você tem uma série de caixas, uma dentro da outra. Para acessar a caixa mais interna, você precisa abrir todas as caixas externas primeiro. O mesmo vale para fechar: você precisa fechar a caixa mais interna antes de fechar as externas.

Isso se reflete na forma como você deve abrir e fechar tags HTML. A última tag aberta deve ser a primeira a ser fechada, criando assim um efeito de "pilha".

👉 Correto

<div>
  <p>
    <span>Texto</span>
  </p>
</div>

👎 Incorreto

<div>
  <p>
    <span>Texto</p>
  </span>
</div>

Visualizando com Indentação

A indentação do código pode ser um grande aliado na hora de entender e manter a hierarquia das tags. Cada nível de aninhamento deve ter uma indentação para tornar a estrutura clara.

<!-- Bem indentado -->
<div>
  <p>
    <span>Texto</span>
  </p>
</div>

<!-- Mal indentado -->
<div>
<p>
<span>Texto</span>
</p>
</div>

Ferramentas de Validação

Se você não tiver certeza sobre a estrutura do seu HTML, existem ferramentas de validação online que podem verificar se o seu código segue os padrões corretos. Um exemplo popular é o Validador HTML do W3C.

Exercício

Experimente criar uma div e dentro dela colocar um titulo h1 com o seu nome e um paragrafo p com sua idade e a cidade onde você mora.