Kuinka monta HTML-tagia sinä oikeasti käytät? Useimmilla kehittäjillä on arsenaalissaan noin tusina: div, p, a, img, span, otsikot ja listat. Loput yli 100 tagia spesifikaatiosta lojuvat käyttämättöminä, yksinkertaisesti siksi, että ihmiset unohtivat ne tai eivät koskaan tienneet niistä.

Se on virhe. Selaimet ovat oppineet ymmärtämään semantiikkaa syvällisemmin kuin ehkä luuletkaan. Ruudunlukijat nojaavat siihen. Hakukoneet jäsentävät rakenteen. Oikea tagi oikeassa paikassa tuo saavutettavuuden, hakukoneoptimoinnin ja luettavan koodin ilman yhtäkään riviä JavaScriptiä.

Valitsimme 18 HTML-tagia, jotka kannattaa lisätä jokapäiväiseen merkintäkieleesi. Ne eivät ole uusia siinä mielessä, että ne olisi "juuri julkaistu luonnoksesta", mutta ne ovat uusia monille kehittäjille, koska ne on epäreilusti sivuutettu. Jotkut tulevat HTML5:stä, toiset ovat aina olleet spesifikaatiossa. Jokaisesta on toimiva esimerkki ja selitys siitä, missä siitä on oikeasti hyötyä.

💡 Nopea yleiskatsaus:

• Mitkä tagit ratkaisevat saavutettavuus- ja semantiikkaongelmat ilman JavaScriptiä
• Missä sub/sup, dfn, var ja time ovat hyödyllisiä tekstin merkitsemisessä
• Miten <q>, <blockquote> ja <cite> muotoilevat lainaukset oikein
• Miksi <video>, <picture> ja <figure> jäsentävät mediasisältöä
• Mitä del/ins, meter, dialog ja menu tuovat käyttöliittymiin

1. Semanttinen tekstin merkintä: sub, sup, dfn, var, time, kbd

Viisi tagia, jotka muuttavat tavallisen tekstin rakenteeksi, jota sekä koneet että ihmiset ymmärtävät. Ei JavaScriptiä, vain natiivia HTML:ää.

<sub>** ja **<sup>: alaindeksi ja yläindeksi. Kemialliset kaavat, matemaattiset eksponentit, alaviitteet. CSS voi visuaalisesti laskea tai nostaa tekstiä vertical-align-ominaisuudella, mutta se ei välitä semantiikkaa. Ja sillä on merkitystä: ruudunlukija ilmoittaa "H kaksi O" sen sijaan, että lukisi "H kaksi O" tavallisena tekstinä. Älä käytä niitä puhtaasti koristeellisiin tarkoituksiin; tyylejä on sitä varten.

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

<dfn>: määriteltävä termi. Kun esittelet uuden käsitteen ja annat sen määritelmän, kääri termi tähän tagiin. Selain ei tee sille visuaalisesti mitään, mutta hakukoneet ja sanakirjalaajennukset käyttävät <dfn>-tagia rakentaakseen sivun sanaston. id-attribuutin avulla voit luoda takaisinviittauksia, kun mainitset termin uudelleen.

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

<var>: muuttuja. Teknisessä dokumentaatiossa, tutoriaaleissa, kaavojen kuvauksissa. Selaimet näyttävät sen oletuksena kursiivilla. Täysiin matemaattisiin lausekkeisiin MathML on parempi, mutta <var> on kätevä, kun muuttuja on osa lausetta.

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

<time>: päivämäärä tai aika. Koneiden on vaikea jäsentää "2. huhtikuuta" keskellä kappaletta. <time>-tagi eristää päivämäärän ja tarjoaa koneellisesti luettavan muodon datetime-attribuutin kautta. Kalenterit, hakukoneet, tapahtumajäsentimet: kaikki kiittävät sinua.

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

<kbd>: näppäimistösyöte. Ohjeet, pikanäppäimet, komennot. Visuaalisesti näytetään tasalevyisellä fontilla, semanttisesti erottaen näppäinten nimet ympäröivästä tekstistä. Voit sisäkkäistää niitä yhdistelmiä varten.

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

2. Lainaukset ja lähdeviitteet: q, blockquote, cite

Kolme tagia, jotka kattavat kaikki lainausskenaariot rivinsisäisestä fraasista laajaan kirjalainaukseen.

