Kui palju HTML-silte sa tegelikult kasutad? Enamikul arendajatest on arsenalis umbes kümmekond: div, p, a, img, span, pealkirjad ja loendid. Ülejäänud 100+ spetsifikatsioonis leiduvat silti seisavad jõude, sest inimesed on need lihtsalt unustanud või pole neist kunagi teadnud.

See on viga. Brauserid on õppinud semantikat mõistma sügavamalt, kui sa arvata oskad. Ekraanilugejad toetuvad sellele. Otsingumootorid parsivad struktuuri. Õige silt õiges kohas annab ligipääsetavuse, SEO ja loetava koodi ilma ühegi JS-i reata.

Valisime välja 18 HTML-silti, mida tasub oma igapäevasesse märgendisse lisada. Need ei ole uued selles mõttes, et "äsja mustandist välja tulnud", kuid paljudele arendajatele on need uued, sest neid on ebaõiglaselt tähelepanuta jäetud. Mõned pärinevad HTML5-st, teised on spetsifikatsioonis alati olemas olnud. Igaüks sisaldab töötavat näidet ja selgitust, kus sellest tegelikult kasu on.

💡 Kiirülevaade:

• Millised sildid lahendavad ligipääsetavuse ja semantika probleeme ilma JavaScriptita
• Kus sub/sup, dfn, var ja time tulevad tekstimärgendis kasuks
• Kuidas <q>, <blockquote> ja <cite> vormindavad korrektselt tsitaate
• Miks <video>, <picture> ja <figure> korrastavad meediasisu
• Mida del/ins, meter, dialog ja menu liidestele juurde toovad

1. Semantiline tekstimärgend: sub, sup, dfn, var, time, kbd

Viis silti, mis muudavad tavalise teksti nii masinatele kui ka inimestele arusaadavaks struktuuriks. Pole JS-i, ainult puhas HTML.

<sub>** ja **<sup>: alam- ja ülaindeks. Keemilised valemid, matemaatilised astendajad, joonealused märkused. CSS abil saab teksti visuaalselt vertical-align abil alla või üles tõsta, kuid see ei anna semantikat edasi. Ja see on oluline: ekraanilugeja teatab "H kaks O", mitte ei loe "H kaks O" tavalise tekstina. Ära kasuta neid puhtalt dekoratiivsel eesmärgil; selleks on stiilid olemas.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: defineeritav termin. Kui tutvustad uut mõistet ja esitad selle definitsiooni, märgi termin selle sildiga. Brauser ei tee sellega visuaalselt midagi, kuid otsingumootorid ja sõnastikulaiendused kasutavad <dfn> elementi lehe sõnastiku koostamiseks. Atribuut id võimaldab luua tagasiviiteid, kui terminit uuesti mainid.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: muutuja. Tehnilises dokumentatsioonis, õpetustes, valemite kirjeldustes. Brauserid kuvavad selle vaikimisi kursiivis. Täielike matemaatiliste avaldiste jaoks on MathML parem, kuid <var> on mugav, kui muutuja on lause osa.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: kuupäev või kellaaeg. Masinatel on raske tuvastada "2. aprill" lõigu keskel. <time> silt eraldab kuupäeva ja pakub datetime atribuudi kaudu masinloetavat vormingut. Kalendrid, otsingumootorid, sündmuste parserid: kõik on sulle tänulikud.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: klaviatuurisisend. Juhised, kiirklahvid, käsud. Visuaalselt kuvatakse püsisammuga fondis, eraldades semantiliselt klahvinimed ümbritsevast tekstist. Kombinatsioonide jaoks saab neid üksteise sisse paigutada.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Tsitaadid ja allikaviited: q, blockquote, cite

Kolm silti, mis katavad kõik tsiteerimise stsenaariumid, alates reasisesest fraasist kuni pikema raamatuväljavõtteni.

