HTML-sivun rakenne

Otavan Opiston Av-wiki

HTML-koodissa on seitsemän tagia, jotka määrittelevät pelkästään sivun rakennetta, ne ovat html, head, body, div ja span. Kaksi puuttuvaa ovat H ja P, joista myöhemmin lisää.

Html

Jokainen HTML-sivu alkaa tagilla <HTML> ja päättyy tagiin </HTML>. Sillä ei ole väliä kirjoiteaanko <html> vaiko <HTML>. HTML-on juurielementti ja sen tulisi sisältää elementit head ja body.

Head

Head-tagin sisään kirjoitetaan metatietoja, tyylitietoja ja skriptejä. Tärkein elementti sen sisällä on <title>, joka määrittää sivulle otsikon. Head-tagi päätetään juuri ennen body- tagia. HEAD-elementti on pakollinen ja sitä käytettään vain yhden kerran per sivu. Sivulla ei voi olla kahta head-tagia. Ei siis voi olla näin kuten alla olevassa kuvassa.

Body

Body tagin sisään tulee sivun kaikki sisältö. Body tagi alkaa välittömästi, kun head-tagi päättyy. Jokaisen sivun toiseksi viimeisen tagin tulisi olla </body>.

Div

Div-tagilla voidaan ryhmitellä lohkoelementtejä. Sitä käytetään esim. dokumentin tietyn osan fontin tai taustavärin tai sijoittelun apuna. Yleensä Div-tagit liittyvät css-muotoiluihin eli ne eivät tee itsessään mitään ulkoasumuunnoksia paitsi, että ne muodostavat kappaleen.

Span

SPAN ja DIV toimivat pitkälti samalla tavalla, mutta DIV aiheuttaa määrittämänsä alueen muuttumisen omaksi kappaleeksi. Yleensä sitä tarvitaan CSS:ää varten.

HTML:n osalta DIV ja SPAN voivat tuntua tarpeettomilta, koska ne eivät tee mitään näkyvää. Niistä saadaankin hyöty irti vasta, kun niihin lisättään CSS-tyylimäärittelyt. Tämän kurssin piiriin CSS ei kuitenkaan kuulu.

Rakenteellisesti oikein tehty HTML-sivu on esim. tällainen kuten alla olevassa kuvassa.