dexblog.ro
HTML

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

51 de elemente 8 categorii

HTML (HyperText Markup Language) este scheletul oricărui site web. Definește structura și conținutul unei pagini: titluri, paragrafe, imagini, linkuri, liste, tabele și formulare.

Browserul citește fișierul HTML și îl transformă în elementele vizibile pe ecran. Tagurile spun browserului ce reprezintă fiecare bucată de text sau conținut.

Mai jos găsești cele mai folosite taguri și elemente HTML5 grupate pe categorii. Apasă pe oricare tag pentru explicația completă: ce face, ce atribute primește, exemple de cod cu rezultatul afișat în browser și greșelile frecvente de evitat.

Structura documentului 9 elemente

Text și formatare 8 elemente

Linkuri și multimedia 7 elemente

Liste 4 elemente

Tabele 5 elemente

Formulare și introducere date 7 elemente

Structură semantică (Layout) 8 elemente

Elemente interactive 3 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 (9)

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>

Text și formatare (8)

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>

Linkuri și multimedia (7)

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>

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 (5)

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>

Formulare și introducere date (7)

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>

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 (3)

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">