<q>: reasisene tsitaat lõigu sees. Brauser lisab sisu ümber automaatselt lehe keelele vastavad jutumärgid. Valikuline cite atribuut määrab allika URL-i. Kasutaja seda ei näe, kuid masinad näevad.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: blokktsitaat. Mõeldud pikemate väljavõtete jaoks: lõik artiklist, arvustus, katkend spetsifikatsioonist. Toetab samuti cite atribuuti. Brauser lisab vaikimisi taande ja seda saab soovi järgi kujundada.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: viidatud teose pealkiri. Ainult pealkiri: raamat, artikkel, film, mäng. Mitte autori nimi, mitte kuupäev, vaid ainult pealkiri. Brauserid kuvavad selle vaikimisi kaldkirjas. Sageli aetakse segi <q>/<blockquote> elemendi cite atribuudiga, kuid need on erinevad asjad: atribuut salvestab URL-i, samas kui <cite> silt kuvab pealkirja kasutajale.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Dokumendi struktuur: address ja dl/dt/dd

<address>: kontaktandmed. Mitte ettevõtte postiaadress (sellega tegeleb Schema mikromärgendus), vaid lehe või artikli autori kontaktandmed. Kui see paigutatakse <article> elemendi sisse, viitab see artikli autorile; kui <body> sees, siis saidi omanikule. Otsingumootorid kasutavad seda plokki Knowledge Graphi loomiseks.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: kirjeldusloend. Mitte lihtsalt „terminite sõnastik", vaid mis tahes „võti/väärtus" struktuur: toote spetsifikatsioonid, metaandmed, KKK. Ühel terminil (<dt>) võib olla mitu kirjeldust (<dd>) ja vastupidi. Järjekord on oluline: kõigepealt tuleb termin, seejärel selle kirjeldus.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Meediasisu: video, picture ja figure/figcaption

Kolm võimsat tööriista visuaalse ja multimeediasisuga töötamiseks. Igaüks katab oma ülesannete ringi.

<video>: manustatud video ilma kolmanda osapoole mängijateta. Saab määrata ühe src või mitu <source> elementi; brauser valib esimese toetatud formaadi. Kasulik detail: autopictureinpicture atribuut kahandab video automaatselt hõljuvaks aknaks, kui vahetate sakke, samas kui disablepictureinpicture takistab seda. Sarnaselt kontrollib disableremoteplayback ülekandmist Chromecasti ja Apple TV-sse.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: tundlikud pildid täieliku kontrolliga. Erinevalt <img> elemendi srcset atribuudist, kus brauser valib allika, võimaldab <picture> määrata rangeid meediapäringuid. Erinevad formaadid (WebP Chromiumile, JPEG teistele), erinevad kärped mobiilile, tume versioon tumedale režiimile, seda kõike ilma ühegi JS-i reata.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** ja **<figcaption>: iseseisev sisu koos pealkirjaga. Illustratsioon, diagramm, koodiloend, tabel, kõik, mida saab põhivoost eemaldada ilma tähendust kaotamata. <figcaption> seob pealkirja sisuga semantiliselt: ekraanilugeja loeb neid koos, mitte eraldi elementidena. Kui sisu on tekstiga vaid kaudselt seotud (näiteks tsitaat külgribal), kasuta selle asemel <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Navigatsioonikaardid: map ja area

Vana, kuid mitte aegunud. Pildikaardid muudavad pildi üksikud piirkonnad klikitavateks linkideks. Seal, kus tekstist ei piisa (interaktiivne metrookaart, hoone korruseplaan, anatoomiline diagramm), töötab <map> koos <area>'ga ilma JS-ita.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

Atribuut shape aktsepteerib väärtusi circle, rect, poly ja default. Koordinaadid on pikslites ülemisest vasakust nurgast. Keerukate kontuuride jaoks kasuta poly koos punktide loendiga. Vaatamata oma vanusele (see silt on tublisti üle kahekümne aasta vana), on sellel stabiilne tugi kõigis brauserites.

6. Teksti redigeerimine: del ja ins

