HTML:ssä on sekä parillisia tageja että yksittäisiä tageja (tunnetaan myös itse sulkeutuvina tageina tai tyhjinä elementteinä). Jokaisella tyypillä on oma tarkoituksensa ja toimintonsa.

Parilliset tagit

Parilliset tagit koostuvat avaus- ja sulkutageista. Ne voivat kietoutua sisällön ympärille ja ryhmitellä kohteita muuttaakseen joitakin ominaisuuksia tai kerätäkseen elementtejä merkityksen mukaan.

Syntaksi:

<tag_name>Some content</tag_name>

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

Tässä esimerkissä:

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

Yksittäiset tagit

Yksittäiset tagit koostuvat vain avaus-tagista ilman sulkevaa tagia. Niitä käytetään, kun tagi ei vaadi sisältöä tai kun kaikki sisältö ja toiminta määritellään attribuuteilla.

Syntaksi:

<tag_name />

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

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

• <input />: luo tekstinsyöttökentän. placeholder=" name" näyttää vihjeen laatikon sisällä;
• <img />: näyttää kuvan hedelmistä.
  • alt="Fruits": teksti, joka näytetään, jos kuva ei lataudu;
  • width ja height: asettavat kuvan mitat;
  • src: määrittää kuvan URL-osoitteen.

Tagien sisäkkäisyys

Kun sisäkkäistään tageja, hierarkian järjestyksen noudattaminen on olennaista, kuten sisäkkäisissä nukeissa. Jokainen sisäkkäinen tagi tulisi sulkea asianmukaisesti sen vanhempitagin sisään samalla, kun noudatetaan HTML-syntaksin sääntöjä.

Tässä on esimerkki sisäkkäisistä tageista:

<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>: käärii koko kappaleen;
• <a href="https://privacy.com">...</a>: luo klikattavan linkin tietosuojakäytäntöön;
• <strong>...</strong>: tekee sanasta "website" lihavoidun korostaakseen sitä.

Yhteenveto

HTML koostuu parillisista ja yksittäisistä tageista, joilla on eri tarkoitukset. Parillisilla tageilla on avaus- ja sulkemistagi sisällön ympäröimiseksi, kun taas yksittäiset tagit sulkeutuvat itsestään. Tagien oikea sisäkkäisyys ja oikean hierarkian noudattaminen ovat olennaisia hyvin muodostetun HTML-rakenteen kannalta.