Yleisimmät HTML-elementit

Ns. isot elementit (laatikon kaltaiset)
tägi merkitys mistä tulee huom.
H1 pääotsikko header 1
H2 alaotsikko header 2
H3 alaotsikon alaotsikko header 3
p tekstikappale paragrahp
ul lista, jossa on palloja. unordered list saa sisältää vain li-elementtejä
ol lista, jossa on numeroita. ordered list saa sisältää vain li-elementtejä
li listan kohta list item saa sisältää mitä tahansa
div lohkoa johon kummepaa merkitystä division saa sisältää mitä tahansa
img kuva image ei lopetustägiä!
iframe elementti, jonka sisältö tulee muualta inline frame
Yhteistä näille kaikille (paitsi img ja iframe):

  • Leveys oletusarvoisesti 100%
  • aiheuttaa rivinvaihdon ennen ja jälkeen

Yhteistä näille kaikille (myös img ja iframe)

  • voi säätää tyhjää marginaaleja eli tyhjää tilaa yla- ja alapuolella
Ns. pienet elementit (kuin sanat)
tägi merkitys mistä tulee huom.
a linkki anchor
b lihavoitua tekstiä bold
strong voimakkaasti korostettua tekstiä käytännössä sama kuin b
i kursivoitua tekstiä italic
em korostettua tekstiä emphasis käytännössä sama kuin i
u alleviivattua tekstiä underline ei kannata käyttää, näyttää linkiltä
small vähemmän tärkeää tekstiä, sivuhuomautus
span pätkä tekstiä ilman kummempaa merkitystä
img kuva image ei lopetustägiä!
br rivinvaihto break row ei lopetustägiä!

Yhteistä näille kaikille:

  • tälläiset menevät aina vierekkäin, jos mahtuvat
Taulukot
tägi merkitys mistä tulee
table taulukko
caption taulukon nimi, "kuvateksti"
tr taulukon rivi table row
th taulukon otsikkosolu table header (cell)
td taulukon tavallinen solu table data (cell)
td colspan="3" solu, joka vie 3 vierekkäisen solun tilaa column span
Linkit
linkin muoto minne johtaa linkki on...
a href="vihannekset/perunat.html" vihannekset-kansiossa olevaa tiedostoon peruna.html suhteellinen
a href="peruna.html" samassa kansiossa olevaa tiedostoon peruna.html suhteellinne
a href="../vihannekset/peruna.html" ylemmässä kansiossa "vihannekset" olevaa tiedostoon peruna.html suhteellinne
a href="http://joku.osoite.example" kyseiseen osoitteeseen wordl wide webissä suhteellinne
Div-elementin kaltaiset
tägi merkitys mistä tulee huom
header sivun yläosa voi sisältää logon, sivun pääotsikkon ja linekkjä (nav)
nav linkit sivuston pääsivuille navigation voi olla headerin sisäpuolella tai ulkopuolella
main sivun varsinainen sisältö
footer sivun loppu täällä o yleensä yhteystietoja tai tekijän nimi