Estrutura do Documento HTML Explicada
Primeiramente, exploramos a estrutura de um documento HTML.
Estrutura do Documento HTML
Todo documento HTML deve seguir uma estrutura consistente. Os elementos apresentados aqui estabelecem a base para organizar o conteúdo, definir a estrutura da página e aprimorar a experiência do usuário na web.
tag html
A tag <html>
é o elemento raiz de um documento HTML. Todos os outros elementos serão escritos dentro dela. A tag de abertura <html>
marca o início do documento HTML, enquanto a tag de fechamento </html>
indica o final.
Exemplo:
<html>
<!-- Other elements go here -->
</html>
tag head
A tag <head>
contém metainformações sobre o documento HTML, como título, codificação de caracteres e recursos externos, como folhas de estilo e scripts. Não contém conteúdo diretamente visível ao usuário na página web.
Exemplo:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Explicação:
- A tag
<title>
define o título de uma página web. É exibido na barra de título do navegador ou na aba do navegador. O título de uma página fornece uma visão geral do seu conteúdo, facilitando para os usuários entenderem o propósito da página e navegarem entre várias abas de forma mais eficiente; <meta charset="UTF-8">
é responsável por especificar a codificação de caracteres utilizada em um documento HTML. Essa codificação determina como os navegadores interpretam e exibem o texto;- Algumas meta tags comuns incluem:
<meta name="description" content="Brief description of the page">
: Fornece uma descrição concisa do conteúdo da página, que pode aparecer nos resultados de mecanismos de busca;<meta name="keywords" content="keyword1, keyword2, ...">
: Especifica palavras-chave relevantes para o conteúdo da página, auxiliando na otimização para mecanismos de busca (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Define as configurações de viewport para design responsivo, garantindo a escala adequada em diferentes dispositivos.
tag body
A tag <body>
contém o conteúdo principal visível aos usuários em uma página web. Esse conteúdo inclui texto, imagens, links, formulários e outros elementos com os quais os usuários podem interagir ao visitar o site. Essencialmente, a tag <body>
contém o que os usuários veem e com o que interagem ao navegar em um site.
Exemplo:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Declaração do tipo de documento
A declaração do tipo de documento informa ao navegador qual versão do HTML está sendo utilizada no documento. Essa declaração garante que o navegador renderize corretamente o documento seguindo o padrão HTML especificado. Para documentos HTML5, a declaração do tipo de documento é <!DOCTYPE html>
.
Exemplo:
<!DOCTYPE html>
Estrutura resultante
Para concluir, vamos reunir todos os elementos que analisamos e combiná-los em um único documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Abaixo, é possível visualizar como o documento HTML aparece no navegador web.
Tutorial em Vídeo
1. Qual tag é o elemento raiz de um documento HTML?
2. O que a tag <head>
contém?
3. O que a tag <title>
define?
4. Qual é a finalidade da tag <body>
?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain more about the purpose of the head and body tags?
What is the significance of the doctype declaration in HTML?
Are there any other important tags I should know about in a basic HTML document?
Awesome!
Completion rate improved to 3.13
Estrutura do Documento HTML Explicada
Deslize para mostrar o menu
Primeiramente, exploramos a estrutura de um documento HTML.
Estrutura do Documento HTML
Todo documento HTML deve seguir uma estrutura consistente. Os elementos apresentados aqui estabelecem a base para organizar o conteúdo, definir a estrutura da página e aprimorar a experiência do usuário na web.
tag html
A tag <html>
é o elemento raiz de um documento HTML. Todos os outros elementos serão escritos dentro dela. A tag de abertura <html>
marca o início do documento HTML, enquanto a tag de fechamento </html>
indica o final.
Exemplo:
<html>
<!-- Other elements go here -->
</html>
tag head
A tag <head>
contém metainformações sobre o documento HTML, como título, codificação de caracteres e recursos externos, como folhas de estilo e scripts. Não contém conteúdo diretamente visível ao usuário na página web.
Exemplo:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Explicação:
- A tag
<title>
define o título de uma página web. É exibido na barra de título do navegador ou na aba do navegador. O título de uma página fornece uma visão geral do seu conteúdo, facilitando para os usuários entenderem o propósito da página e navegarem entre várias abas de forma mais eficiente; <meta charset="UTF-8">
é responsável por especificar a codificação de caracteres utilizada em um documento HTML. Essa codificação determina como os navegadores interpretam e exibem o texto;- Algumas meta tags comuns incluem:
<meta name="description" content="Brief description of the page">
: Fornece uma descrição concisa do conteúdo da página, que pode aparecer nos resultados de mecanismos de busca;<meta name="keywords" content="keyword1, keyword2, ...">
: Especifica palavras-chave relevantes para o conteúdo da página, auxiliando na otimização para mecanismos de busca (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Define as configurações de viewport para design responsivo, garantindo a escala adequada em diferentes dispositivos.
tag body
A tag <body>
contém o conteúdo principal visível aos usuários em uma página web. Esse conteúdo inclui texto, imagens, links, formulários e outros elementos com os quais os usuários podem interagir ao visitar o site. Essencialmente, a tag <body>
contém o que os usuários veem e com o que interagem ao navegar em um site.
Exemplo:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Declaração do tipo de documento
A declaração do tipo de documento informa ao navegador qual versão do HTML está sendo utilizada no documento. Essa declaração garante que o navegador renderize corretamente o documento seguindo o padrão HTML especificado. Para documentos HTML5, a declaração do tipo de documento é <!DOCTYPE html>
.
Exemplo:
<!DOCTYPE html>
Estrutura resultante
Para concluir, vamos reunir todos os elementos que analisamos e combiná-los em um único documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Abaixo, é possível visualizar como o documento HTML aparece no navegador web.
Tutorial em Vídeo
1. Qual tag é o elemento raiz de um documento HTML?
2. O que a tag <head>
contém?
3. O que a tag <title>
define?
4. Qual é a finalidade da tag <body>
?
Obrigado pelo seu feedback!