O HTML descreve a estrutura de uma página da web para que o navegador possa transformar texto em um documento com títulos, parágrafos, links, listas e outros elementos. Ao carregar uma página, o navegador lê o HTML de cima para baixo, constrói uma árvore interna de elementos e, em seguida, renderiza essa estrutura em algo que você pode ver e com o qual pode interagir. O estilo geralmente vem do CSS e a interatividade, do JavaScript, mas o HTML é a base à qual ambos se conectam.
Para manter essa distinção clara, comece comparando o que o navegador renderiza com a marcação que o produziu.
Uma mesma página visível pode ser definida por diferentes tags, mas cada tag possui um significado específico. Um parágrafo aparece porque o HTML contém um elemento p, e um link é clicável porque um elemento a informa ao navegador que existe um destino de navegação. Se você alterar apenas o CSS, o conteúdo permanece o mesmo, embora a aparência mude, pois é o HTML que define qual é o conteúdo.
O HTML é composto por elementos, que são os componentes nomeados — como p e a — compreendidos pelo navegador. A maioria dos elementos é escrita utilizando uma tag de abertura, como <p>, e uma tag de fechamento, como </p>, com conteúdo entre elas. Alguns são elementos vazios e não envolvem conteúdo, como o img, que representa uma imagem ao apontar para um arquivo.
Elementos podem incluir atributos, que adicionam informações extras a um elemento e são escritos dentro da tag de abertura. Um atributo possui um valor, como href="https://example.com", e o navegador utiliza esse valor para determinar o comportamento — por exemplo, para onde um link aponta. Elementos também podem ser aninhados, o que significa que um elemento fica dentro de outro; essa relação de pai e filho influencia a estrutura e o significado.
Regra de aninhamento Se você esquecer uma tag de fechamento ou sobrepuser tags, o navegador tentará interpretar sua intenção, e o resultado renderizado poderá sofrer alterações inesperadas.
Uma página HTML completa começa com <!doctype html>, instruindo o navegador a utilizar o modo de padrões modernos. O elemento externo html engloba todo o documento, enquanto o head contém metadados utilizados pelo navegador e o body abriga o conteúdo que o navegador renderiza na página. O elemento title fica dentro do head e controla o texto da aba, não o conteúdo visível da página.