Yleisimmät HTML-elementit

Ns. isot elementit (laatikon kaltaiset)
tägi merkitys englanninkielinen selitys huom!
h1 pääotsikko header 1
h2 alaotsikko header 2
h3 alaotsikon alaotsikko header 3
p tekstikappale paragraph
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 lohko ilman merkitystä division saa sisältää mitä tahansa
img kuva image ei lopetustägiä!
iframe elementti, jonka sisältö tulee muualta inline frame käyttäytyy kuin img

yhteistä näille kaikille (paitsi img):

  • 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 englanninkielinen selitys huom!
a linkki anchor
b lihavoitu teksti bold oli kielletty 2000-2014
strong voimakkaasti korostettua tekstiä käytännössä sama kuin b
i kursivoitu teksti italic oli kielletty 2000-2014
em korostettu teksti emphasis käytännössä sama kuin i
u alleviivattua tekstiä underline ei yleensä kannata käyttää, koska näyttää linkiltä
small vähemmän tärkeää tekstiä, sivuhuomautus
img kuva image ei lopetustägi!
br rivinvaihto break row ei lopetustägiä!

Yhteistä 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, joka vie 3 vierekkäisen solun tilan column span
Linkit
linkin muoto minne johtaa linkki on...
href="elain/rotta.html" vihannekset-kansiossa olevaan tiedostoon rotta.html suhteellinen
href="rotta.html samassa kansiossa olevaan tiedostoon rotta.html suhteellinen
href="../elain/rotta.html ylemmässä kansiossa "elain" olevaan tiedostoon rotta.html suhteellinen
a href="https://medipjt.fi/etunimi.sukunimi/elain/" kyseiseen osoitteeseen world wide web 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 varsinainen sisältö vaatii ylimääräistä css-sissältöä, jotta toimiii myös Internet Explore -selaimessa
footer sivun loppu täällä on yleensä yhteystietoja tai tekijän nimi