HTML käyttää kahta erilaista tagia: parillisia tageja ja yksittäisiä (itse sulkeutuvia) tageja. Molemmilla on oma roolinsa verkkosivun rakenteessa.

Parilliset tagit

Parillisilla tageilla on avaus- ja sulkutagi. Ne ympäröivät sisältöä, ryhmittelevät elementtejä ja määrittelevät merkityksen tai rakenteen.

Syntaksi:

<tag_name>Some content</tag_name>

Tässä on esimerkki parillisten tagien käytöstä:

Tässä esimerkissä:

• <section>...</section>: ryhmittelee toisiinsa liittyvän sisällön;
• <h1>...</h1>: lisää otsikon osioon;
• <p>...</p>: sisältää kappaleen, joka selittää, että useimmat HTML-tagit esiintyvät pareittain.

Yksittäiset tagit

Yksittäisillä tageilla ei ole sulkevaa tagia. Niitä käytetään, kun sisäistä sisältöä ei tarvita ja kaikki toiminnallisuus määritellään attribuuttien avulla.

Syntaksi:

<tag_name />

Tässä on esimerkki yksittäisten tagien käytöstä:

Tämä koodi sisältää kaksi elementtiä:

• <input />: luo tekstinsyöttökentän. Attribuutti placeholder=" name" näyttää vihjetekstin kentän sisällä;
• <img />: näyttää kuvan hedelmistä.
  • alt="Fruits": teksti, joka näytetään, jos kuvaa ei voida ladata;
  • width ja height: määrittävät kuvan mitat;
  • src: määrittää kuvan URL-osoitteen.

Tägien sisäkkäisyys

Tägien tulee olla sisäkkäin oikein, kuten maatuskanuket, jokaisen sulkevan tägien vastatessa avaus-tägiä oikeassa järjestyksessä.

Tässä esimerkki sisäkkäisistä tägistä:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Tarkastellaan seuraavaa kelvollista esimerkkiä:

Tämä koodi näyttää kappaleen, jossa on linkki ja korostettua tekstiä:

• <p>...</p>: ympäröi koko kappaleen;
• <a href="https://privacy.com">...</a>: luo klikattavan linkin tietosuojakäytäntöön;
• <strong>...</strong>: lihavoi sanan "website" korostusta varten.