Tag HTML <body>

Falaremos sobre o corpo da tag Html neste post, desejando que satisfaça os requisitos de aprendizado.

A tag HTML <body> representa o conteúdo principal de um documento HTML e contém todo o conteúdo visível que é exibido no navegador da web.

A tag <body> é uma tag obrigatória em todo documento HTML e é colocada imediatamente após a tag <head>. O conteúdo da tag <body> é onde você normalmente colocaria todos os elementos HTML que compõem a parte visível de sua página da Web, como texto, imagens, links, formulários e outros elementos HTML.

Usos:

Alguns usos comuns da tag <body> incluem:

A tag <body> é onde você adicionaria todo o conteúdo visível em sua página da web, como texto, imagens, vídeos e outros elementos de mídia.
A tag <body> também é onde você criaria hiperlinks que permitem aos usuários navegar para outras páginas ou sites.
Se você precisar coletar informações do usuário em sua página da Web, como por meio de um formulário de contato ou de login, normalmente adicionará os elementos do formulário dentro da tag <body> .

O documento HTML básico é o seguinte:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Title of the html page.</title>
</head><body>
<h1>This is a heading 1</h1>
<p>And this is a paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Utilizando CSS, você pode adicionar uma imagem de fundo a um documento:

Background Image Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
body {background-image: url(mrx.png);
}
</style>
<h1>Test a document</h1>
<p><a href="https://mrexamples.com">Open mrexamples.com!</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O seguinte código CSS pode ser usado para definir a cor de fundo de um documento:

Background Color Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
body {
background-color: lightgrey;
}
</style>
<h1>Background Color example</h1>
<p><a href="https://mrexamples.com">Open mrexamples.com!</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O seguinte código CSS define a cor do texto em um documento:

Text Color Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
body {
color: blue;
}
</style>
<h1>Text color example</h1>
<p>This is paragraph text.</p>
<p><a href="https://mrexamples.com">Open mrexamples.com!</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os links não visitados podem ser coloridos (usando CSS) da seguinte forma:

Unvisited Links Color Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
a:link {
color:#000FFF;
}
</style>
<p><a href="https://mrexamples.com">mrexamples.com</a></p>
<p><a href="https://mrexamples.com/html/">Tag Body</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para definir a cor dos links ativos em um documento (usando CSS), siga estas etapas:

Active Link Color Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
a:active {
color:#00FF00;
}
</style>
<p><a href="https://mrexamples.com">mrexamples.com</a></p>
<p><a href="https://mrexamples.com/html/">Active link color</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando CSS, você pode alterar a cor dos links visitados em um documento:

Visited Links Color Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html><body><p>Example: 
Execute
</p>
<style>
a:visited {color:#FF0000;}
</style>
<p><a href="https://mrexamples.com">mrexamples.com</a></p>
<p><a href="https://mrexamples.com/html/">Visited Link Color</a></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag body com uma tag diferente dentro dela:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>Welcome to my Mr Examples</h1>
<p>This is the main content of my webpage.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Copyright 2023 Mr Examples</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <body>:

Usos e Definição

A Tag body < body > especifica o corpo em um documento.

Os documentos HTML incluem todos os tipos de conteúdo em seus corpos, como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas e listas .

Lembre-se: os documentos HTML podem conter apenas um elemento <body> por página.

Configurações padrão de CSS

Assim, muitos navegadores apresentarão os seguintes valores padrão para o elemento Tag body <body> :

body {
display: block;
margin: 8px;
}body:focus {
outline: none;
}

Compatibilidade do navegador

Elemento
<corpo>	Sim	Sim	Sim	Sim	Sim

Atributos Globais

O corpo da Tag <body> também funciona com os Atributos Globais em HTML.

Atributos do Evento

Os atributos de evento também são compatíveis com a tag <body> em HTML.<!–

Anúncio

–><!–

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

–>

Importância da tag <body>

Algumas das principais razões pelas quais a tag <body> é tão importante são:

A tag <body> ajuda a estruturar o conteúdo de uma página da Web, fornecendo um contêiner para todo o conteúdo visível da página. Isso facilita a organização e disposição do conteúdo da página e garante que a página seja bem estruturada e fácil de navegar.
A tag <body> é onde é colocado todo o conteúdo principal da página web, como texto, imagens, vídeos e outros elementos multimídia. Este é o conteúdo que é visto pelo usuário e é a razão pela qual ele está visitando a página em primeiro lugar.
A tag <body> também é importante para acessibilidade, pois permite que leitores de tela e outras tecnologias assistivas identifiquem a área de conteúdo principal da página. Isso garante que o conteúdo seja acessível a todos os usuários, incluindo aqueles com deficiência.
O conteúdo colocado dentro da tag <body> também é importante para otimização de mecanismo de busca (SEO). Os mecanismos de pesquisa usam o conteúdo dentro da tag <body> para determinar a relevância da página para consultas de pesquisa específicas e para classificar a página de acordo nos resultados da pesquisa.

Não se esqueça de deixar o seu feedback em forma de reação abaixo, como fonte de agradecimento ou sugestão para invocar melhorias neste site.

Nós valorizamos o seu feedback.

Tag HTML <body>

Usos:

Example:

Background Image Example:

Background Color Example:

Text Color Example

Unvisited Links Color Example:

Active Link Color Example

Visited Links Color Example

Example:

Usos e Definição

Configurações padrão de CSS

Compatibilidade do navegador

Atributos Globais

Atributos do Evento

Importância da tag <body>

Sentindo entediado?