dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
HTML

Învață HTML: taguri și elemente explicate cu exemple

128 de elemente 9 categorii

HTML (HyperText Markup Language) este limbajul standard fundamental al web-ului. El nu este un limbaj de programare în sens clasic (nu execută calcule sau logică condițională), ci un limbaj de marcare care oferă scheletul, semantica și semnificația logică a conținutului din orice pagină web: titluri, paragrafe, imagini, formulare interactive, tabele și legături hipertext.

Browserul web citește fișierul HTML linie cu linie și construiește DOM (Document Object Model) — arborele de obiecte pe care stilurile CSS îl colorează și îl aranjează în spațiu, iar codul JavaScript îl transformă într-o experiență dinamică și interactivă.

Boilerplate HTML5 Modern (Șablon Starter de Producție)

Orice pagină web modernă din anul 2026 ar trebui să pornească de la această structură curată, optimizată pentru dispozitive mobile, performanță și indexare SEO:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Ghid complet HTML5 pentru dezvoltatori web moderni.">
    <meta name="theme-color" content="#3858e9">
    
    <title>Titlul Paginii Tale | dexblog.ro</title>
    
    <!-- Favicon modern vectorial (SVG) cu fallback ICO -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="alternate icon" href="/favicon.ico">
    
    <!-- Fișier CSS extern & pre-conectare fonturi -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Scripturi externe încărcate asincron fără blocarea randării -->
    <script src="app.js" defer></script>
</head>
<body>
    <!-- Conținutul vizibil al paginii se construiește exclusiv în interiorul body -->
    <header>
        <h1>Titlu Principal al Paginării</h1>
    </header>
    <main>
        <p>Primul paragraf de conținut semantic.</p>
    </main>
</body>
</html>

Arhitectura Semantică a unei Pagini Web

Înainte de HTML5, paginile web erau construite aproape exclusiv din div-uri generice (o practică numită colocvial „div soup”: <div id="header">, <div class="nav">, <div class="footer">). Standardul HTML5 a introdus elementele semantice, care descriu explicit browserului, motoarelor de căutare (Google, Bing) și cititoarelor de ecran (Screen Readers pentru persoane cu deficiențe) ce reprezintă fiecare zonă:

Element Semantic Rol & Semnificație Unde se plasează în pagină
<header> Zona introductivă a paginii sau a unui articol (siglă, titlu, autor, dată). La începutul documentului sau în interiorul unui <article>.
<nav> Secțiune dedicată legăturilor majore de navigare în site. Meniul principal de sus, meniul din subsol sau bara de categorii.
<main> Conținutul central, dominant și unic al documentului (fără meniuri sau copyright). O singură instanță per pagină, între <header> și <footer>.
<article> O unitate autonomă de conținut care poate fi distribuită independent (articol, postare, comentariu). În interiorul lui <main>.
<section> O grupare tematică de conținut dintr-o pagină, de regulă însoțită de un subtitlu propriu. Pentru capitole, tab-uri sau blocuri logice de informații.
<aside> Conținut colateral legat tangențial de conținutul principal (sidebar, casete cu sfaturi, reclame). Pe bara laterală sau în casete informative inserate în articol.
<footer> Subsolul documentului sau al unei secțiuni (autor, copyright, linkuri legale, contact). La finalul paginii sau la sfârșitul unui articol.

Elemente Block vs. Elemente Inline vs. Inline-Block

Browserul tratează fiecare element HTML conform unui model de afișare implicit (Display Behavior):

  • Elemente de tip Block (ex: <div>, <p>, <h1>-<h6>, <section>, <ul>): Încep întotdeauna pe o linie nouă și se întind automat pe toată lățimea disponibilă (100% din părinte). Respectă toate proprietățile Box Model (width, height, margin-top/bottom, padding).
  • Elemente de tip Inline (ex: <span>, <a>, <strong>, <em>, <code>): Nu încep pe o linie nouă, ci curg natural în interiorul textului, ocupând doar lățimea necesară conținutului. Nu respectă width, height și margin-top/bottom.
  • Regulă de aur de nesting (încapsulare): În HTML5, elementele inline nu pot conține elemente de tip block (cu o excepție esențială: tagul <a> poate încapsula un card întreg format din titlu și paragraf pentru a crea o zonă clicabilă unitară). De asemenea, un paragraf <p> nu poate conține niciodată un <div> sau o listă <ul>.