<q>: rivinsisäinen lainaus kappaleen sisällä. Selain lisää lainausmerkit automaattisesti sivun kielen mukaisesti. Valinnainen cite-attribuutti määrittää lähde-URL:n. Käyttäjä ei näe sitä, mutta koneet näkevät.

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

<blockquote>: lohkolainaus. Pidempiä lainauksia varten: kappale artikkelista, arvostelu, katkelma määrittelystä. Tukee myös cite-attribuuttia. Selain lisää oletuksena sisennyksen, ja voit tyylitellä sen haluamallasi tavalla.

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

<cite>: siteeratun teoksen nimi. Vain nimi: kirja, artikkeli, elokuva, peli. Ei tekijän nimeä, ei päivämäärää, pelkkä nimi. Selaimet näyttävät sen oletuksena kursiivilla. Usein sekoitetaan <q>:n ja <blockquote>:n cite-attribuuttiin, mutta ne ovat eri asioita: attribuutti tallentaa URL-osoitteen, kun taas <cite>-tagi näyttää nimen käyttäjälle.

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

3. Dokumentin rakenne: address ja dl/dt/dd

<address>: yhteystiedot. Ei yrityksen postiosoite (Schema-mikrodata hoitaa sen), vaan sivun tai artikkelin kirjoittajan yhteystiedot. Kun se sijoitetaan <article>-elementin sisään, se viittaa artikkelin kirjoittajaan; kun <body>-elementissä, sivuston omistajaan. Hakukoneet käyttävät tätä lohkoa Knowledge Graphin rakentamiseen.

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

<dl>**, <dt>, **<dd>: kuvauslista. Ei pelkkä "termisanasto", vaan mikä tahansa "avain/arvo"-rakenne: tuotetiedot, metadata, UKK. Yhdellä termillä (<dt>) voi olla useita kuvauksia (<dd>), ja päinvastoin. Järjestyksellä on väliä: termi tulee ensin, sitten sen kuvaus.

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

4. Mediasisältö: video, picture ja figure/figcaption

Kolme tehokasta työkalua visuaalisen ja multimediasisällön käsittelyyn. Kukin kattaa oman tehtäväalueensa.

<video>: upotettu video ilman kolmannen osapuolen soittimia. Voit määrittää yhden src-osoitteen tai useita <source>-elementtejä; selain valitsee ensimmäisen tuetun formaatin. Hyödyllinen yksityiskohta: autopictureinpicture-attribuutti pienentää videon automaattisesti kelluvaksi ikkunaksi välilehteä vaihdettaessa, kun taas disablepictureinpicture estää sen. Vastaavasti disableremoteplayback hallitsee suoratoistoa Chromecastiin ja Apple TV:hen.

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

<picture>: responsiiviset kuvat täydellä hallinnalla. Toisin kuin <img>-elementin srcset, jossa selain valitsee lähteen, <picture> antaa sinun määrittää tiukat media queryt. Eri formaatit (WebP Chromiumille, JPEG muille), eri rajaukset mobiilille, tumma versio tummalle tilalle, kaikki ilman yhtäkään JavaScript-riviä.

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>: itsenäistä sisältöä kuvatekstillä. Kuvitus, kaavio, koodilistaus, taulukko, mitä tahansa, jonka voi irrottaa päätekstistä ilman, että merkitys katoaa. <figcaption> linkittää kuvatekstin semanttisesti sisältöön: ruudunlukija lukee ne yhdessä eikä erillisinä elementteinä. Jos sisältö liittyy tekstiin vain väljästi (esimerkiksi lainaus sivupalkissa), käytä sen sijaan <aside>-elementtiä.

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

5. Navigaatiokartat: map ja area

Vanha mutta ei vanhentunut. Kuvakarttojen avulla kuvan yksittäisistä alueista tehdään klikattavia linkkejä. Kun teksti ei riitä (interaktiivinen metrokartta, rakennuksen pohjapiirros, anatominen kaavio), <map> ja <area> toimivat ilman JavaScriptiä.

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="Карта центра Лондона">

shape-attribuutti hyväksyy arvot circle, rect, poly ja default. Koordinaatit ovat pikseleinä vasemmasta yläkulmasta. Monimutkaisille ääriviivoille käytä poly-arvoa ja pistelistaa. Iästään huolimatta (tagi on reilusti yli kaksikymmentä vuotta vanha) se toimii vakaasti kaikissa selaimissa.

6. Tekstimuokkaukset: del ja ins

