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

Conteúdo do Curso

Essenciais de HTML

Essenciais de HTML

1. Compreendendo a Web e HTML
2. Fundamentos de HTML
3. Imagens e Mídia
4. Tabelas e Formulários
5. HTML Avançado

book
Estrutura 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:

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:

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:

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:

Estrutura resultante

Para concluir, vamos reunir todos os elementos que consideramos e combiná-los em um único documento 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>`?
Qual tag é o elemento raiz de um documento HTML?

Qual tag é o elemento raiz de um documento HTML?

Selecione a resposta correta

O que a tag `<head>` contém?

O que a tag <head> contém?

Selecione a resposta correta

O que a tag `<title>` define?

O que a tag <title> define?

Selecione a resposta correta

Qual é o propósito da tag `<body>`?

Qual é o propósito da tag <body>?

Selecione a resposta correta

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1
We're sorry to hear that something went wrong. What happened?
some-alt