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>

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut