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

bookEstrutura do Documento HTML

Primeiramente, exploramos a estrutura de um documento HTML.

Estrutura do Documento HTML

Cada documento HTML deve seguir uma estrutura consistente. Os elementos delineados aqui estabelecem a base para organizar o conteúdo, definir a estrutura da página e melhorar 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> marca o fim.
Exemplo:

<html>
  <!-- Other elements go here -->
</html>

tag head

A tag <head> contém meta-informações sobre o documento HTML, como título, codificação de caracteres e recursos externos como folhas de estilo e scripts. Ela não contém conteúdo diretamente visível para o 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. Ele é exibido na barra de título do navegador ou na aba do navegador. O título de uma página oferece uma visão geral de seu conteúdo, facilitando para os usuários entender o propósito da página e navegar por várias abas de forma mais eficiente;
  • <meta charset="UTF-8"> é responsável por especificar a codificação de caracteres usada em um documento HTML. Essa codificação de caracteres determina como os navegadores interpretam e exibem o texto;
  • Algumas meta tags comuns incluem:
    • <meta name="description" content="Breve descrição da página">: Fornece uma descrição concisa do conteúdo da página, que pode aparecer nos resultados dos motores de busca;
    • <meta name="keywords" content="palavra-chave1, palavra-chave2, ...">: Especifica palavras-chave relevantes para o conteúdo da página, ajudando a melhorar a otimização para motores de busca (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Define as configurações de viewport para design responsivo, garantindo o dimensionamento adequado em diferentes dispositivos.

tag body

A tag <body> contém o conteúdo principal visível para os usuários em uma página web. Este conteúdo é composto por 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 o navegador da web sobre a versão do HTML usada no documento. Esta declaração garante que o navegador da web 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 consideramos 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, você pode ver como o documento HTML aparece no navegador da 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 é o propósito 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 é o propósito 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:

Pergunte-me perguntas sobre este assunto

Resumir este capítulo

Mostrar exemplos do mundo real

Awesome!

Completion rate improved to 3.13

bookEstrutura do Documento HTML

Deslize para mostrar o menu

Primeiramente, exploramos a estrutura de um documento HTML.

Estrutura do Documento HTML

Cada documento HTML deve seguir uma estrutura consistente. Os elementos delineados aqui estabelecem a base para organizar o conteúdo, definir a estrutura da página e melhorar 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> marca o fim.
Exemplo:

<html>
  <!-- Other elements go here -->
</html>

tag head

A tag <head> contém meta-informações sobre o documento HTML, como título, codificação de caracteres e recursos externos como folhas de estilo e scripts. Ela não contém conteúdo diretamente visível para o 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. Ele é exibido na barra de título do navegador ou na aba do navegador. O título de uma página oferece uma visão geral de seu conteúdo, facilitando para os usuários entender o propósito da página e navegar por várias abas de forma mais eficiente;
  • <meta charset="UTF-8"> é responsável por especificar a codificação de caracteres usada em um documento HTML. Essa codificação de caracteres determina como os navegadores interpretam e exibem o texto;
  • Algumas meta tags comuns incluem:
    • <meta name="description" content="Breve descrição da página">: Fornece uma descrição concisa do conteúdo da página, que pode aparecer nos resultados dos motores de busca;
    • <meta name="keywords" content="palavra-chave1, palavra-chave2, ...">: Especifica palavras-chave relevantes para o conteúdo da página, ajudando a melhorar a otimização para motores de busca (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Define as configurações de viewport para design responsivo, garantindo o dimensionamento adequado em diferentes dispositivos.

tag body

A tag <body> contém o conteúdo principal visível para os usuários em uma página web. Este conteúdo é composto por 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 o navegador da web sobre a versão do HTML usada no documento. Esta declaração garante que o navegador da web 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 consideramos 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, você pode ver como o documento HTML aparece no navegador da 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 é o propósito 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 é o propósito 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