HTML <body> Tag

Definition och användning

<body> Taggen definierar dokumentets huvud.

Metadata och dokumentinformation för HTML-dokumentet är inrymda i head-elementet, medan innehållet är inrymt i body-elementet.

body-elementet följer alltid efter head-elementet och är den andra underkomponenten till html-elementet.

<body> Elementet innehåller all innehåll i HTML-dokumentet, till exempel rubriker, paragrafer, bilder, länkar, tabeller, listor och så vidare.

Observera:Det kan bara finnas ett element i en HTML-dokument <body> Element.

Exempel

En enkel men fullständig HTML-dokument:

<!DOCTYPE html>
<html>
  <head>
    <title>Dokumentrubrik</title>
  </head>
  <body>
    <h1>Detta är en rubrik</h1>
    <p>Detta är en paragraf.</p>
  </body>
</html>

Prova själv

Tips:Mer exempel finns tillgängliga på sidan botten.

Globala egenskaper

<body> Etiketterna stöder också Globala egenskaper i HTML.

evenementegenskaper

<body> Etiketterna stöder också Evenementegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för visning <body> Element:

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

Prova själv

Mer exempel

Exempel 1

Lägg till bakgrundsbild till dokumentet (använd CSS):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">Besök codew3c.com!</a></p>
</body>

Prova själv

Exempel 2

Ställ in dokumentets bakgrundsfärg (använd CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">Besök codew3c.com!</a></p>
</body>

Prova själv

Exempel 3

Ställ in dokumentets textfärg (använd CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Detta är en text.</p>
<p><a href="">Besök codew3c.com!</a></p>
</body>
</html>

Prova själv

Exempel 4

Ställ in färgen för inte besökta länkar i dokumentet (använd CSS):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML-lärord</a></p>
</body>
</html>

Prova själv

Exempel 5

Ställ in färgen för aktiva länkar i dokumentet (använd CSS):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML-lärord</a></p>
</body>
</html>

Prova själv

Exempel 6

Ställ in färgen för besökta länkar i dokumentet (använd CSS):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML-lärord</a></p>
</body>
</html>

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd