Yleisimmät HTML-elementit

Ns. Isot elementit (laatikon kaltaiset)
Tägi merkitys mistä tulee huom.
h1 pääotsikko header
h2 alaotsikko header
h3 alaotsikonalaotsikko header
p tekstikappale paragraph
ul lista, jossa on palloja unordered list Saa sisältää vain li-elementtejä
ol lista, jossa on vain numeroita unordered list Saa sisältää vain li-elementtejä
li listan kohta ltem
div lohko ilman kummenpaa merkitystä division Saa sisältää mitä tahansa
img kuva image ei lopetus tä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ää marginaaleja eli tyhjää tilaa ylä- 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ä alleviivattua tekstiä ei yleensä kannata käyttää, koska se näyttää linkiltä.
small Vähemmän tärkeää tekstiä, sivuhuomautus
span Pätkä tekstiä ilman kummenpaa merkitystä
img kuva image ei lopetus tägiä
br rivinvaihto break row ei lopetus tägiä

Yhteistä näille kaikille.

  • Tällaiset 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, vie 3 vierekkäisen solun tilan column span
linkit
linkin muoto minne johtaa linkki on...
a href="vihannekset/peruna-html" vihannekset-kansiossa olevaan tiedostoon peruna.html suhteellinen
a href="peruna html" samassa kansiossa olevaan tiedostoon peruna.html suhteellinen
a href="../vihannekset/perunahtml" ylemmässä kansiossa "vihannekset" olevaan kansioon peruna.html suhteellinen
a href="http://joku.osoite.example" kyseiseen osoitteeseen world wide webissä absoluuttinen
Div-elementin kaltaiset
tägi merkitys mistä tulee huom
header sivun yläosa voi sisältää logon, sivun pääotsikon ja linkkejä (nav)
nav linkit sivuston pääsivuille navigation voi olla headerin sisäpuolella tai ulkopuolella
main sivun varsinaisen sisältö
footer sivun loppu täällä on yleensä yhteystietoja tai tekijän nimi