Hur många HTML-taggar använder du egentligen? De flesta utvecklare har en arsenal på ungefär ett dussin: div, p, a, img, span, rubriker och listor. De återstående 100+ taggarna från specifikationen ligger oanvända, helt enkelt för att folk har glömt bort dem eller aldrig känt till dem.

Det är ett misstag. Webbläsare har lärt sig att förstå semantik djupare än du kanske tror. Skärmläsare förlitar sig på det. Sökmotorer tolkar strukturen. Rätt tagg på rätt plats ger tillgänglighet, SEO och läsbar kod utan en enda rad JS.

Vi har valt ut 18 HTML-taggar som är värda att lägga till i din vardagliga markup. De är inte nya i bemärkelsen "nyss släppta från utkast", men de är nya för många utvecklare eftersom de har varit orättvist förbisedda. Vissa kommer från HTML5, andra har alltid funnits i specifikationen. Varje tagg inkluderar ett fungerande exempel och en förklaring av var den faktiskt gör nytta.

💡 Snabb översikt:

• Vilka taggar som löser tillgänglighets- och semantikproblem utan JavaScript
• Var sub/sup, dfn, var och time kommer till användning för textformatering
• Hur <q>, <blockquote> och <cite> formaterar citat på rätt sätt
• Varför <video>, <picture> och <figure> organiserar medieinnehåll
• Vad del/ins, meter, dialog och menu tillför gränssnitt

1. Semantisk textformatering: sub, sup, dfn, var, time, kbd

Fem taggar som förvandlar vanlig text till en struktur som är begriplig för både maskiner och människor. Ingen JS, bara ren HTML.

<sub>** och **<sup>: nedsänkt och upphöjd text. Kemiska formler, matematiska exponenter, fotnoter. CSS kan visuellt sänka eller höja text med vertical-align, men det förmedlar inte semantiken. Och det spelar roll: en skärmläsare kommer att meddela "H två O" istället för att läsa "H två O" som vanlig text. Använd dem inte för rent dekorativa syften; det finns stilar för det.

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

<dfn>: en term som definieras. När du introducerar ett nytt begrepp och ger dess definition, omslut termen med denna tagg. Webbläsaren gör inget visuellt med den, men sökmotorer och ordbokstillägg använder <dfn> för att bygga en sidordlista. Attributet id låter dig skapa bakåtreferenser när du nämner termen igen.

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

<var>: en variabel. I teknisk dokumentation, handledningar, formelbeskrivningar. Webbläsare renderar den i kursiv stil som standard. För fullständiga matematiska uttryck är MathML bättre, men <var> är praktiskt när variabeln är en del av en mening.

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

<time>: ett datum eller en tidpunkt. Maskiner har svårt att tolka "2 april" mitt i ett stycke. Taggen <time> isolerar datumet och tillhandahåller ett maskinläsbart format via attributet datetime. Kalendrar, sökmotorer, händelsetolkare: alla kommer att tacka dig.

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

<kbd>: tangentbordsinmatning. Instruktioner, kortkommandon, kommandon. Visas visuellt i ett typsnitt med fast bredd, vilket semantiskt separerar tangentnamn från omgivande text. Du kan nästla dem för kombinationer.

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

2. Citat och källhänvisningar: q, blockquote, cite

Tre taggar som täcker alla citatscenarier, från en infogad fras till ett längre bokutdrag.

<q>: en inline-citat inom ett stycke. Webbläsaren omsluter automatiskt innehållet med citattecken som matchar sidans språk. Det valfria attributet cite anger källans URL. Användaren ser den inte, men det gör maskiner.

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

<blockquote>: ett blockcitat. För längre utdrag: ett stycke från en artikel, en recension, ett avsnitt ur en specifikation. Stöder också cite. Webbläsaren lägger till ett indrag som standard, och du kan styla det hur du vill.

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

<cite>: titeln på det citerade verket. Endast titeln: en bok, artikel, film, spel. Inte författarens namn, inte datumet, bara titeln. Webbläsare visar det i kursiv stil som standard. Förväxlas ofta med cite-attributet på <q>/<blockquote>, men det är olika saker: attributet lagrar en URL, medan <cite>-taggen visar titeln för användaren.

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

3. Dokumentstruktur: address och dl/dt/dd

<address>: kontaktinformation. Inte ett företags postadress (det hanterar Schema-mikrodata), utan kontaktuppgifterna till sidans eller artikelns författare. När den placeras inuti <article> avser den artikelns författare; när den ligger i <body> avser den webbplatsägaren. Sökmotorer använder detta block för att bygga Knowledge Graph.

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