Bune Practici Core Web Vitals & Performanță în HTML

3 Reguli Esențiale pentru un Scor 100 pe Google Lighthouse
  1. Elimină deplasările vizuale (CLS – Cumulative Layout Shift): Specifică întotdeauna atributele width și height pe toate elementele <img> și <video>, pentru a permite browserului să rezerve spațiul exact înainte de descărcarea fișierului.
  2. Optimizarea vitezei de încărcare (LCP – Largest Contentful Paint): Folosește loading="lazy" pe toate imaginile situate mai jos în pagină (below-the-fold) și fetchpriority="high" pe imaginea principală de hero.
  3. Nu bloca firul de randare: Scripturile JavaScript plasate în antet trebuie să aibă întotdeauna atributul defer (se execută în ordine după parsarea DOM-ului) sau async (pentru scripturi independente de analiză trafic).

Mai jos găsești catalogul complet de taguri și elemente HTML5 grupate pe categorii. Apasă pe oricare dintre ele pentru sintaxă, atribute acceptate, exemple practice de cod și capcane frecvente.

Structură semantică (Layout) 10 elemente

Formulare și introducere date 27 de elemente

Elemente interactive 9 elemente

Linkuri și multimedia 16 elemente

Text și formatare 22 de elemente

Structura documentului 17 elemente

Liste 4 elemente

Tabele 7 elemente

Atribute globale 16 elemente

Toate tagurile HTML

Lista completă a tagurilor și elementelor HTML explicate în această secțiune, cu sintaxa lor de bază. Tagurile cu link au o pagină dedicată, cu explicații, atribute și exemple practice.

Structura documentului (16)

Tag / Element Ce face
<!DOCTYPE html> Declară tipul documentului și instruiește browserul să redea pagina conform standardelor moderne HTML5.
<!DOCTYPE html>
<html> Elementul rădăcină al oricărui document HTML, care cuprinde tot conținutul și metadatele paginii.
<html lang="ro">
<head> Conține metadatele documentului, linkuri către fișiere CSS, scripturi și informații pentru motoarele de căutare.
<head>
<title> Definește titlul paginii, afișat în fila browserului, în istoricul de navigare și în rezultatele Google.
<title>Titlul paginii mele</title>
<meta> Specifică metadate despre document: setul de caractere, configurația pentru mobil, descrierea SEO și cuvintele cheie.
<meta charset="UTF-8">
<link> Leagă documentul curent de resurse externe: fișiere CSS, pictograme (favicon), fonturi web sau versiuni canonice.
<link rel="stylesheet" href="stil.css">
<style> Permite scrierea de reguli CSS direct în documentul HTML (stiluri interne).
<style>
<script> Încarcă sau conține cod executabil JavaScript pentru a adăuga interactivitate paginii.
<script src="app.js" defer></script>
<body> Conține tot conținutul vizibil al unei pagini web: texte, imagini, linkuri, butoane, formulare și tabele.
<body>
&lt;noscript&gt; Conținut afișat doar când JavaScript este dezactivat sau blocat în browser.
<noscript>
&lt;base&gt; Stabilește adresa de bază pentru toate URL-urile relative din pagină și, opțional, ținta implicită a linkurilor.
<base href="https://www.exemplu.ro/magazin/" target="_blank">
&lt;link rel=preload&gt; Cere browserului să descarce devreme o resursă de care pagina are sigur nevoie curând: font, imagine principală, script sau CSS.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
&lt;link rel=preconnect&gt; și dns-prefetch Deschide din timp conexiunea către un alt domeniu de unde pagina va descărca fișiere, ca să câștige timp la prima cerere.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
&lt;link rel=canonical&gt; Indică motoarelor de căutare adresa principală a unei pagini care poate fi accesată prin mai multe URL-uri.
<link rel="canonical" href="https://www.exemplu.ro/blog/ghid-html/">
&lt;link rel=icon&gt; (favicon) Setează iconița site-ului, afișată în tabul browserului, la favorite și pe ecranul telefonului.
<link rel="icon" href="/favicon.ico" sizes="32x32">
&lt;meta name=robots&gt; Spune motoarelor de căutare dacă pot indexa pagina, dacă pot urma linkurile ei și cum pot afișa fragmente din ea.
<meta name="robots" content="noindex, follow">

