HTML moderno: estrutura, semântica e acessibilidade
Você só precisa de um editor de texto e um navegador para criar uma página HTML. O objetivo desta aula é montar um arquivo mínimo, entender cada linha e adquirir um ciclo de trabalho simples: editar, salvar, recarregar e inspecionar.
Crie o arquivo
Abra seu editor, crie uma pasta para o projeto e salve um arquivo chamado index.html. Use UTF-8 e evite espaços ou acentos nos nomes de arquivos que irão para uma URL.
Escreva uma estrutura completa
O elemento <head> contém metadados; o <body> contém o que será apresentado ao visitante. O atributo lang informa o idioma principal às tecnologias assistivas.
<!doctype html>n<html lang="pt-BR">n<head>n <meta charset="utf-8">n <meta name="viewport" content="width=device-width, initial-scale=1">n <title>Meu projeto</title>n</head>n<body>n <main>n <h1>Olá, Web!</h1>n <p>Este é meu primeiro documento HTML.</p>n </main>n</body>n</html>Abra, inspecione e valide
Dê dois cliques no arquivo ou abra-o pelo navegador. Use “Inspecionar” para visualizar a árvore do documento e o console. A aba de acessibilidade ajuda a conferir nomes, funções e hierarquia. Para projetos maiores, use um servidor local para evitar diferenças de carregamento entre arquivos e HTTP.
Checklist de qualidade
- O arquivo usa a extensão
.html. - O título da aba é específico e descritivo.
- O texto continua legível com o zoom do navegador aumentado.
Pratique agora
Troque o título da aba, adicione dois parágrafos e um link. Depois, encontre esses elementos no inspetor do navegador.
