A Tag <html>: O Início de Tudo (E o Atributo Oculto do SEO)
Agora que você já aprendeu no nosso tutorial anterior o que são tags e como elas funcionam como "etiquetas" para o navegador, chegou a hora de colocar a mão na massa. Vamos começar a apresentar as tags mais importantes do Front-End.
E nada mais justo do que começarmos pelo começo: o elemento raiz. Vamos dissecar a tag <html>.
O que é a Tag <html>? (O Elemento Raiz)
O que é a tag html? A tag <html> é o elemento raiz de uma página web. Ela envolve absolutamente todo o conteúdo do site e informa ao navegador que o documento inteiro deve ser interpretado e renderizado como um código HTML válido, servindo de base para o DOM.
O par <html> e </html> vem, na gigantesca maioria dos casos, logo na linha 2 do seu documento, imediatamente após a nossa velha conhecida, a declaração <!DOCTYPE html>.
Você pode se perguntar: "Ué, se nós já avisamos no DOCTYPE que o documento é HTML, por que precisamos abrir uma tag <html>? Isso não é óbvio?"
Na verdade, não. Há uns 20 anos, eu concordaria com você, pois as páginas de internet eram praticamente blocos de texto em HTML puro. Porém, hoje em dia, 99,99% das páginas da web são uma mistura complexa de tecnologias:
- HTML interagindo com CSS (para o design).
- HTML rodando scripts de JavaScript (para interatividade).
- HTML recebendo dados dinâmicos do PHP, Java, Python ou Node.js.
Ou seja, embora o HTML sozinho construa a página, todas essas outras linguagens precisam do HTML como hospedeiro. Se você quiser se tornar um desenvolvedor Front-End ou Full-Stack de respeito, não adianta pular etapas e tentar aprender frameworks como React ou Angular antes de dominar a base estrutural.
Quer parar de "chutar" códigos e entender o que está fazendo?
Aprenda a base sólida do Front-End. Transforme a criação de sites em uma profissão rentável e conquiste o mercado com nosso material exclusivo.
"Eu achava que precisava decorar tudo, mas a apostila me ensinou a pensar como um programador de verdade. Hoje faço layouts do zero!" - Rafael, Desenvolvedor Web.🚀 Baixar a Apostila Digital (PDF)
📚 Prefere estudar no papel? Compre o Livro Físico
A anatomia do código: Escrevendo sua primeira página
Vamos criar o nosso primeiro site super simples que exiba uma mensagem na tela, colocando os elementos que já aprendemos na prática.
<!DOCTYPE html>
<html>
Estou aprendendo a criar sites!<br>
Tudo isso graças ao portal Programação Progressiva!
</html>Resultado no Navegador:
Estou aprendendo a criar sites!Tudo isso graças ao portal Programação Progressiva!
O Segredo de Ouro: O atributo lang (Bônus de SEO)
Embora o código acima funcione, nós do Programação Progressiva não queremos que você seja um programador mediano. Queremos que você crie códigos de alto nível. E aqui entra um detalhe moderno que não existia nas versões antigas do HTML: a definição de idioma.
Para ajudar os motores de busca (como o Google) a ranquearem seu site no país certo, e para ajudar leitores de tela (acessibilidade para deficientes visuais) a pronunciarem as palavras corretamente, você deve sempre adicionar o atributo lang dentro da tag <html>.
<!-- pt-BR significa Português do Brasil -->
<html lang="pt-BR">
Conteúdo do seu site aqui...
</html>lang="en". Se o Google detectar que seu site está em português, mas a tag html estiver configurada como inglês, ele pode exibir aquele popup chato de "Deseja traduzir esta página?" para usuários nativos, o que arruina a experiência (UX).
Letras maiúsculas ou minúsculas? A regra do Case Sensitive
Na época do finado XHTML (que era extremamente rigoroso), escrever uma tag com letra maiúscula fazia o seu site quebrar. Hoje, graças à flexibilidade do HTML5, a linguagem não é case sensitive (não diferencia maiúsculas de minúsculas).
Ou seja, para o navegador, não importa se você escreve:
<html><HTML>- Ou a versão mIguXaaH da internet dos anos 2000:
<HtMl>
🏋️ Exercício Prático: Site de Letra de Música
A teoria só vira conhecimento através da prática. Sua missão é a seguinte:
- Abra o seu Bloco de Notas ou VS Code.
- Crie um site que exiba no navegador a letra da sua música favorita.
- Seja profissional: use o
<!DOCTYPE html>na linha 1. - Abra a tag
<html lang="pt-BR">e a feche no final. - Lembre-se de usar a tag
<br>para criar a quebra de linha após cada verso/frase da letra.
P.S.: E por favor, evite colocar as letras da banda Restart! (A nostalgia bateu forte agora, hein?).
Perguntas Frequentes (FAQ)
1. Posso colocar conteúdo fora da tag html?
A única coisa que deve ficar fora (e antes) da tag <html> é a declaração <!DOCTYPE html>. Todo o resto (textos, imagens, links, scripts) deve obrigatoriamente estar encapsulado dentro da tag de abertura e fechamento do html. Se você colocar fora, o navegador tentará corrigir o erro forçando o conteúdo para dentro, mas isso é considerado uma péssima prática.
2. O que acontece se eu esquecer o atributo lang?
Seu site vai funcionar normalmente na tela, mas você perderá pontos cruciais de acessibilidade (leitores de tela não saberão com qual sotaque ler o texto para um deficiente visual) e os motores de busca (Google, Bing) terão mais dificuldade para categorizar o idioma principal do seu site, o que pode prejudicar o seu rankeamento orgânico.
3. Qual a diferença entre a tag html e o head/body?
A tag <html> é o contêiner mestre (a raiz). Dentro dela, o documento se divide em duas partes vitais: a tag <head> (que guarda as configurações invisíveis, como título e links de CSS) e a tag <body> (que guarda tudo o que é visível para o usuário na tela do navegador).
📚 O que estudar a seguir:
Agora que você entende o elemento raiz do HTML, seu próximo passo é entender como dividir esse documento. Prepare-se para estudar:
- A tag
<head>: O cérebro invisível do seu site. - A tag
<body>: Construindo a parte visual da página. - A tag
<title>: Como colocar o nome do seu site na aba do navegador.
Nenhum comentário:
Postar um comentário