Text și formatare (19)

Tag / Element Ce face
<h1> – <h6> Definește titlurile ierarhice ale paginii, de la cel mai important (h1) până la cel mai mic (h6).
<h1>Titlu principal</h1>
<p> Definește un paragraf de text; element de tip bloc, separat automat de restul conținutului prin spațiu vertical.
<p>Acesta este un paragraf de text.</p>
<strong> și <em> Evidențiază textul: strong conferă importanță majoră (îngroșat), iar em conferă accent sau intonație (cursiv/italic).
<strong>Text important</strong>
<span> Container generic de tip inline, utilizat pentru a grupa o porțiune de text și a-i aplica stiluri CSS sau acțiuni JS.
<span class="evidentiat">text</span>
<br> și <hr> Elemente vide: br forțează o linie nouă în text, iar hr creează o linie orizontală de separare tematică.
<br>
<blockquote> Reprezintă un citat lung dintr-o altă sursă, afișat de obicei indentat sau cu o bară verticală.
<blockquote cite="https://exemplu.ro">
<code> și <pre> Afișează fragmente de cod: code pentru fragmente scurte în text și pre pentru blocuri cu spații și linii păstrate.
<code>textCod</code>
<mark> și <small> mark evidențiază textul ca și cum ar fi subliniat cu marker galben; small este folosit pentru detalii legale și note de subsol.
<mark>Text evidențiat</mark>
&lt;b&gt; și &lt;i&gt; Elementul b atrage atenția asupra unui cuvânt fără să-l facă mai important, iar i marchează o voce diferită: termeni străini, tehnici sau gânduri.
<b>cuvânt-cheie</b>
&lt;u&gt; și &lt;s&gt; Elementul u marchează o adnotare nearticulată (de exemplu o greșeală de scriere), iar s marchează un text care nu mai este corect sau relevant.
<u class="greseala">cuvnt</u>
&lt;sub&gt; și &lt;sup&gt; Elementul sub scrie textul mai jos și mai mic (indice), iar sup îl scrie mai sus (exponent), pentru formule, unități de măsură și note.
H<sub>2</sub>O
&lt;q&gt; și &lt;cite&gt; Elementul q marchează un citat scurt în interiorul unei fraze, cu ghilimele automate, iar cite marchează titlul unei lucrări.
<q cite="https://exemplu.ro/sursa">Citat scurt</q>
&lt;address&gt; Conține datele de contact ale autorului sau ale proprietarului paginii ori ale articolului în care se află.
<address>
&lt;del&gt; și &lt;ins&gt; Marchează modificările unui document: del arată textul șters, iar ins textul adăugat, cu data și motivul schimbării.
<del datetime="2026-10-20">text șters</del>
&lt;wbr&gt; Indică un loc în care browserul are voie să rupă rândul unui cuvânt foarte lung, dacă nu încape, fără să adauge cratimă.
www.exemplu.ro/<wbr>pagini/<wbr>foarte/<wbr>lungi
&lt;bdi&gt; și &lt;bdo&gt; Controlează direcția textului: bdi izolează un text cu direcție necunoscută (de exemplu un nume arab), iar bdo forțează o direcție.
<bdi>نور</bdi>
&lt;ruby&gt;, &lt;rt&gt; și &lt;rp&gt; Adaugă adnotări mici deasupra caracterelor, de obicei pronunția pentru scrierea chineză sau japoneză.
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>
&lt;hgroup&gt; Grupează un titlu cu subtitlul sau sloganul lui, ca subtitlul să nu fie tratat ca un titlu separat.
<hgroup>
&lt;menu&gt; Listă de comenzi pe care utilizatorul le poate executa, de exemplu butoanele unei bare de unelte; se comportă ca o listă ul.
<menu>

Linkuri și multimedia (12)

