O que é HTML?

A estrutura e o significado do documento

HTML significa HyperText Markup Language, ou linguagem de marcação de hipertexto. Ele descreve a estrutura e o significado do conteúdo de uma página. Um título identifica uma seção, e um link indica o endereço que o navegador pode abrir. Formulários marcam os campos e controles usados para enviar informações.

Quando você abre uma página de cadastro, o navegador precisa reconhecer quais partes são campos e qual controle envia o formulário. A marcação fornece essas informações. CSS pode definir a aparência, e JavaScript pode acrescentar comportamento, mas os elementos HTML já oferecem funções próprias.

Um link permite navegar, e um botão pode enviar um formulário. Um campo recebe texto, e o navegador já oferece foco e ativação pelo teclado a esses controles quando você escolhe o elemento conforme sua função.

Elementos, atributos e hierarquia

Um elemento é uma parte do documento identificada pela marcação. A tag de abertura pode conter atributos que configuram essa parte. Alguns elementos também têm conteúdo e tag de fechamento, enquanto outros, como input, não possuem fechamento separado.

A hierarquia indica como os elementos se relacionam, como no formulário que contém rótulos, campos e um botão de envio. Ao interpretar a marcação, o navegador constrói o DOM, uma representação dessa estrutura que ferramentas e scripts podem consultar ou modificar.

<form action="/contato" method="post">
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" required>
<button type="submit">Enviar</button>
</form>

No exemplo, for="nome" associa o rótulo ao campo identificado por id="nome", enquanto name="nome" define o nome usado no envio do valor preenchido. O atributo required solicita uma verificação de preenchimento no navegador, mas o servidor ainda precisa validar a entrada recebida.

O que esse formulário faz

O formulário nativo pode funcionar sem JavaScript. A linguagem de marcação também oferece outros comportamentos, como navegação por links e expansão de conteúdo com details. A necessidade de scripts depende da interação adicional desejada.

Semântica e aparência

Um título marcado com h2 informa uma seção do documento. Aumentar uma div com CSS pode produzir aparência semelhante, mas não concede automaticamente a mesma semântica. Tecnologias assistivas e ferramentas de leitura utilizam essa estrutura.

O navegador também aplica estilos padrão aos elementos. Portanto, a escolha da marcação pode afetar a aparência inicial, mesmo sem uma folha CSS própria. Você pode modificar a apresentação preservando o significado adequado de cada elemento.

Como conferir o HTML interpretado

Na aba Elements, examine a árvore montada pelo navegador. Ela pode diferir do texto original quando há marcação inválida, correções do parser ou alterações feitas por JavaScript. Ver apenas o arquivo fonte não revela necessariamente o estado atual do documento.

Confira a associação dos rótulos, a ordem dos títulos e o uso pelo teclado. Um documento sintaticamente aceito ainda pode ter problemas de compreensão ou acessibilidade. O verbete de CSS explica como a apresentação se aplica à estrutura.

Aplicação na formação

Vibe Coding: Do Zero ao MVP

HTML marca títulos, campos e formulários para que o navegador apresente a página como um documento navegável.

Conhecer a formação →