Jebkuras valodas pamatā ir vārdi. HTML valodas "vārdi" ir tagi. Jebkurš HTML tags sākas ar < un beidzas ar > zīmēm. Katram HTML tagam ir noteikta nozīme, ko tas piešķir tekstam vai citam objektam.

Pāra tagi

Lielākā daļa HTML tagu ir pāra tagi. Tie attiecas uz noteiktu teksta daļu, ko norobežo atverošais un noslēdzošais HTML tags, un piešķir šai teksta daļai noteiktu nozīmi dokumentā. Noslēdzošais tags atšķiras no atverošā ar simbolu / pēc <. Pāra tagiem vienmēr ir nepieciešams noslēdzošais tags.

Pārlūkprogrammas gan pieļauj daudz ko un mēģinās lapu parādīt arī ar "salauztu" HTML kodu, kurā ir neaizvērti tagi, bet šādā gadījumā nekad nevar zināt, kāds var iznākt gala rezultāts. Neaizvērti tagi iesācējiem bieži sagādā visdažādākās problēmas ar lapas nepareizu attēlošanos.

Piemērs

<h2>Es esmu virsraksts</h2>
<p>Bet es tikai parasts paragrāfa teksts</p>

Rezultāts

HTML tagu piemērs - Es esmu virsraksts

Nepāra tagi (void elementi)

Nepāra tagi darbojas pa vienam — tie neattiecas uz noteiktu satura daļu, bet apzīmē, piemēram, attēla atrašanās vietu vai jaunu rindu tekstā. Šeit jāpiebilst, ka HTML valodā jaunas rindas izveidošanai nepietiek ar to, ka teksts kodā tiek pārnests jaunā rindā — tam ir nepieciešams <br> tags.

HTML5 standartā šiem tagiem nav nepieciešams noslēdzošais slīpsvītras simbols. Tātad pareizi ir rakstīt <br>, nevis <br /> (lai gan abi varianti strādā).

Piemērs

Es esmu pirmās rindas teksts, <br>
bet es atrodos otrajā.

Rezultāts

HTML br taga piemērs

Nepāra tagu HTML valodā ir salīdzinoši maz. Biežāk lietotie ir šādi:

  • <br> — pārnes tekstu jaunā rindā
  • <img> — attēla ievietošanai dokumentā
  • <input> — datu ievades lauks HTML formās
  • <hr> — horizontāla svītra tekstā, paredzēta lai atdalītu dažādas teksta daļas
  • <meta> — metainformācija par lapu, kas tiek ievietota dokumenta <head> daļā
  • <link> — ārējo resursu (piemēram, CSS failu) pievienošanai
  • <source> — mediju avotu norādīšanai <video> un <audio> elementos

Atribūti

HTML tagiem var pievienot atribūtus, kas sniedz papildu informāciju par elementu. Atribūtus raksta atverošajā tagā, un tiem parasti ir formāts nosaukums="vērtība".

Piemērs

<a href="https://google.lv" title="Google meklētājs">Saite uz Google</a>
<img src="bilde.jpg" alt="Apraksts">

Biežāk lietotie universālie atribūti, ko var pievienot gandrīz jebkuram tagam:

  • id — unikāls elementa identifikators (katrā lapā drīkst būt tikai viens elements ar konkrētu id)
  • class — klase, ko izmanto CSS stilizēšanai. Vienam elementam var būt vairākas klases
  • style — tiešie CSS stili (nav ieteicams lietot bieži, labāk izmantot atsevišķu CSS failu)
  • title — padoms (tooltip), kas parādās, novietojot peles kursoru uz elementa
  • data-* — pielāgoti datu atribūti, ko var izmantot JavaScript

HTML komentāri

Komentāri ļauj kodā ievietot piezīmes, kas nav redzamas lapas apmeklētājiem. Tie ir noderīgi, lai paskaidrotu koda daļas vai īslaicīgi atspējotu kādu koda fragmentu.

<!-- Šis ir komentārs, kas nav redzams lapā -->

<!-- Izvēlne sākas šeit -->
<nav>
<a href="/">Sākums</a>
</nav>
<!-- Izvēlne beidzas šeit -->

Tagu secība

Ja kāds tags atrodas iekšā otrā, tad tam šī taga robežās arī ir jābeidzas.

Pareizi

<p><strong>Teksts treknrakstā</strong></p>

Nepareizi

<p><strong>Teksts treknrakstā</p></strong>

Noderīgi tiešsaistes rīki

Laboja mad, labots 1x