Tag / Element Ce face
<a> Creează un hyperlink către o altă pagină web, un fișier, o adresă de email, un număr de telefon sau o ancoră din pagină.
<a href="https://dexblog.ro">dexblog.ro</a>
<img> Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).
<img src="poza.jpg" alt="Descrierea imaginii" width="600" height="400" loading="lazy">
<picture> Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.
<picture>
<figure> și <figcaption> Grupează o imagine, o diagramă sau un bloc de cod împreună cu legenda sa explicativă (figcaption).
<figure>
<video> Redă conținut video direct în browser, fără pluginuri externe, cu butoane native de redare și volum.
<video src="clip.mp4" controls width="640" poster="coperta.jpg">
<audio> Redă fișiere audio (podcasturi, muzică, efecte sonore) direct în pagină, cu controale native de redare.
<audio src="melodie.mp3" controls>
<iframe> Încorporează un alt document HTML în interiorul paginii curente (videoclipuri YouTube, hărți, widget-uri).
<iframe src="https://harta.ro" width="600" height="400" title="Harta sediului"></iframe>
&lt;object&gt; și &lt;embed&gt; Încorporează în pagină o resursă externă, de obicei un PDF sau o imagine SVG, afișată de browser sau de un vizualizator integrat.
<object data="fisier.pdf" type="application/pdf" width="600" height="400">
&lt;map&gt; și &lt;area&gt; Creează o hartă de imagine: zone dreptunghiulare, circulare sau poligonale dintr-o imagine devin linkuri separate.
<img src="harta.png" usemap="#judete" alt="Harta">
&lt;source&gt; Oferă mai multe variante ale aceluiași fișier media, iar browserul o alege pe prima pe care o poate folosi.
<video controls>
loading=lazy Amână descărcarea imaginilor și a cadrelor iframe până când utilizatorul derulează aproape de ele.
<img src="poza.jpg" alt="..." width="800" height="600" loading="lazy">
fetchpriority Indică browserului dacă o imagine, un script sau o resursă preîncărcată trebuie descărcată cu prioritate mai mare sau mai mică.
<img src="banner.jpg" alt="..." fetchpriority="high">

Liste (4)

Tag / Element Ce face
<ul> Creează o listă neordonată, în care elementele sunt marcate prin buline (puncte), fără o ordine numerică specifică.
<ul>
<ol> Creează o listă ordonată, în care elementele sunt numerotate automat (1, 2, 3 sau litere A, B, C).
<ol start="1">
<li> Reprezintă un element individual într-o listă ordonată (ol) sau neordonată (ul).
<li>Element din listă</li>
<dl>, <dt> și <dd> Listă de descrieri sau definiții: dl este containerul, dt este termenul (numele), iar dd este descrierea (valoarea).
<dl>

Tabele (7)

Tag / Element Ce face
<table> Containerul principal pentru afișarea datelor tabelare structurate pe rânduri și coloane.
<table>
<thead>, <tbody> și <tfoot> Împarte tabelul în trei secțiuni semantice: antetul cu titlurile coloanelor, corpul cu datele și subsolul cu totalurile.
<table>
<tr> Definește un rând orizontal (table row) în interiorul unui tabel.
<tr>
<th> Celulă de antet într-un tabel: textul este afișat implicit îngroșat și centrat.
<th scope="col">Nume coloană</th>
<td> Celulă standard de date (table data) într-un tabel HTML.
<td colspan="2">Întins pe 2 coloane</td>
&lt;caption&gt; Dă un titlu vizibil unui tabel; cititoarele de ecran îl anunță înainte de date, ca utilizatorul să știe ce conține tabelul.
<table>
&lt;colgroup&gt; și &lt;col&gt; Definesc coloanele unui tabel, ca să le dai lățime, fundal sau bordură fără să adaugi o clasă pe fiecare celulă.
<colgroup>

Formulare și introducere date (24)

