Elementtien luokittelu
Alla esitellään vielä tavallisimmat elementit taulukossa. Elementit voidaan jakaa karkeasti lohko- ja tekstielementteihin. Lohkoelementti kuvaa tekstin yleistä rakennetta, kun taas tekstielementti tekstin (fontin) ulkonäköä.
Luokitteluun liittyy yksi tärkeä sääntö: Lohkoelementit voivat sisältää toisia lohkoelementtejä ja tekstielementtejä (ja tekstiä), mutta tekstielementit vain tekstitason elementtejä (ja tekstiä).
| Elementti | Esimerkki | Selitys tai huomautus | ||
|---|---|---|---|---|
| div | ja tekstiä | yleinen
lohkoelementti, jolla sivun rakennetta voidaan jäsentää. Voi sisältää vaikka koko dokumentin. |
||
| p | kappale-elementti; lisää kappaleen alkuun ja loppuun rivinvaihdot; Huom: tämän sisällä ei saa olla lohkoelementtejä! | |||
| h1 - h6 | <h2> | otsikkotyylit | ||
| ul | järjestämätön lista (pallot); Huom: Listan kunkin kohdan täytyy olla oman li-elementin sisällä! | |||
| ol | numeroitu lista; Listan kunkin kohdan täytyy olla oman li-elementin sisällä!. | |||
| table | taulukko; tr merkitsee riviä ja td solua. Esimerkki näyttää tällaiselta:
|
|||
| hr | <hr /> | Tekee vaakaviivan. Tämä on ns. tyhjä elementti eli se ei voi sisältää mitään elementtejä tai tekstiä. |
| Elementti | Esimerkki | Selitys tai huomautus |
|---|---|---|
| a | linkki; href antaa osoitteen (tässä taulukon alku) ja teksti "linkki" näkyy sivulla sinisenä. | |
| b | teksti saadaan näkymään lihavoituna | |
| br | lisää rivinvaihdon | |
| i | teksti näkyy kursiivilla | |
| img | <img alt="possun kuva (2K)" src="kuvat/possu.GIF" height="100" width="150" /> | kuvan liittäminen sivuun; Alt-teksti näkyy, jos kuvan lataaminen ei onnistu. src antaa kuvan osoitteen, height korkeuden ja width leveyden. |
| span | Tätä elementtiä käytetään esimerkiksi tekstipätkän valitsemiseen CSS:n avulla muokkaamista varten. | |
| sub | alaindeksi: H2 | |
| sup | x | yläindeksi: x2 |