Kun näytät muokkauksia, dokumenttimuutoksia, artikkelipäivityksiä tai lainsäädännön eroavaisuuksia, <del> ja <ins> tarjoavat semanttisesti oikean esitystavan. <del> merkitsee poistetun sisällön (selaimet yliviivaavat sen), <ins> merkitsee lisätyn sisällön (selaimet alleviivaavat sen).

Molemmat tukevat attribuutteja cite (miksi muutos tehtiin) ja datetime (milloin). Hakukoneet näkevät sivun versiohistorian pelkän ylikirjoitetun tekstin sijaan.

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

Älä käytä <del>- ja <ins>-elementtejä puhtaasti koristeelliseen yliviivaukseen; sitä varten on text-decoration: line-through. Nämä tagit liittyvät nimenomaan sisällön versiointiin.

7. Seuraavan sukupolven syöttökentät

<input>-elementti on kehittynyt paljon pidemmälle kuin pelkäksi tekstimerkkijonoksi. Nykyaikaiset selaimet tukevat kymmeniä tyyppejä, joista jokainen tuo mukanaan sisäänrakennetun validoinnin, mobiililaitteelle räätälöidyn näppäimistön ja natiivit käyttöliittymäkomponentit ilman yhtäkään JavaScript-riviä.

Keskeisiä tyyppejä, joita moni projekti yhä sivuuttaa:

• type="color": väripaletti. Natiivi valitsin ilman tarvetta raahata mukaan erillistä värikirjastoa.
• type="range": liukusäädin välillä min ja max. Äänenvoimakkuus, hinta, arvosana, kaikki ilman liukusäätimen koodaamista.
• type="date": lokalisoitu kalenteri. Selain näyttää päivämäärävalitsimen, jonka muotoilu on sovitettu käyttäjän alueasetuksiin.
• type="datetime-local": päivämäärä ja kellonaika ilman aikavyöhykettä. Varauksiin, määräaikoihin, ajanvarausjärjestelmiin.

pattern-attribuutti hyväksyy säännöllisen lausekkeen: arvo ei läpäise validointia ennen kuin se vastaa lauseketta.

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. Numeeriset indikaattorit

Älä sekoita sitä <progress>-elementtiin: <meter> on staattiselle arvolle tunnetulla vaihteluvälillä (levynkäyttö, pistemäärä, arvosana), kun taas <progress> on tehtävän edistymisen seurantaan (lataus, vaiheittainen prosessi).

Selain värittää <meter>-elementin automaattisesti sen perusteella, missä arvo sijaitsee suhteessa low-, high- ja optimum-arvoihin. Vihreä vyöhyke: arvo lähellä optimia; keltainen: siedettävä; punainen: normaalin vaihteluvälin ulkopuolella. Värien logiikkaa voi muokata CSS:llä, mutta perussemantiikka toimii suoraan ilman säätöä.

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

9. Vuorovaikutteiset elementit: dialog ja menu

Kaksi tagia vuorovaikutuksiin, jotka aiemmin vaativat JavaScript-kirjastoja tai rakentamista alusta alkaen.

<dialog>: natiivi modaali-ikkuna. Elementti on itsessään piilotettu. Lisää open-attribuutti, ja selain näyttää sen sivun päällä top layer -kerroksessa. JavaScript-metodi showModal() tarjoaa lisäksi ::backdrop-pseudo-elementin taustan himmentämiseen. Ponnahdusikkuna, toiminnon vahvistus, hälytys, kaikki ilman yhtäkään CSS-sijoitteluriviä.

Tuki: Chrome, Edge, Firefox, Safari (vuodesta 2022 lähtien). Vanhemmilla selaimilla dialogi piirtyy tavallisena lohkokontainerina; polyfill-kirjastoja on saatavilla.

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>: lista vuorovaikutteisia toimintoja. Ei navigointiin (siihen käytä <nav>-elementtiä), vaan nimenomaan työkalupalkiksi: siveltimet grafiikkaeditorissa, muotoilu-painikkeet, objektien toiminnot. Semanttinen vastine <ul>-elementille, mutta painikkeille ja komennoille. Sillä ei ole oletustyyliä, ainoastaan merkitys.

type="toolbar" -attribuutti (ainoa, joka on jäänyt spesifikaatioon) asettaa työkalupalkkiroolin yksiselitteisesti. Kontekstityyppi on poistettu standardista, joten <menu> on nykyään tarkoitettu yksinomaan näkyville toimintosarjoille ruudulla.

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

