HTML body: O elemento HTML para conteúdos visíveis
No elemento HTML <body>
estão contidos todos os conteúdos visíveis de um documento HTML. Em cada documento, pode existir apenas uma única área <body>
.
O que é a tag HTML <body>
e para que ela é usada?
A tag HTML <body>
é um elemento HTML utilizado para exibir o conteúdo de um documento. Todos os conteúdos visíveis, como cabeçalhos, blocos de texto, imagens, tabelas, hiperlinks, listas e outros elementos possíveis, são armazenados dentro dessa tag HTML. Em cada documento, pode haver apenas uma tag <body>
. Ela fica sempre abaixo do elemento <head> e acima do HTML footer. A tag <body>
suporta todos os atributos globais HTML.
Rápido e escalável, confie na hospedagem da IONOS, que inclui domínio grátis no primeiro ano e endereço de e-mail!
- Domínio
- SSL Wildcard
- Suporte 24 horas
HTML <body>
: Sintaxe e funcionamento
Antes de mostrar como a tag HTML <body>
funciona com alguns exemplos simples, vale a pena dar uma olhada na sintaxe básica desse elemento. Ela é a seguinte:
<body>
Aqui ficam armazenados todos os conteúdos visíveis do site.</body>
Somente o conteúdo entre a tag de abertura (<body>
) e a tag de fechamento (</body>) será exibido posteriormente na página.
Exemplos de uso da tag HTML <body>
Nos exemplos abaixo, mostramos como aplicar a tag HTML <body>
na prática.
Documento HTML com um simples elemento <body>
Primeiro, criamos um documento HTML simples com um cabeçalho, um parágrafo de texto e uma imagem, todos inseridos dentro do corpo. O código correspondente é:
<html>
<head>
<title>HTML body em um documento</title>
</head>
<body>
<h1>Este é o seu cabeçalho</h1>
<p>Aqui está o conteúdo do seu site.</p>
<img src="exemplo.jpg" alt="Aqui é exibida uma imagem">
</body>
</html>
htmlCriar barra de navegação com href
No próximo exemplo, mostramos como criar uma barra de navegação para seu site utilizando a tag HTML <body>
e o atributo href. O código adequado é o seguinte:
<!DOCTYPE html>
<html>
<head>
<title>Site com barra de navegação</title>
</head>
<body>
<nav>
<a href="#home">Início</a> |
<a href="#about">Sobre</a> |
<a href="#contact">Contato</a>
</nav>
<section id="home"><h2>Início</h2></section>
<section id="about"><h2>Sobre</h2></section>
<section id="contact"><h2>Contato</h2></section>
</body>
</html>
htmlInserir vídeo pela tag HTML <body>
Se você deseja adicionar um vídeo ao seu site, o corpo do documento é o local apropriado para exibi-lo. Veja abaixo um exemplo de código para inclusão de vídeo:
<!DOCTYPE html>
<html>
<head>
<title>Site com um vídeo</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="exemplovideo.mp4" type="video/mp4">
</video>
</body>
</html>
htmlAlterar design pela tag HTML <body>
Com o uso de CSS, você pode também usar a tag <body>
para ajustar o design do conteúdo do seu site. Veja como fazer isso no exemplo a seguir:
<!DOCTYPE html>
<html>
<head>
<title>HTML body com ajustes visuais</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p>Aqui está o conteúdo do seu site.</p>
</body>
</html>
htmlAjustando o fundo no HTML <body>
Se você deseja alterar apenas o background no HTML, isso também é feito no <body>
. Veja como definir a cor de fundo:
<!DOCTYPE html>
<html>
<head>
<title>HTML body com nova cor de fundo</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p><a href="https://www.exemplosite.com">Visite o Exemplosite.com!</a></p>
</body>
</html>
htmlSe você preferir adicionar uma imagem de fundo, use o código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>HTML body com nova imagem de fundo</title>
<style>
body {
background-image: url(exemplo.png);
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p><a href="https://www.exemplosite.com">Visite o Exemplosite.com!</a></p>
</body>
</html>
htmlConstrua sua própria marca com um grande domínio, que inclui SSL e consultor pessoal!
- Registro privado
- Suporte 24 horas