HTML-<body> Tag

Definition und Verwendung

<body> Der Tag definiert den Inhalt des Dokuments.

Die Metadaten und Dokumentinformationen des HTML-Dokuments sind im head-Element verpackt, der Inhalt des Dokuments wird im body-Element verpackt.

Der body-Element ist immer direkt nach dem head-Element platziert und ist der zweite Unter-element des html-Elements.

<body> Der Element enthält den gesamten Inhalt des HTML-Dokuments, z.B. Titel, Absätze, Bilder, Hyperlinks, Tabellen, Listen, etc.

Hinweis:Ein HTML-Dokument kann nur ein <body> Element.

Beispiel

Ein einfaches aber vollständiges HTML-Dokument:

<!DOCTYPE html>
<html>
  <head>
    <title>Dokumenttitel</title>
  </head>
  <body>
    <h1>Dies ist ein Titel</h1>
    <p>Dies ist ein Absatz.</p>
  </body>
</html>

Try It Yourself

Tipp:Mehr Beispiele finden Sie am Ende der Seite.

Globale Attribute

<body> Der Tag unterstützt auch HTML-globale Attribute.

Event-Attribute

<body> Der Tag unterstützt auch HTML-Event-Attribute.

Standard-CSS-Einstellungen

Die meisten Browser verwenden die folgenden Standardwerte zur Anzeige <body> Element:

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

Try It Yourself

Mehr Beispiele

Beispiel 1

Fügen Sie eine Hintergrundbild zum Dokument hinzu (verwenden Sie CSS):

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

Try It Yourself

Beispiel 2

Legen Sie die Hintergrundfarbe des Dokuments fest (verwenden Sie CSS):

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

Try It Yourself

Beispiel 3

Legen Sie die Farbe des Textes der Dokument fest (verwenden Sie CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Dies ist ein Text.</p>
<p><a href="">Besuchen Sie codew3c.com!</a></p>
</body>
</html>

Try It Yourself

Beispiel 4

Set the color of unvisited links in the document (using 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 Tutorial</a></p>
</body>
</html>

Try It Yourself

Example 5

Set the color of active links in the document (using 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 Tutorial</a></p>
</body>
</html>

Try It Yourself

Example 6

Set the color of visited links in the document (using 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 Tutorial</a></p>
</body>
</html>

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support