Tag / Element Ce face
<form> Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
<form action="/trimite" method="POST">
<input> Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
<input type="text" name="nume" placeholder="Numele tău" required>
<label> Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
<label for="email-utilizator">Adresa de email:</label>
<button> Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.
<button type="submit">Trimite</button>
<textarea> Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.
<textarea name="mesaj" rows="5" cols="40" placeholder="Scrie mesajul tău..."></textarea>
<select> și <option> Creează un meniu derulant (drop-down list) de unde utilizatorul alege una sau mai multe opțiuni.
<select name="oras">
<fieldset> și <legend> Grupează vizual și semantic câmpurile înrudite dintr-un formular, cu o bordură și un titlu (legend).
<fieldset>
&lt;input type=text&gt; Câmpul de text pe un singur rând, tipul implicit al elementului input, pentru nume, orașe, titluri și alte texte scurte.
<input type="text" name="nume" minlength="2" maxlength="50">
&lt;input type=email&gt; Câmpul pentru adrese de email: browserul verifică formatul la trimitere, iar pe telefon apare tastatura cu @.
<input type="email" name="email" required>
&lt;input type=password&gt; Câmpul pentru parole: caracterele scrise sunt ascunse sub puncte, iar managerii de parole îl recunosc automat.
<input type="password" name="parola" autocomplete="current-password">
&lt;input type=number&gt; Câmpul pentru valori numerice, cu limite min și max, pas de creștere și butoane de mărire și micșorare.
<input type="number" name="cantitate" min="1" max="10" step="1">
&lt;input type=range&gt; Glisorul (slider) pentru alegerea unei valori aproximative dintr-un interval, cum ar fi volumul sau un buget.
<input type="range" name="volum" min="0" max="100" step="5" value="50">
&lt;input type=date&gt; și &lt;input type=datetime-local&gt; Câmpurile pentru dată și pentru dată cu oră, cu calendar nativ și valoare trimisă mereu în formatul standard AAAA-LL-ZZ.
<input type="date" name="data" min="2026-01-01" max="2026-12-31">
&lt;input type=color&gt; Selectorul nativ de culoare: utilizatorul alege o culoare dintr-o paletă, iar valoarea trimisă este un cod hexazecimal.
<input type="color" name="culoare" value="#2563eb">
&lt;input type=file&gt; Câmpul pentru încărcarea fișierelor: utilizatorul alege unul sau mai multe fișiere de pe dispozitiv, filtrate după tip.
<form method="post" enctype="multipart/form-data">
&lt;input type=checkbox&gt; Căsuța de bifat pentru opțiuni de tip da/nu sau pentru alegerea mai multor variante dintr-o listă.
<input type="checkbox" id="termeni" name="termeni" value="da">
&lt;input type=radio&gt; Butoanele radio pentru alegerea unei singure variante dintr-un grup; grupul este format de butoanele cu același name.
<input type="radio" id="card" name="plata" value="card">
&lt;input type=search&gt; Câmpul de căutare: se comportă ca un câmp text, dar este recunoscut ca bară de căutare și poate avea buton de golire.
<form action="/cauta" role="search">
&lt;input type=tel&gt; Câmpul pentru numere de telefon: pe mobil deschide tastatura numerică, iar formatul se verifică doar cu pattern.
<input type="tel" name="telefon" autocomplete="tel">
&lt;input type=url&gt; Câmpul pentru adrese web: browserul acceptă doar adrese complete, cu protocol, de exemplu https://exemplu.ro.
<input type="url" name="site" placeholder="https://exemplu.ro">
&lt;input type=hidden&gt; Câmpul ascuns: trimite la server o valoare pe care utilizatorul nu o vede, cum ar fi un id de produs sau un token.
<input type="hidden" name="produs_id" value="1042">
&lt;optgroup&gt; Grupează opțiunile unei liste select sub un titlu care nu poate fi ales, de exemplu orașele pe regiuni.
<select name="oras">
&lt;select multiple&gt; Lista din care utilizatorul alege mai multe opțiuni deodată, afișată ca o casetă cu mai multe rânduri vizibile.
<select name="limbi[]" multiple size="4">
Atributul autocomplete Atributul care spune browserului ce date să completeze automat într-un câmp: nume, email, adresă, parolă sau codul primit prin SMS.
<input type="email" name="email" autocomplete="email">

Structură semantică (Layout) (8)

Tag / Element Ce face
<header> Antetul introductiv al paginii sau al unei secțiuni: conține de regulă sigla, titlul și navigarea.
<header>
<nav> Marchează o secțiune dedicată navigației principale pe site sau a unui cuprins de capitole.
<nav aria-label="Meniu principal">
<main> Conține subiectul principal și unic al documentului, excluzând meniurile, bara laterală și subsolul.
<main>
<article> Conținut complet și autonom, care are sens de unul singur dacă este distribuit separat (articol de blog, știre, comentariu).
<article>
<section> Marchează o secțiune tematică a unei pagini sau a unui articol, care ar trebui să aibă propriul titlu (h2-h6).
<section>
<aside> Conținut conex sau secundar: bară laterală (sidebar), casetă cu informații suplimentare sau reclame.
<aside>
<footer> Subsolul paginii sau al unei secțiuni: conține drepturi de autor, linkuri legale, date de contact și harta site-ului.
<footer>
<div> Container generic de tip bloc (division), fără semnificație semantică, folosit pentru gruparea elementelor și stilizare CSS.
<div class="grila-produse">

