HTML <body> -elementet in­ne­hål­ler 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 in­ne­hål­let i ett dokument för an­vän­dar­na. Allt synligt innehåll, såsom rubriker, textblock, bilder, tabeller, hy­per­län­kar, 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 funk­tio­na­li­te­ten 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å ele­men­tets grund­läg­gan­de syntax. Den ser ut som följer:

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

Endast innehåll mellan in­tro­duk­tions­tag­gen (<body>) och av­slut­ningstag­gen (</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 text­sek­tion och en bild, som alla placeras i bröd­tex­ten. Här är mot­sva­ran­de 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 na­vi­ge­rings­fält med href

Följande exempel visar hur du skapar en na­vi­ge­rings­fält för din webbplats med hjälp av HTML <body> och at­tri­bu­tet 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 ut­form­ning­en 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 web­bin­ne­hå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 bak­grun­der 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 bak­grunds­fär­gen:

<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