Kui näitad muudatusi, dokumenteerid parandusi, artikliuuendusi või seadusandlikke erinevusi, pakuvad <del> ja <ins> semantiliselt korrektset esitusviisi. <del> märgib eemaldatud sisu (brauserid kriipsutavad selle läbi), <ins> märgib lisatud sisu (brauserid joonivad selle alla).

Mõlemad toetavad atribuute cite (miks muudeti) ja datetime (millal). Otsingumootorid näevad lehe redaktsioonide ajalugu, mitte lihtsalt ülekirjutatud teksti.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Ära kasuta <del> ja <ins> puhtalt dekoratiivseks läbikriipsutamiseks; selleks on olemas text-decoration: line-through. Need sildid on mõeldud just sisu versioonihalduse jaoks.

7. Järgmise põlvkonna sisestusväljad

<input> element on arenenud palju kaugemale tekstistringidest. Kaasaegsed brauserid toetavad kümneid tüüpe, millest igaüks toob kaasa sisseehitatud valideerimise, mobiilispetsiifilise klaviatuuri ja natiivsed vidinad ilma ühegi JavaScripti reata.

Peamised tüübid, mida paljud projektid endiselt ignoreerivad:

• type="color": värvipalett. Natiivne valija, ilma et peaks sisse tõmbama värvispektri teeki.
• type="range": liugur vahemikus min kuni max. Helitugevus, hind, hinnang, kõik ilma liugurit programmeerimata.
• type="date": lokaalseadistusega kalender. Brauser kuvab kuupäevavalija, mille vorming on kohandatud kasutaja piirkonnale.
• type="datetime-local": kuupäev ja kellaaeg ilma ajavööndita. Broneeringute, tähtaegade, ajakavade jaoks.

Atribuut pattern võtab vastu regulaaravaldise: väärtus ei läbi valideerimist enne, kui see vastab mustrile.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Numbrilised indikaatorid

Ärge ajage seda segi <progress> elemendiga: <meter> on staatilise väärtuse jaoks teadaolevas vahemikus (kettakasutus, skoor, hinnang), samas kui <progress> on ülesande täitmise edenemise jaoks (allalaadimine, samm-sammuline protsess).

Brauser värvib <meter> elemendi automaatselt selle põhjal, kus väärtus asub võrreldes low, high ja optimum väärtustega. Roheline tsoon: väärtus on optimumi lähedal; kollane: talutav; punane: väljaspool normaalset vahemikku. Värviloogikat saab kohandada CSS-i abil, kuid põhisemantika töötab kohe algusest peale.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Interaktiivsed elemendid: dialoog ja menüü

Kaks silti interaktsioonide jaoks, mis varem nõudsid JS-i teeke või nullist ehitamist.

<dialog>: natiivne modaalaken. Element on iseenesest peidetud. Lisage open atribuut ja brauser kuvab selle lehe kohal top layer kihis. JavaScripti meetod showModal() pakub ka ::backdrop pseudoelementi tausta hämardamiseks. Hüpikaken, tegevuse kinnitus, hoiatus, kõik ilma ühegi CSS-i positsioneerimise reata.

Tugi: Chrome, Edge, Firefox, Safari (alates 2022. aastast). Vanemate brauserite puhul renderdub dialoog lihtsalt tavalise plokk-konteinerina; polütäited on saadaval.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: interaktiivsete tegevuste loend. Mitte navigatsioon (selleks kasutage <nav>), vaid konkreetselt tööriistariba: pintslid graafikaredaktoris, vormindusnupud, objekti toimingud. Semantiline vaste <ul> elemendile, kuid nuppude ja käskude jaoks. Sellel puudub vaikimisi stiil, ainult tähendus.

Atribuut type="toolbar" (ainus, mis on spetsifikatsioonis alles jäänud) määrab selgesõnaliselt tööriistariba rolli. Kontekstitüüp on standardist eemaldatud, seega on <menu> tänapäeval mõeldud eranditult nähtavate tegevuste komplektide jaoks ekraanil.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Kui HTML-i märgendid on sulle uued, siis siin on suurepärane sissejuhatus Traversylt; Traversy Media on üks parimaid frontend-kanaleid YouTube'is:

⁉️🤔 Korduma kippuvad küsimused

Miks kasutada semantilisi silte, kui kõike saab ehitada <div> ja <span> abil?

Ekraanilugejad tuginevad siltidele, et luua pimedatele kasutajatele lehe struktuur; div on neile nähtamatu. Otsingumootorid eraldavad semantikat rikkalike väljavõtete jaoks: hinnangud elemendist <meter>, KKK elemendist <dl>, kontaktid elemendist <address>. Lisaks dokumenteerib kood end ise: <article> ütleb kohe „see on artikkel", samas kui <div class="article"> seda ei tee.

Millised nimekirjas olevad sildid on juba tootmises ohutud kasutada?

Kõik kaheksateist. <dialog> saavutas brauseriülese toe Safari 15.4-ga (2022), <menu> töötab de facto semantilise ümbrisena kõikjal. <picture> ja <video> koos <source>-iga on olnud küpsed alates 2016. aastast. <meter>, <time>, <kbd>, <dfn> pärinevad HTML-i sügavast pärandist ja neil on universaalne tugi. Ainus hoiatus: <input type="date"> ja type="color" võivad operatsioonisüsteemiti erinevalt renderduda, kuid see ei riku funktsionaalsust.

Kas <b> ja <i> on surnud?

Ei, kuid nende roll on muutunud. <b> on nüüd tähelepanu tõmbamiseks ilma olulisust edasi andmata (märksõnad CV-s), <i> on idioomiliste väljendite, teises keeles terminite, laevanimede jaoks. Olulisuse rõhutamiseks kasuta <strong>; rõhuasetuse jaoks <em>. Stilistiline paks kiri/kaldkiri on ainult CSS-i pärusmaa.

Kas ma saan kasutada <meter> laadimise edenemisriba jaoks?

Ei. <meter> on staatilise väärtuse jaoks teadaolevas vahemikus (kettakasutus, skoor, hinnang). Aja jooksul toimuva edenemise jaoks kasuta eranditult <progress>. Brauserid animeerivad <progress>, kui value muutub, samas kui <meter> jääb staatiliseks. Neid aetakse pidevalt segi, kuid semantika on erinev ja ekraanilugejad teavitavad neist erinevalt.

Mida teha, kui brauser ei toeta <dialog>?

Element renderdub lihtsalt plokk-konteinerina ega purune. Lisa polüfill: Google Chrome'i meeskonna dialog-polyfill (400 rida, sõltuvusi pole) katab showModal(), close() ja ::backdrop vanemate brauserite jaoks.

Millist silti peaksid esimesena kasutusele võtma?

{iframe} ja <picture> on kaks silti, mis annavad minimaalse vaevaga maksimaalset kasu. {iframe} asendab mis tahes kolmanda osapoole videopleieri loomuliku aknaga, millel on pilt-pildis funktsioon. <picture> välistab käsitsi WebP/AVIF formaadivahetuse; brauser valib selle, millest ta aru saab.

Sealt edasi laienda: <input> koos kaasaegsete tüüpidega (color, date, range) kärbib kilobaite JS-vidinaid. <dialog> eemaldab sõltuvuse modaali teekidest. <del>/<ins> toob korra sisu versioonihaldusse.

Sa ei pea kõiki 18 ühe sprindiga juurutama. Alusta ühe sildiga nädalas. Kuue kuu jooksul on su märgend semantiliselt rikas ja kood ennast dokumenteeriv, ilma ühegi JavaScripti reata seal, kus seda vaja pole.

Kui sa ei tea, kust alustada, ava oma praegune projekt, leia lähim <div class="..."> ilma selge semantikata ja asenda see sobiva sildiga nimekirjast. Erinevus koodi loetavuses on kohe märgatav.