Elemente interactive (6)

Tag / Element Ce face
<details> și <summary> Creează un element nativ de tip acordeon: conținutul este ascuns și se extinde doar când utilizatorul apasă pe summary.
<details>
<dialog> Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.
<dialog id="fereastra">
<template> Fragment de cod HTML inert la încărcare, neafișat pe ecran, destinat clonării și populării prin JavaScript.
<template id="sablon-card">
commandfor și command (invoker commands) Atribute pentru butoane care deschid sau închid un dialog sau un popover fără JavaScript și pot trimite comenzi proprii.
<button commandfor="fereastra" command="show-modal">Deschide</button>
&lt;dialog closedby&gt; Atributul closedby alege cum se poate închide un dialog: cu clic în afara lui și Escape, doar cu Escape sau doar din cod.
<dialog closedby="any">...</dialog>
&lt;details name&gt; (acordeon exclusiv) Mai multe elemente details cu același name formează un acordeon în care un singur panou poate fi deschis odată.
<details name="faq">...</details>

Atribute globale (16)

Tag / Element Ce face
Atributul id Dă unui element un identificator unic în pagină, folosit de linkuri cu #, de CSS, de JavaScript și de etichetele formularelor.
<section id="contact">...</section>
Atributul class Atribuie unui element una sau mai multe clase separate prin spațiu, folosite pentru stiluri CSS și selectare din JavaScript.
<p class="nota nota-mare">9,50</p>
Atributele data-* Atribute personalizate care încep cu data- și păstrează informații suplimentare pe un element, citite apoi din JavaScript sau din CSS.
<li data-id-produs="1042" data-pret="49.90">Caiet</li>
Atributul hidden Ascunde un element care nu este relevant acum; valoarea until-found îl lasă găsibil prin căutarea din pagină a browserului.
<p hidden>Text ascuns</p>
Atributul lang Declară limba conținutului unui element, pentru pronunția corectă în cititoarele de ecran, despărțirea în silabe, traducere și SEO.
<html lang="ro">
Atributul dir Stabilește direcția textului unui element: de la stânga la dreapta, de la dreapta la stânga sau detectată automat din conținut.
<p dir="rtl" lang="ar">مرحبا</p>
Atributul title Adaugă o informație suplimentară despre element, afișată de obicei ca tooltip la trecerea mouse-ului.
<abbr title="Codul numeric personal">CNP</abbr>
Atributul tabindex Controlează dacă un element poate primi focus din tastatură și dacă intră în ordinea de navigare cu tasta Tab.
<div tabindex="0">Poate primi focus</div>
Atributul contenteditable Face conținutul unui element editabil direct în pagină, ca într-un editor de text; plaintext-only permite doar text fără formatare.
<div contenteditable="true">Text editabil</div>
Atributul draggable Indică dacă un element poate fi tras cu mouse-ul, ca parte din mecanismul nativ de drag and drop din HTML.
<li draggable="true">Sarcină</li>
Atributul spellcheck Pornește sau oprește verificarea ortografică a browserului într-un câmp de text sau într-un element editabil.
<textarea spellcheck="true"></textarea>
Atributul translate Spune instrumentelor de traducere automată dacă textul unui element trebuie tradus sau lăsat neschimbat.
<span translate="no">dexblog</span>
Atributul inert Face o zonă a paginii complet inactivă: nu poate primi clic, focus sau selecție și este ascunsă pentru cititoarele de ecran.
<main inert>...</main>
Atributele popover și popovertarget Creează un popover nativ, deschis și închis de un buton fără JavaScript, afișat deasupra restului paginii.
<button popovertarget="info">Detalii</button>
Atributul accesskey Definește o tastă de comandă rapidă care activează sau aduce focusul pe un element; combinația de taste diferă între browsere.
<a href="/cautare/" accesskey="s">Căutare</a>
Atributele inputmode și enterkeyhint Aleg tastatura virtuală potrivită pe telefon și eticheta tastei Enter, fără să schimbe tipul sau validarea câmpului.
<input inputmode="numeric" enterkeyhint="next">