<dl>**, <dt>, **<dd>: en beskrivningslista. Inte bara en "ordlista", utan vilken "nyckel/värde"-struktur som helst: produktspecifikationer, metadata, FAQ. En term (<dt>) kan ha flera beskrivningar (<dd>), och vice versa. Ordningen spelar roll: termen kommer först, sedan dess beskrivning.

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

4. Medieinnehåll: video, picture och figure/figcaption

Tre kraftfulla verktyg för att arbeta med visuellt innehåll och multimedia. Var och en täcker sitt eget användningsområde.

<video>: inbäddad video utan tredjepartsspelare. Du kan ange en enda src eller flera <source>-element; webbläsaren väljer det första formatet som stöds. En användbar detalj: attributet autopictureinpicture förminskar automatiskt videon till ett flytande fönster när du byter flik, medan disablepictureinpicture förhindrar det. På samma sätt styr disableremoteplayback casting till Chromecast och Apple TV.

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

<picture>: responsiva bilder med full kontroll. Till skillnad från srcset på <img>, där webbläsaren väljer källa, låter <picture> dig ange strikta media queries. Olika format (WebP för Chromium, JPEG för andra), olika beskärningar för mobil, en mörk version för mörkt läge, allt utan en enda rad JS.

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>** och **<figcaption>: fristående innehåll med en bildtext. En illustration, ett diagram, en kodsnutt, en tabell, allt som kan tas bort från huvudflödet utan att innebörden går förlorad. <figcaption> knyter semantiskt bildtexten till innehållet: en skärmläsare läser dem tillsammans i stället för som separata element. Om innehållet bara är löst kopplat till texten (till exempel ett citat i en sidopanel), använd <aside> i stället.

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

5. Navigationskartor: map och area

Gammalt men inte förlegat. Bildkartor gör enskilda områden i en bild till klickbara länkar. Där text inte räcker till (en interaktiv tunnelbanekarta, en byggnadsplanritning, ett anatomiskt diagram) fungerar <map> med <area> utan JS.

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

Attributet shape accepterar circle, rect, poly och default. Koordinater anges i pixlar från det övre vänstra hörnet. För komplexa konturer använder du poly med en lista med punkter. Trots sin ålder (taggen är väl över tjugo år gammal) har den stabilt stöd i alla webbläsare.

6. Textredigering: del och ins

När du visar redigeringar, dokumentändringar, artikeluppdateringar eller lagtextskillnader ger <del> och <ins> en semantiskt korrekt representation. <del> markerar borttaget innehåll (webbläsare stryker över det), <ins> markerar tillagt innehåll (webbläsare understryker det).

Båda stöder cite (varför det ändrades) och datetime (när). Sökmotorer ser sidans versionshistorik snarare än bara överskriven text.

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

Använd inte <del> och <ins> för rent dekorativ genomstrykning; text-decoration: line-through finns för det. Dessa taggar handlar specifikt om innehållsversionering.

7. Nästa generations inmatningsfält

Elementet <input> har utvecklats långt bortom textsträngar. Moderna webbläsare stöder dussintals typer, där var och en ger inbyggd validering, ett mobilanpassat tangentbord och inbyggda widgetar utan en enda rad JavaScript.

Viktiga typer som många projekt fortfarande ignorerar:

• type="color": en färgpalett. En inbyggd färgväljare utan att dra in ett spektrumbibliotek.
• type="range": ett skjutreglage mellan min och max. Volym, pris, betyg, allt utan att koda en slider.
• type="date": en lokaliserad kalender. Webbläsaren visar en datumväljare med formatering anpassad till användarens region.
• type="datetime-local": datum och tid utan tidszon. För bokningar, deadlines, schemaläggare.

Attributet pattern tar ett reguljärt uttryck: värdet godkänns inte vid validering förrän det matchar mönstret.

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. Numeriska indikatorer

Blanda inte ihop det med <progress>: <meter> är för ett statiskt värde inom ett känt intervall (diskanvändning, poäng, betyg), medan <progress> är för slutförandegrad av en uppgift (nedladdning, steg-för-steg-process).

Webbläsaren färglägger <meter> automatiskt baserat på var värdet ligger i förhållande till low, high och optimum. Grön zon: värdet nära optimum; gult: acceptabelt; rött: utanför normalintervallet. Färglogiken kan anpassas via CSS, men grundsemantiken fungerar direkt.

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

9. Interaktiva element: dialog och menu

Två taggar för interaktioner som tidigare krävde JS-bibliotek eller att bygga från grunden.

