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:

html

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:

html

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:

html

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.