Yleisimmät HTML-elementit

Ns. isot elementit (laatikon kaltaiset)
tägit merkitys mistä tulee huom.
h1 pääotsikko header 1
h2 alaotsikko header 2
h3 alaotsikkon alaotsikko header 3
p tekstikappale paragraph
ul listä, jossa on palloja unordered list saa sisältäö vain li-elementtejä
ol listä, jossa on numeroita ordered list saa sisältäö vain li-elementtejä
li listan kohta list item saa sisältää mitä tahanasa
div lohko ilman kummempaa merkitystä division saa sisältää mitä tahanasa
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ää marginaaleja eli tyhjää tilaa ylä- ja alapuolella
Ns. pienet elementit (kuin sanat)
tägit merkitys mistä tulee huom.
a linkki anchor
b lihavoitua tekstiä bold
strong voimaakkaasti korostettua tekstiä käytännössa sama kuin b
i kursivoitua tekstiä italic
em korostettua tekstiä emphasis käytännössa sama kuin i
u alleviivattua tekstiä underline ei yleensä kannata käyttää, koska näyttää linkiltä
small vähemmän tärkeää tekstiä, sivuhuomutus
span pätkä tekstiä ilman kummempaa merkitystä
img kuva image ei lopetustägiä!
br rivinvaihto brake room ei lopetustägiä!

Yhteistä kaikille:

  • tälläiset menevät aina vierekkäin, jos mahtuvat
Taulukot
tägit 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 tilan column span
Linkit
linkin muoto minne johtaa linkki on...
a href="vihannekset/perunat.html" vihannekset-kasiossa tiedostoon peruna.html suhteellinen
a href="peruna.html" samassa kansiosssa olevaan tiedostoon peruna.html suhteellinen
a href="../vihannekset/perunat.html ylemmässä kansiossa "vihannekset" olevaan tiedostoon peruna.html suhteellinen
a href="http://joku.osoite.example" kyseiseen osoiteeseen 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ääsivulle navigointi voi olla headerin sisäpuolella tai ulkopuolella
main sivun varsinainen sisältö
footer sivun loppu täällä on yleensä yhteystietoja tai tekijän nimi