Um documento HTML é estruturado com base em "tags", que são elementos delimitados por sinais de menor e maior (< >). Essas tags organizam o conteúdo em estruturas hierárquicas, permitindo aos navegadores interpretar e exibir o conteúdo adequadamente. A base dessa estrutura inclui três principais elementos: <html>, <head>, e <body>. Cada um desses elementos desempenha um papel específico na construção da página, garantindo que o conteúdo seja apresentado e funcione corretamente nos navegadores.
<!DOCTYPE html>: Declaração do Tipo de DocumentoA declaração do tipo de documento é essencial para garantir que o navegador interprete a página como HTML5. Ela deve estar no topo do documento, antes de qualquer outra tag HTML. Esta declaração ajuda a garantir a consistência na forma como os navegadores exibem o conteúdo da web, seguindo os padrões atuais.
<html>: A Raiz do DocumentoO elemento <html> é o container que envolve todo o conteúdo de uma página web. Ele é o elemento raiz de um documento HTML e define o escopo de tudo o que é considerado parte do documento HTML. Todos os outros elementos HTML devem estar contidos dentro deste elemento.
lang: É uma boa prática incluir o atributo lang no elemento <html> para especificar o idioma principal do documento. Isso ajuda os leitores de tela e os mecanismos de busca a entenderem o idioma do conteúdo, melhorando a acessibilidade e SEO. Por exemplo: <html lang="pt-br">.<head>: Metadados do DocumentoO elemento <head> é destinado a conter metadados sobre o documento HTML, ou seja, informações sobre a página que não são diretamente visíveis para os usuários na área de visualização do navegador. Os metadados incluem o título da página, links para folhas de estilo CSS, scripts JavaScript, e outras instruções que afetam o processamento ou a apresentação da página.
<title>: Define o título da página, que é exibido na aba do navegador e é usado pelos mecanismos de busca. É um elemento crucial para SEO e usabilidade.<head> é o local apropriado para vincular folhas de estilo externas (<link rel="stylesheet" href="style.css">) e arquivos JavaScript (<script src="script.js"></script>).<body>: O Conteúdo VisívelO elemento <body> contém todo o conteúdo da página que é visível para os usuários, como texto, imagens, links, formulários, e outros elementos interativos. É dentro do <body> que a maior parte do trabalho de desenvolvimento web acontece, pois é aqui que você constrói a estrutura e o conteúdo que os usuários interagem diretamente.
<body>, é importante usar elementos HTML de forma semântica (como <header>, <footer>, <nav>, <section>, <article>, e outros) para estruturar o conteúdo de maneira lógica e acessível.<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
A compreensão desses três elementos fundamentais — <html>, <head>, e <body> — é essencial para qualquer pessoa que esteja começando a aprender HTML. Eles formam a espinha dorsal de qualquer documento web, estabelecendo uma estrutura básica sobre a qual todo o conteúdo e estilo são construídos. Uma estrutura de documento bem planejada não só facilita o desenvolvimento e a manutenção de sites, mas também melhora a acessibilidade, a usabilidade, e a eficácia do site em alcançar um público mais amplo.