As tags essenciais para fazer o HTML funcionar como esperado
(blog.jim-nielsen.com)- Para que uma página web seja exibida no navegador como esperado, é necessário incluir algumas tags HTML básicas
- `` garante a renderização em modo padrão, evitando erros no cálculo de layout
- `` melhora acessibilidade, busca e qualidade de tradução ao fornecer informações de idioma
econtrolam, respectivamente, a codificação de caracteres e a escala de exibição em dispositivos móveis- Essas tags não são apenas elementos de forma, mas componentes centrais para manter a consistência dos padrões da web e da experiência do usuário
Estrutura básica do HTML e visão geral das tags essenciais
- O texto foi escrito com inspiração na apresentação de Alex Petros, “Incantations that make HTML work correctly”
- O autor organiza um snippet básico que sempre deve ser incluído ao abrir um arquivo HTML diretamente no navegador
- A estrutura básica apresentada como exemplo é a seguinte
- Cada tag ajuda o navegador a interpretar e exibir o HTML de forma padronizada
- Se faltarem, o navegador pode entrar em modo não padrão (quirks mode), ou surgir problemas como caracteres quebrados e páginas reduzidas em telas móveis
`` — declaração de modo padrão
- `` é uma declaração que instrui o navegador a renderizar em modo padrão (standards mode)
- Sem essa declaração, o navegador muda para quirks mode, emulando comportamentos antigos e não padronizados de HTML
- Como resultado, os cálculos de layout, tamanho e alinhamento mudam, causando erros visuais inesperados
não diferencia maiúsculas de minúsculas, então formas comoou `` também são reconhecidas- O autor brinca que “se você quiser escrever markup no estilo de 1998, pode usar tudo em maiúsculas”
`` — definição do idioma do documento
- `` é a tag que declara o idioma padrão do documento
- Essa informação é usada por navegadores, mecanismos de busca, leitores de tela e várias outras ferramentas
- Principais exemplos de uso
- Leitores de tela escolhem a pronúncia e entonação corretas
- Mecanismos de busca melhoram a indexação e a precisão da tradução
- Recursos baseados em localidade, como correção ortográfica, podem ser aplicados
- Mesmo que omitir o atributo de idioma não pareça causar problemas visíveis na tela, ferramentas ao redor podem tratar o conteúdo de forma incorreta
- Por isso, é recomendável incluí-lo explicitamente no HTML
- Também é possível informar o idioma pelo cabeçalho de resposta do servidor, mas ao abrir arquivos locais diretamente, defini-lo no próprio HTML é mais seguro
- Exemplo de código
return new Response( "Hello world
- Exemplo de código
", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```
`` — definição da codificação de caracteres
- `` faz o navegador reconhecer a codificação de caracteres do documento
- Isso garante que caracteres não ASCII como é, ü, ñ, ©, ™, ®, … e 👍 sejam exibidos corretamente
- Sem essa tag, caracteres especiais ou aspas tipográficas podem aparecer corrompidos
- O autor cita como exemplo casos em que “aspas tipográficas (smart quotes)” aparecem quebradas em seu blog
- Comparação de exemplo
- Sem ``: caracteres especiais e emoji aparecem corrompidos
- Com a tag: todos os caracteres são exibidos normalmente
- O blog inclui imagens de captura de tela comparando os dois casos
`` — configuração da viewport móvel
- Essa tag controla a proporção da tela e o nível de zoom em navegadores móveis
- Se ela faltar, a página pode aparecer reduzida e muito pequena em dispositivos móveis
- O autor apresenta um caso em que “no desktop estava tudo certo, mas ao abrir no celular tudo parecia pequeno”, citando um exemplo de esquecimento da tag meta viewport
- A diferença é explicada visualmente com capturas de tela comparando a esquerda (sem a tag) e a direita (com a tag)
- Por isso, mesmo em protótipos simples, essa tag deve ser incluída para manter a proporção de layout esperada
Encerramento — o verdadeiro básico do HTML
- No fim, o autor faz uma piada dizendo que “esqueceu o snippet mais importante”
- Como exemplo, apresenta o seguinte código
- Como exemplo, apresenta o seguinte código
- Trata-se de uma menção satírica à estrutura de apps baseados em JavaScript muito comum no desenvolvimento web moderno
- No geral, o texto reforça que as tags básicas do HTML são elementos centrais para garantir o funcionamento padronizado da web
3 comentários
Se é essencial, por que não funciona por padrão? Enfim, a web é bem estranha. Tem um jeito de pensar bem peculiar.
Não seria por causa da retrocompatibilidade? Se simplesmente mudarem o comportamento padrão, algo que antes funcionava bem pode quebrar.
Opinião no Hacker News
document.compatModeEu uso um userscript para copiar facilmente o texto do elemento sob o mouse, mas no Quirks Mode ele funciona de forma instável Até dá para forçar a troca comdocument.write("" + document.documentElement.innerHTML), mas isso reinicializa o documento inteiro e causa problemas Fico me perguntando se existe uma forma mais limpa de forçar o Standards Mode do ponto de vista do usuáriodangmelhorasse um pouco a usabilidade do HN O tamanho de fonte padrão é algo em torno de 12px, então parece pequeno demais na maioria dos dispositivos modernos O CSS também aparentemente continua usando o código antigo publicado há cerca de 13 anos