Imagine que a internet é uma enorme biblioteca. O HTML (HyperText Markup Language) é o esqueleto, a estrutura básica de todos os livros nessa biblioteca. Ele não se preocupa com a cor da capa ou o tipo de fonte (isso é trabalho do CSS), mas sim com a organização do conteúdo.
O HTML é uma linguagem de marcação. Isso significa que ele usa um conjunto de tags para dizer ao navegador como o conteúdo deve ser estruturado. Ele define o que é um título, um parágrafo, uma imagem, uma lista e assim por diante. Sem o HTML, a web seria apenas um monte de texto sem sentido e sem organização.
A base do HTML são as tags, que são palavras-chave envoltas por sinais de menor e maior (< e >). A maioria das tags funciona em pares: uma tag de abertura e uma tag de fechamento.
Por exemplo, para criar um parágrafo, usamos a tag <p>:
<p>Este é um parágrafo de texto.</p>
Tudo entre a tag de abertura (<p>) e a tag de fechamento (</p>) é considerado um elemento. O fechamento de uma tag sempre tem uma barra (/) antes do nome da tag.
Existem algumas tags que não precisam de um par de fechamento, como a tag para imagens (<img>) ou para quebras de linha (<br>). Elas são chamadas de tags de fechamento automático.
<img src="minha-foto.jpg">
O src acima é um atributo. Os atributos são informações adicionais que você pode colocar nas tags para modificar seu comportamento. Eles são sempre adicionados na tag de abertura e geralmente vêm em pares de nome="valor".
Toda página HTML segue uma estrutura padrão para que os navegadores possam entendê-la corretamente. É como o sumário de um livro.
Veja o esqueleto de uma página HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Título da Minha Página</title>
</head>
<body>
<h1>Bem-vindo à minha página!</h1>
<p>Aqui você vai encontrar conteúdo incrível.</p>
</body>
</html>
Vamos entender cada parte:
<!DOCTYPE html>: É a primeira linha de qualquer documento HTML. Ele diz ao navegador que a página foi escrita na versão HTML5.<html>: É o elemento "raiz" de toda a página. Tudo que pertence à sua página deve estar dentro dessa tag.<head>: A "cabeça" da página. Aqui ficam as informações sobre o documento que não aparecem diretamente na tela do usuário. O título da página (<title>), por exemplo, é exibido na aba do navegador. É também onde faremos a ligação com o CSS e o JavaScript.<body>: O "corpo" da página. Tudo o que o usuário realmente vê na tela — textos, imagens, botões, etc. — fica dentro dessa tag.