HTML-dokumendid koosnevad elementidest, mida iseloomustavad nn sildid (tags). Sildid on äratuntavad teravnurksetest sulgudest. Enamikku HTML-elemente tähistab alg- ja lõpusilt. Seda, mis nende vahel asub, nimetatakse kehtivusalaks.
Näide:
<h1>PSD-Tutorials.de - sinu graafika-, veebi- ja õppeportaal</h1>
Selle süntaksi abil kirjutatakse dokumendisse esimese klassi pealkiri. Alustav <h1>-silt teatab brauserile, et tegemist on sellise pealkirjaga. Lõpusilt </h1> lõpetab pealkirja. Lõpusilte saab ära tunda avaneva teravnurga sulgude järgi, millele järgneb kaldkriips </.
Elemente, mida avatakse, tuleb ka sulgeda. Seega, kui lisate <h1>, peate selle pealkirja määratluse lõppedes uuesti sulgema </h1>. Kuigi HTML5-s on siin ka erandeid, nagu näiteks loendiüksused ja lõigud, aga sellest hiljem.
HTML-is on ka nn iseseisvaid sildid. Need koosnevad ainult ühest sildist, mitte algus- ja lõpusildist. Üks tüüpiline näide sellest on <br />.
See on üks rida.<br /> See on teine rida.
See <br /> määratleb reavahetuse.
Neid tühje sildid sulgetakse tavaliselt kaldkriipsuga, kuigi see pole HTML5-s tingimata vajalik. Siin oleks võimalik ka järgmist:
<br>
Te õpite selle rea jooksul tundma veel mitmeid neid iseseisvaid sildid.
Elementide pesitsemine
HTML-elemente saab tegelikult pesitleda. Kujutage ette, et soovite pealkirja sees teatud osa kursiivselt kujundada. Kursiivi kujundamiseks kasutatakse i-elementi.
<h1>PSD-Tutorials.de - <i>sinu graafika-, veebi- ja õppeportaal</i></h1>
Olge pesitsemisel tähelepanelik õiges järjestuses. Viimaseks suletakse element, mis avati esimesena. Selles konkreetses olukorras on see siis h1-element.
Attribuutide kasutamine
Avanevate siltide või iseseisvate siltide sees saab määratleda nn atribuute. Need atribuudid saavad elementidele lisasätteid määrata. Varasematel HTML-aegadel määrati elementidele suhteliselt palju atribuute. See tulenes lihtsalt struktuuri ja disaini segunemisest. Näiteks anti värvideifinitsioonid otse HTML-elementidele vastava atribuudi kaudu. Tänapäeval on tänu CSS-ile loomulikult võimalik saavutada range eraldatus disaini ja struktuuri vahel, mis peaks ka nii jääma. Seetõttu kasutatakse ainult suhteliselt vähe atribuute.
Üks oluline atribuut on id. Selle atribuudi abil saab HTML-elementidele määrata ainulaadne nimi, mille abil neid saab hiljem näiteks CSS-i või JavaScriptiga käsitleda.
<h1 id="head">PSD-Tutorials.de - sinu graafika-, veebi- ja õppeportaal</h1>
Atribuudi määramiseks lisatakse pärast h1t tühik. Sellele järgneb atrribuudi nimi, mis on tavaliselt väiketähtedega. Atrribuudinime järel tuleb võrdusmärk. Jutumärkides järgneb sellele atribuudi väärtus.
Elementile võib määrata ka mitu atribuuti. Näiteks on täiesti tavapärane määrata elemendile nii-öelda klass ja ID. Näide: id identifitseerib pealkirja selgelt. Klass on aga selleks, et kategoriseerida pealkiri teatud kategooriasse. Nii saab määrata, et kõik elemendid, millele on määratud klass sinine, kuvatakse sinise värviga. (Lisaks sellele css-ile ja värviteemadele saate hiljem väärtestatult rohkem).
<h1 id="head" class="blue">PSD-Tutorials.de – sinu graafika-, veebi- ja õppeportaal</h1>
Atribuudid on sel juhul eraldatud üksteisest tühikuga.
Koodi valideerimine
Mõningaid põhilisi süntaksireegleid olete juba õppinud. Eriti alguses, kui õpite HTML-i, on oluline neid reegleid järgida. See, mida olete ükskord valesti teinud, on raske peast välja saada. Peaksite alati kontrollima või lasta kontrollida oma HTML-koodi õigsust. Seda ei pea te ise tegema. Selleks on olemas vastavad veebiteenused. Näiteks leiate ühe sellise valideerija aadressilt http://validator.w3.org/.
Kõige parem on minna otse valikusse Valideeri otsekohese sisendiga. Siin saate lisada HTML-koodi otse kopeerimise ja kleepimisega kontrollimiseks. Veenduge kindlasti, et lisate faili kogu koodi, sealhulgas ka DOCTYPE'i deklaratsiooni.
Valideerija testimiseks lisage järgmine tekst väljale ja seejärel klõpsake nupul Valideeri.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – sinu graafika-, veebi- ja õppeportaal</h1> </body> </html>
Tulemus peaks välja nägema järgmiselt:
Kõik on korras. (Sel puhul võite ignoreerida kaht hoiatust). Kui ilmub teade See dokument kontrolliti edukalt HTML5-ga!, on kõik tõepoolest korras. Kuidas see välja näeb vigade korral? Selleks võite proovida hooletult süntaksisse vea lisada.
<h1 id=head">PSD-Tutorials.de – sinu graafika-, veebi- ja õppeportaal</h1>
Siin unustati algne jutumärk head juures. Kui lasta süntaksil nüüd uuesti kontrollida, tuvastatakse viga.
Valideerija annab sellele vastava teate. Täpselt, mis valesti läks, saab lugeda alumisest aknast.
<h1 id=head" >PSD-Tutorials.de</h1>
Seega näete otse, millises reas oli vigane sisend, ja saate selle parandada. Nii aitab valideerija teil koostada korrektset HTML-koodi. Peaksite alati lasta oma koodi valideerida. Kuna brauserid kuvavad sageli HTML-koodi õigesti, kuigi süntaks on vigane. Kuid teistes brauserites, kus teie veebilehti ei testita, võib see välja näha hoopis teistsugune.
