HTML-Dokumentin Rakenne

Helppo

20 min

HTML-dokumentti koostuu useista osista, jotka yhdessä määrittävät, miten verkkosivu näytetään selaimessa. HTML-dokumentti alkaa <!DOCTYPE html> -määrittelystä, joka kertoo selaimelle, että kyseessä on HTML5-dokumentti. Tämän jälkeen seuraa <html> -elementti, joka kertoo selaimelle, että kaikki dokumentin sisältö on HTML-koodia.

Seuraavaksi tulevat <head> ja <body> -elementit.

HTML Head

Head-elementti sisältää tiedot, jotka eivät näy selaimessa, mutta ovat tärkeitä dokumentin rakentamisen kannalta. Esimerkiksi head-elementtiin voidaan lisätä meta-tunnisteita, joiden avulla voidaan määrittää sivun kieli ja käyttämä merkistö. Lisäksi head-elementtiin voidaan lisätä linkki- ja script-elementtejä, joilla tuodaan CSS-tyylitiedostoja ja JavaScript-koodia sivulle.

HTML Body

Body-elementti sisältää kaiken sen sisällön, joka näkyy selaimessa. Sivun tekstin ja muun sisällön lisäksi body-elementtiin voidaan lisätä erilaisia HTML-elementtejä, kuten kuvia, linkkejä, taulukoita, listoja ja lomakkeita. HTML-dokumentin lopetusmerkintänä käytetään </html> -tunnistetta.

Laitetaan palaset yhteen

Seuraava on esimerkki yksinkertaisesta HTML-dokumentista, joka sisältää perus-rakenteen:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML-dokumentti</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  Tämä on oikean muotoinen HTML-sivu.
  <script src="script.js"></script>
</body>

</html>

Älä välitä jos et vielä ymmärrä kaikkien tagien tarkoitusta, tulemme niihin kyllä. Oleellista on nyt saada perus idea HTML-dokumentin rakenteesta.

Tässä kuitenkin lyhyesti jos olet utelias:

head-osion sisällä olevat meta-tagit määrittävät dokumentin merkistön jotta esimerkiksi ääkköset toimisivat oikein, sekä kertovat selaimelle että sivustoa tulisi skaalata ruudun koon mukaan.
head-osion sisällä oleva title-tagi määrittää selaimen välilehdessä näkyvän tekstin.
head-osion sisällä oleva link-tagi linkittää dokumenttiin tyylitiedoston josta tulee sivustolle esimerkiksi värejä ja fontteja.
body-osion sisällä oleva script-tagi lataa sivulle JavaScript-tiedoston ja suorittaa sen koodin.

Harjoittele

Kokeile itse!

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.