HTML <body> -elementet innehåller allt synligt innehåll i ett HTML-dokument. Det kan bara finnas ett <body> per HTML-dokument.

Vad är HTML <body> -taggen och vad används den till?

HTML <body> är ett HTML-element som används för att visa innehållet i ett dokument för användarna. Allt synligt innehåll, såsom rubriker, textblock, bilder, tabeller, hyperlänkar, listor och andra element, lagras i denna HTML-tagg. Det kan bara finnas en HTML <body> i varje dokument. Denna placeras alltid under <head> och ovanför HTML-sidfoten. Taggen <body> stöder alla globala HTML-attribut.

Vad är syntaxen och funktionaliteten för HTML <body>?

Innan vi visar hur HTML <body> fungerar med hjälp av några enkla exempel är det värt att ta en titt på elementets grundläggande syntax. Den ser ut som följer:

<body>This is where all the visible website content is stored.</body>
html

Endast innehåll mellan introduktionstaggen (<body>) och avslutningstaggen (</body>) kommer senare att visas på den relevanta webbsidan.

HTML <body> exempel

I följande exempel kan du se hur HTML <body> -taggen används i praktiken.

HTML-dokument med <body> enkla element

Först ska vi skapa ett enkelt HTML-dokument med en rubrik, en textsektion och en bild, som alla placeras i brödtexten. Här är motsvarande kod:

<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
</body>
</html>
html

Skapa en navigeringsfält med href

Följande exempel visar hur du skapar en navigeringsfält för din webbplats med hjälp av HTML <body> och attributet href. Här är koden:

<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Bädda in video via HTML <body> -taggen

Om du vill bädda in en video på din webbplats är avsnitt <body> det rätta (och enda) stället att göra det. Nedan följer ett exempel på hur du bäddar in en video:

<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
</body>
</html>
html

Ändra utformningen av innehåll via HTML <body> -taggen

Med hjälp av CSS kan du också använda området <body> för att anpassa utseendet på ditt webbinnehåll. Du kan se hur detta fungerar i följande exempel:

<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
</body>
</html>
html

Anpassa bakgrunder i HTML <body>

Om du vill ändra din HTML-bakgrund med CSS kan du också göra det i HTML <body>. Så här ställer du in bakgrundsfärgen:

<html>
<head>
<title>HTML body with new background colour</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html

För att infoga en bild, använd koden nedan:

<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html
Gå till huvudmeny