Summary  
This chapter covers the standard HTML5 document structure, detailing the roles of the `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements for organizing metadata and page content.  

General domain of usage  
Web development

Jokainen HTML-sivu noudattaa samaa perusrakennetta. Se määrittelee, miten selain tulkitsee ja näyttää sisällön.

Tässä on yksinkertainen esimerkki HTML-dokumentista:
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
```

## Dokumentin pääosat
1. `<!DOCTYPE html>`: ilmoittaa selaimelle käytettäväksi modernia `HTML5`-standardia;
2. `<html>`: juurielementti. Kaikki sivun sisältö sijoitetaan tämän tunnisteen sisään;
3. `<head>`: sisältää sivun tiedot, jotka eivät näy käyttäjille. Yleisiä elementtejä:
   - `<title>`: asettaa selaimen välilehden nimen;
   - `<meta charset="UTF-8">`: varmistaa tekstin oikean esityksen.
4. `<body>`: sisältää kaiken, minkä käyttäjät näkevät sivulla:
   - teksti;
   - kuvat;
   - linkit;
   - painikkeet.

### Ajattelutapa
`<head>` → sivun asetukset. `<body>` → sivun sisältö.

Sinun ei tarvitse vielä muistaa kaikkea ulkoa. Keskity rakenteen tunnistamiseen. Tulet käyttämään sitä jokaisessa HTML-tiedostossa.

Huomio

Rakenna jäsenneltyjä verkkosivuja HTML:n avulla. Luo tekstisisältöä, linkkejä, luetteloita, kuvia, taulukoita ja lomakkeita sekä järjestä kaikki semanttisilla elementeillä kokonaiseksi sivuksi.

Perus HTML-dokumentin Rakenne

Dokumentin pääosat

Ajattelutapa