10 HTML elemendid
HTML dokument koosneb elementidest. Elementidel on reeglina algusmärgend (tag) ja lõpumärgend, millede vahele jääb elemendi sisu. Lõpumärgendi tunnuseks on kaldkriips elemendi nime ees. Märgendeid endid ümbritsevad “väiksem kui” ja “suurem kui” märgid. Tihti kutsutakse neid ka nurksulgudeks või eesti keeles ka noolsulgudeks (angle brackets).
<elemendinimi> Siia kirjutatakse elemendi sisu </elemendinimi>
HTML element ongi kõik algusmärgendist kuni lõpumärgendini. Elemendi sisu on info, mis jääb märgendite vahele.
Allolevas tabelis on toodud mõned näited elementidest koos märgenditega:
Element | Algusmärgend | Elemendi sisu | Lõpumärgend |
Pealkiri | <h1> |
Esimese taseme pealkiri | </h1> |
Pealkiri | <h2> |
Teise taseme pealkiri | </h2> |
Tekstilõik | <p> |
Pikem tekstilõik | </p> |
Reavahetus | <br> |
On olemas ka ilma sisuta tühjad elemendid (empty elements või void elements), millel pole eraldi lõpumärgendit! Ülevalolevas tabelis on selliseks näiteks reavahetuse element <br>
.
Pesastatud elemendid
Elemendid võivad üksteisele järgneda kuid võivad olla lisatud ka üksteise sisse ehk pesastatud (nested), näiteks:
<esimene_element> <teine_element> Sisu </teine_element> </esimene_element>
Tegelikult koosnevad kõik HTML dokumendid pesastatud elementidest. Näiteks see lihtne HTML dokument:
<!DOCTYPE html> <html> <body> <h1>Tere, maailm!</h1> <p>See on tekstilõik.</p> </body> </html>
Ülevalolevas näites piiritleb <html>
elment kogu dokumendi. Tal on algusmärgend <html>
ja lõpumärgend </html>
.
<html>
elemendi sees on omakorda <body>
element. <body>
element piiritleb dokumendi keha (kasutajale nähtava osa).
<body>
elemendi sees on aga omakorda veel kaks elementi: <h1>
ja <p>
.
<h1>
element tähistab esimese taseme pealkirja ja <p>
element tekstilõiku.
Lõpumärgend
HTML koodi kirjutamisel tuleb meeles pidada, et elemendid peavad olema ka korrektselt suletud lõpumärgendiga.
<h1>See on pealkiri</h1>
<p>See on lõik!</p>
Mõned elemendid võib jätta ka sulgemata, sest järgmist sarnast elementi ei saa nagunii alustada ilma eelnevat sulgemata. Selliseid elemente nimetatakse isesulguvateks (selfclosing). Siiski võiks koodi selguse ja vigadest hoidumise huvides need kõik sulgeda.
Tühjad elemendid
Ilma sisuta HTML-elemente kutsutakse tühjadeks elementideks.
Näiteks on tühi element reavahetuse element <br>
, millel puudub lõpumärgend.
<p>See on tekstilõik, <br>mille keskel on reavahetus.</p>