Jos HTML-merkintä on sinulle uutta, tässä on erinomainen johdanto Traversylta; Traversy Media on yksi YouTuben parhaista frontend-kanavista:

⁉️🤔 Usein kysytyt kysymykset

*Miksi käyttää semanttisia tageja, kun kaiken voi rakentaa <div>- ja <span>-elementeillä?*

Ruudunlukijat käyttävät tageja rakentaakseen sivun rakenteen sokeille käyttäjille; div on niille näkymätön. Hakukoneet poimivat semantiikkaa rich snippettejä varten: arvosanat <meter>-elementistä, UKK-kysymykset <dl>-elementistä, yhteystiedot <address>-elementistä. Lisäksi koodi dokumentoi itse itsensä: <article> kertoo heti "tämä on artikkeli", kun taas <div class="article"> ei kerro.

Mitkä listan tageista ovat jo turvallisia käyttää tuotannossa?

Kaikki kahdeksantoista. <dialog> sai täyden selaintuen Safari 15.4:n myötä (2022), <menu> toimii käytännössä semanttisena kääreenä kaikkialla. <picture> ja <video> <source>-elementin kanssa ovat olleet kypsiä vuodesta 2016. <meter>, <time>, <kbd>, <dfn> tulevat HTML:n pitkästä perinnöstä ja niillä on universaali tuki. Ainoa varaus: <input type="date"> ja type="color" voivat näkyä eri tavoin eri käyttöjärjestelmissä, mutta se ei riko toiminnallisuutta.

Ovatko <b> ja <i> kuolleita?

Eivät, mutta niiden rooli on muuttunut. <b> on nyt huomion kiinnittämistä ilman tärkeyden korostamista (avainsanat ansioluettelossa), <i> on idiomaattisia ilmauksia, vieraskielisiä termejä ja laivojen nimiä varten. Tärkeyden korostamiseen käytä <strong>-elementtiä; painokkaaseen korostukseen <em>-elementtiä. Tyylillinen lihavointi/kursivointi tehdään vain CSS:llä.

*Voinko käyttää <meter>-elementtiä latauksen edistymispalkkiin?*

Et. <meter> on staattiselle arvolle tunnetulla vaihteluvälillä (levynkäyttö, pistemäärä, arvosana). Ajan myötä etenevään edistymiseen käytä yksinomaan <progress>-elementtiä. Selaimet animoivat <progress>-elementtiä, kun value muuttuu, kun taas <meter> pysyy staattisena. Nämä sekoitetaan jatkuvasti, mutta semantiikka eroaa ja ruudunlukijat ilmoittavat ne eri tavoin.

*Mitä teen, jos selain ei tue <dialog>-elementtiä?*

Elementti yksinkertaisesti renderöityy lohkokonttina eikä hajoa. Lisää polyfill: Google Chrome -tiimin dialog-polyfill (400 riviä, ei riippuvuuksia) kattaa showModal()-, close()- ja ::backdrop-toiminnot vanhemmille selaimille.

Mikä tagi kannattaa ottaa käyttöön ensimmäisenä?

{iframe} ja <picture> ovat kaksi tagia, jotka tuottavat suurimman hyödyn pienimmällä vaivalla. {iframe} korvaa minkä tahansa kolmannen osapuolen videosoittimen natiivilla ikkunalla, jossa on kuva kuvassa -toiminto. <picture> poistaa manuaalisen WebP/AVIF-formaattien vaihtamisen; selain valitsee sen, mitä se ymmärtää.

Siitä eteenpäin skaalaa ylöspäin: <input> moderneilla tyypeillä (color, date, range) karsii kilotavuja JavaScript-widgettejä. <dialog> poistaa riippuvuuden modaalikirjastoista. <del>/<ins> tuo järjestystä sisällön versiointiin.

Sinun ei tarvitse toteuttaa kaikkia 18:aa yhdessä sprintissä. Aloita yhdellä tagilla viikossa. Kuuden kuukauden sisällä merkintäsi on semanttisesti rikasta ja koodisi itsedokumentoivaa, ilman yhtäkään riviä JavaScriptiä siellä, missä sitä ei tarvita.

Jos et tiedä mistä aloittaa, avaa nykyinen projektisi, etsi lähin <div class="...">, jolla ei ole selvää semantiikkaa, ja korvaa se sopivalla tagilla listalta. Ero koodin luettavuudessa on heti havaittavissa.