Estrutura do documento HTML

Introdução ao HTML / Tutorial HTML5

Conhecendo a estrutura de um documento HTML

Todo documento HTML deve seguir uma estrutura básica onde serão aplicadas as configurações da página assim como as tags e conteúdos.

Vejamos o exemplo a seguir:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Título da minha página</title>
  </head>
  <body>
    <p>Minha primeira página na web!</p>
  </body>
</html>

Analisando cada parte da estrutura:

Tag	Descrição
`<!DOCTYPE html>`	Define que o documento está no formato HTML5. É através dele que o navegador identifica como ler os elementos e apresentar a página.
`<html>`	É a raiz de todo documento HTML. Todo o restante do código deve estar dentro dessa tag.
`<head>`	Head significa "cabeça" em inglês, é onde fica a parte abstrata do documento. Dentro dessa tag são adicionadas informações de título, ícone, estilos, etc.
`<title>`	Especifica o título do documento (aquele título que fica na aba ou na janela do navegador).
`<body>`	Body significa "corpo" em inglês. É dentro dessa tag que construímos toda a parte visual do site, incluindo estrutura, conteúdo, imagens, links, etc.
`<p>`	Esse elemento é usado para marcar um parágrafo.

Espaços em branco no HTML

No HTML, os espaços em branco são ignorados pelo navegador. Isso permite que o código seja organizado e legível sem afetar a exibição do conteúdo.

Exemplo:

<p>O sabiá sabia assobiar.</p>
<p>O          sabiá
  sabia
  assobiar.</p>

No exemplo acima, ambos os parágrafos são interpretados da mesma forma.

Como manter os espaços em branco no HTML?

Em alguns casos, precisamos manter o espaço em branco. Isso pode ser feito através do elemento <pre>.

Exemplo:

<pre>O sabiá
  sabia
  assobiar.</pre>

Nota: Use o elemento <pre> apenas quando necessário. Para adicionar quebras de linha, prefira a tag <br>.

Entidades: Caracteres especiais do HTML

Os caracteres especiais são utilizados para compor a estrutura dos elementos: <, >, ", ' e &. Para exibi-los de forma correta no conteúdo de uma página, é necessário utilizar suas entidades.

Caractere	Entidade	Etimologia
`<`	`<`	Less than (menor que)
`>`	`>`	Greater than (maior que)
`'`	`'`	Apostrophe (apóstrofo)
`"`	`"`	Quote (aspas)
`&`	`&`	Ampersand (E comercial)

Exemplo de uso:

<p>Use &lt;p&gt; para parágrafos.</p>
<p>Seu código até que está &quot;bacaninha&quot;...</p>
<p>Mário &amp; Luigi</p>
<p>Bruno D&apos;Ávila</p>

Além de caracteres, entidades HTML também podem ser usadas para representar símbolos especiais:

Símbolo	Entidade
→	`→`
•	`•`
»	`»`
Ω	`Ω`
★	`&starf;`
♥	`&hearts;`
∞	`∞`

Criando uma linha horizontal:

O elemento <hr> é utilizado para adicionar um separador, uma linha horizontal entre seções de conteúdo.

Exemplo:

<p>Primeiro parágrafo.</p>
<hr>
<p>Segundo parágrafo.</p>

Comentários HTML

Os comentários servem para adicionar observações ou desativar partes do código sem removê-las. Eles são visíveis apenas no código-fonte e não aparecem na página interpretada.

Para adicionar comentários, insira o texto entre .

Exemplo:

<!-- Eis aqui um ditado popular -->
<p>Cão que ladra não morde.</p>

Comentários também são úteis para eliminar temporariamente partes do código sem excluí-las. Exemplo:

<p>Aqui aparece na tela.</p>
<!-- <p>NÃO aparece na tela.</p> -->

Também é possível usar os comentários com quebra de linha para explicações mais longas:

<p>Onde está a mensagem secreta?</p>
<!--
Quem corre demais na estrada,
Chega cedo e sem nada.
Paciência é a caminhada!
-->

Use os comentários sempre que achar necessário. Eles são essenciais para documentar o código e facilitar o trabalho em equipe, especialmente em projetos maiores.