# Hva er HTML-kroppen og hvordan bruker man den?

`<body>` -elementet inneholder alt synlig innhold i et HTML-dokument. Det kan bare være ett `<body>` per HTML-dokument.

## Hva er HTML `<body>` -taggen, og hva brukes den til?

HTML `<body>` er et HTML-element som brukes til å vise innholdet i et dokument til brukerne. Alt **synlig innhold**, som overskrifter, tekstblokker, bilder, tabeller, hyperkoblinger, lister og andre elementer, lagres i denne HTML-taggen. Det kan bare være **én HTML `<body>`** i hvert dokument. Denne plasseres alltid under `<head>` og over HTML-bunnteksten. `<body>` støtter alle globale HTML-attributter.

## Hva er syntaksen og funksjonaliteten til HTML `<body>`?

Før vi viser deg hvordan HTML `<body>` fungerer ved hjelp av noen enkle eksempler, er det verdt å ta en titt på elementets grunnleggende syntaks. Denne ser slik ut:

```html
<body>This is where all the visible website content is stored.<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

Bare innhold mellom innledende (`<body>`) og avsluttende (`<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>`) tagger vil senere vises på den relevante nettsiden.

## HTML `<body>` eksempler

I de følgende eksemplene kan du se hvordan `<body>` 19-taggen brukes i praksis.

### HTML-dokument med `<body>` enkle elementer

Først skal vi lage et enkelt HTML-dokument med en **overskrift, en tekstdel og et bilde**, som alle plasseres i brødteksten. Dette er den tilhørende koden:

```html
<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">
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Opprette en navigasjonslinje med href

Følgende eksempel viser hvordan du oppretter en navigasjonslinje for nettstedet ditt ved hjelp av `<body>` -taggen og href -attributtet. Her er koden:

```html
<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>
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Innebygging av video via HTML `<body>` 22-taggen

Hvis du vil legge inn en video på nettstedet ditt, er seksjon `<body>` det riktige (og eneste) stedet å gjøre det. Nedenfor er et eksempel på hvordan du legger inn en video:

```html
<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>
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Endre utformingen av innhold via HTML `<body>` -taggen

Ved hjelp av CSS kan du også bruke området `<body>` til å tilpasse utformingen av nettinnholdet ditt. Du kan se hvordan dette fungerer i følgende eksempel:

```html
<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>
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Tilpasse bakgrunner i HTML `<body>`

Hvis du vil endre [HTML-bakgrunnen](https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/html-bakgrunner/) med CSS, kan du også gjøre det i HTML `<body>`. Slik angir du bakgrunnsfargen:

```html
<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>
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

For å sette inn et bilde, bruk koden nedenfor:

```html
<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>
<div class="hash d-none" hidden>hash_d027c12c04cf447e2df98134c014b42f7a99d489</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```


This is a markdown version of: [https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/html-broedtekst/](https://www.ionos.com/nb-no/digitalguide/nettsteder/webutvikling/html-broedtekst/) for AI/LLM consumption.