HTML <body> -elementti sisältää kaiken HTML-asia­kir­jan näkyvän sisällön. HTML-asia­kir­jas­sa voi olla vain yksi <body>.

Mikä on HTML <body> -tagi ja mihin sitä käytetään?

HTML <body> on HTML-elementti, jota käytetään asia­kir­jan sisällön näyt­tä­mi­seen käyt­tä­jil­le. Kaikki näkyvä sisältö, kuten otsikot, teks­ti­loh­kot, kuvat, taulukot, hy­per­lin­kit, luettelot ja muut elementit, tal­len­ne­taan tähän HTML-tagiin. Jo­kai­ses­sa asia­kir­jas­sa voi olla vain yksi HTML <body>. Se sijaitsee aina <head> ala­puo­lel­la ja HTML-ala­tun­nis­teen ylä­puo­lel­la. <body> tukee kaikkia glo­baa­le­ja HTML-att­ri­buut­te­ja.

Mikä on HTML <body>:n syntaksi ja toi­min­nal­li­suus?

Ennen kuin näytämme muutaman yk­sin­ker­tai­sen esimerkin avulla, miten HTML <body> toimii, on syytä tar­kas­tel­la elementin pe­rus­ra­ken­net­ta. Se näyttää seu­raa­val­ta:

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

Vain johdanto- (<body>) ja lopetus- (</body>) tun­nis­tei­den välinen sisältö näkyy myöhemmin ky­sei­sel­lä verk­ko­si­vul­la.

HTML <body> esi­merk­kiä

Seu­raa­vis­sa esi­mer­keis­sä voit nähdä, miten HTML <body> -tagiä käytetään käy­tän­nös­sä.

HTML-do­ku­ment­ti, jossa on <body> yk­sin­ker­tais­ta ele­ment­tiä

Ensin luomme yk­sin­ker­tai­sen HTML-asia­kir­jan, jossa on otsikko, tekstiosa ja kuva, jotka kaikki si­joi­te­taan teks­tio­saan. Vastaava koodi on seuraava:

<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

Na­vi­goin­ti­pal­kin luominen href-att­ri­buu­tin avulla

Seuraava esimerkki näyttää, kuinka voit luoda na­vi­goin­ti­pal­kin verk­ko­si­vus­tol­le­si käyt­tä­mäl­lä HTML <body> -tagiä ja href- att­ri­buut­tia. Tässä on koodi:

<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

Videon upot­ta­mi­nen HTML <body> -tagin avulla

Jos haluat upottaa videon verk­ko­si­vus­tol­le­si, <body> on oikea (ja ainoa) paikka tehdä se. Alla on esimerkki videon upot­ta­mi­ses­ta:

<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

Sisällön ulkoasun muut­ta­mi­nen HTML <body> -tagin avulla

CSS:n avulla voit myös käyttää <body> -aluetta verk­ko­si­säl­lön ulkoasun mu­kaut­ta­mi­seen. Seu­raa­vas­sa esi­mer­kis­sä voit nähdä, miten tämä toimii:

<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

Taustojen mu­kaut­ta­mi­nen HTML <body>:ssa

Jos haluat muuttaa HTML-taustan CSS:llä, voit tehdä sen myös HTML <body>:ssä. Näin asetat taus­ta­vä­rin:

<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

Kuvan li­sää­mi­sek­si käytä alla olevaa koodia:

<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
Siirry pää­va­lik­koon