ns. isot elementit (laatikon kaltaiset)
| tägi | tarkoitus | mistä tulee | huomioitavaa |
|---|---|---|---|
| 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ää ainoastaan li-elementtejä |
| ol | lista, jossa on numeroita | ordered list | saa sisältää ainoastaan 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 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 (kuten sanat)
| tägi | tarkoitus | mistä tulee | huomioitavaa |
|---|---|---|---|
| a | linkki | anchor | |
| b | lihavoitua tekstiä | bold | oli kielletty 2000-2014 |
| strong | voimakkaasti korostettua tekstiä | käytännössä sama kuin b | |
| i | kursivoitua tekstiä | italic | oli kielletty 2000-2014 |
| em | korostettua 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 kolmen 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 |
| ”peruna.html” | samassa kansiossa olevaan tiedostoon | suhteellinen |
| a href =”../vihannekset/peruna.html” | ylemmässä kansiossa ”vihannekset” olevaan tiedostoon peruna.html | suhteellinen |
| a href=”https://medipjt.fi/etunimi.sukunimi/vihannekset/ | kyseiseen osoitteeseen world wide webissä | absoluuttinen |
Div-elementin kaltaiset
| tägi | merkitys | mistä tulee | huomioitavaa |
|---|---|---|---|
| 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-säätöä, jotta toimii myös internet explorer selaimessa | |
| footer | sivun loppu | täällä on yleensä yhteystietoja tai tekijän nimi |