Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Estrutura do Documento HTML Explicada | Fundamentos do HTML
Fundamentos de HTML

bookEstrutura 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>?

question mark

Qual tag é o elemento raiz de um documento HTML?

Select the correct answer

question mark

O que a tag <head> contém?

Select the correct answer

question mark

O que a tag <title> define?

Select the correct answer

question mark

Qual é a finalidade da tag <body>?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

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

bookEstrutura 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>?

question mark

Qual tag é o elemento raiz de um documento HTML?

Select the correct answer

question mark

O que a tag <head> contém?

Select the correct answer

question mark

O que a tag <title> define?

Select the correct answer

question mark

Qual é a finalidade da tag <body>?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1
some-alt