<dialog>: ett inbyggt modalfönster. Elementet är dolt av sig självt. Lägg till attributet open så visar webbläsaren det ovanför sidan i top layer. JavaScript-metoden showModal() ger också pseudoelementet ::backdrop för att dimma bakgrunden. Popup, bekräftelse av åtgärd, varning, allt utan en enda rad CSS-positionering.

Stöd: Chrome, Edge, Firefox, Safari (sedan 2022). För äldre webbläsare renderas dialogen helt enkelt som en vanlig blockbehållare; polyfills finns tillgängliga.

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>: en lista med interaktiva åtgärder. Inte navigering (använd <nav> för det), utan specifikt ett verktygsfält: penslar i ett grafikprogram, formateringsknappar, objektåtgärder. Den semantiska motsvarigheten till <ul>, men för knappar och kommandon. Det har ingen standardstil, bara betydelse.

Attributet type="toolbar" (det enda som finns kvar i specifikationen) sätter uttryckligen verktygsfältsrollen. Kontexttypen har tagits bort ur standarden, så <menu> är idag uteslutande för synliga uppsättningar av åtgärder på skärmen.

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

Om HTML-uppmärkning är nytt för dig finns här en utmärkt introduktion från Traversy; Traversy Media är en av de bästa frontend-kanalerna på YouTube:

⁉️🤔 Vanliga frågor

Varför använda semantiska taggar när man kan bygga allt med <div> och <span>?

Skärmläsare förlitar sig på taggar för att bygga sidstruktur för blinda användare; div är osynligt för dem. Sökmotorer extraherar semantik för rich snippets: betyg från <meter>, FAQ från <dl>, kontaktuppgifter från <address>. Dessutom dokumenterar koden sig själv: <article> säger direkt "detta är en artikel", medan <div class="article"> inte gör det.

Vilka taggar från listan är redan säkra att använda i produktion?

Alla arton. <dialog> fick stöd i alla webbläsare med Safari 15.4 (2022), <menu> fungerar i praktiken som en semantisk wrapper överallt. <picture> och <video> med <source> har varit mogna sedan 2016. <meter>, <time>, <kbd>, <dfn> kommer från HTML:s djupa arv med universellt stöd. Enda brasklappen: <input type="date"> och type="color" kan renderas olika mellan operativsystem, men det bryter inte funktionaliteten.

Är <b> och <i> döda?

Nej, men deras roll har förändrats. <b> används nu för att dra uppmärksamhet utan att förmedla vikt (nyckelord i ett CV), <i> är för idiomatiska uttryck, termer på ett annat språk, fartygsnamn. För att betona vikt, använd <strong>; för tryckbetoning, <em>. Stilistisk fet/kursiv stil är enbart CSS.

Kan jag använda <meter> för en laddningsförloppsindikator?

Nej. <meter> är för ett statiskt värde inom ett känt intervall (diskanvändning, poäng, betyg). För förlopp över tid, använd uteslutande <progress>. Webbläsare animerar <progress> när value ändras, medan <meter> förblir statisk. De blandas ständigt ihop, men semantiken skiljer sig och skärmläsare annonserar dem olika.

Vad ska jag göra om en webbläsare inte stöder <dialog>?

Elementet renderas helt enkelt som en blockbehållare och går inte sönder. Lägg till en polyfill: dialog-polyfill från Google Chrome-teamet (400 rader, inga beroenden) täcker showModal(), close() och ::backdrop för äldre webbläsare.

Vilken tagg bör du införa först?

{iframe} och <picture> är två taggar som ger maximal nytta med minimal ansträngning. {iframe} ersätter vilken tredjepartsvideospelare som helst med ett native-fönster med bild-i-bild. <picture> eliminerar manuell växling mellan WebP/AVIF-format; webbläsaren väljer det den förstår.

Därifrån kan du skala upp: <input> med moderna typer (color, date, range) kapar bort kilobyte av JS-widgets. <dialog> tar bort beroendet av modala bibliotek. <del>/<ins> bringar ordning i versionshantering av innehåll.

Du behöver inte implementera alla 18 i en enda sprint. Börja med en tagg per vecka. Inom sex månader kommer din uppmärkning att vara semantiskt rik och din kod självdokumenterande, utan en enda rad JavaScript där den inte behövs.

Om du inte vet var du ska börja, öppna ditt nuvarande projekt, hitta närmaste <div class="..."> utan tydlig semantik och ersätt den med en lämplig tagg från listan. Skillnaden i kodläsbarhet blir omedelbart märkbar.