HTML ha 6 livelli di titolo: da <h1> (il più importante, uno per pagina) a <h6> (il meno importante). Il tag <p> crea un paragrafo con spazio sopra e sotto. <br> inserisce un'interruzione di riga (tag vuoto, senza chiusura). <hr> crea una riga orizzontale di separazione.

Tag	Significato semantico	Aspetto default
<strong>	importanza forte	grassetto
<em>	enfasi	corsivo
<b>	senza semantica (solo grassetto)	grassetto
<i>	termine tecnico, straniero, ecc.	corsivo
<mark>	testo evidenziato/rilevante	sfondo giallo
<small>	testo secondario, note legali	più piccolo
<del>	testo cancellato/rimosso	sbarrato
<ins>	testo inserito/aggiunto	sottolineato
<sub>	pedice	basso e piccolo
<sup>	apice	alto e piccolo
<abbr>	abbreviazione (tooltip con title)	puntini sotto
<cite>	titolo di un'opera	corsivo
<dfn>	definizione di un termine	corsivo
<s>	non più accurato (prezzo barrato)	sbarrato
<u>	annotazione non verbale	sottolineato

<blockquote> — citazione estesa (blocco), cite indica la fonte
<q> — citazione breve inline (aggiunge virgolette automatiche)
<pre> — testo preformattato (conserva spazi e a-capo)
<code> — frammento di codice inline
<kbd> — input da tastiera (tasti)
<samp> — output di un programma
<var> — variabile matematica o di programmazione

<a href="..."> è il tag per i collegamenti. L'attributo href specifica la destinazione:
URL assoluto — https://example.com — link a sito esterno
URL relativo — pagina.html o ../cartella/pagina.html — link interno
Ancora — #sezione — salta a un elemento con quell'ID nella stessa pagina
mailto — mailto:[email protected] — apre il client email
tel — tel:+39123456 — chiama su dispositivi mobili
download — attributo per forzare il download di un file

Attributo	Valori principali	Uso
target	_blank	Apre in nuova scheda/finestra
target	_self	Stessa scheda (default)
target	_parent	Frame genitore
target	_top	Finestra intera (esce da iframe)
rel	noopener noreferrer	Sicurezza con target="_blank"
rel	nofollow	Dice ai motori di non seguire il link
rel	canonical	URL preferito per SEO
hreflang	it, en	Lingua della destinazione

<img> è un tag vuoto (non ha tag di chiusura). Attributi obbligatori:
src — percorso dell'immagine (URL o relativo)
alt — testo alternativo (obbligatorio per accessibilità: descrive l'immagine agli screen reader)
Attributi opzionali: width, height (in px, senza unità), loading="lazy" (carica quando visibile), title (tooltip hover).

<figure> — contenitore semantico per immagini, diagrammi, codice con didascalia
<figcaption> — didascalia dell'immagine (prima o dopo l'img dentro figure)
srcset — fornisce versioni diverse per schermi diversi (responsive images)
<picture> — contenitore per sorgenti multiple (es. WebP + JPG come fallback), anche per art direction

<ul> (unordered list) — lista con pallini (bullet points)
<ol> (ordered list) — lista numerata. Attributi: start (numero iniziale), reversed (conta al contrario), type (1, A, a, I, i)
<li> — elemento di lista (si usa dentro ul e ol)
Le liste possono essere nidificate mettendo ul/ol dentro un <li>.

<dl> (description list) — lista di coppie termine/definizione
<dt> (description term) — il termine
<dd> (description details) — la definizione
Un <dt> può avere più <dd>, e viceversa. Usata per glossari, metadati, FAQ.

<table> — contenitore della tabella
<caption> — titolo/didascalia della tabella (primo figlio di table)
<thead> — sezione di intestazione (righe di titolo)
<tbody> — corpo della tabella (dati principali)
<tfoot> — piè di pagina della tabella (totali, note)
<tr> — riga (table row)
<th> — cella di intestazione (grassetto, centrata di default, con scope)
<td> — cella dati normale

colspan="N" — la cella occupa N colonne orizzontalmente
rowspan="N" — la cella occupa N righe verticalmente
<colgroup> / <col> — per stilare colonne intere (span su col per più colonne)

I tag semantici descrivono il significato del contenuto (non solo la forma), migliorando accessibilità e SEO.

<header> — intestazione di pagina o sezione (logo, navigazione, titolo)
<nav> — blocco di navigazione principale
<main> — contenuto principale unico della pagina (uno solo per pagina)
<section> — sezione tematica generica con heading
<article> — contenuto autonomo (post, notizia, commento)
<aside> — contenuto laterale/correlato (sidebar, widget, note)
<footer> — piè di pagina o di sezione
<div> — contenitore generico (NO semantica, solo per layout/stile)
<span> — contenitore inline generico (NO semantica)

Tag	Uso	Contiene heading?
<section>	Raggruppamento tematico con h1-h6	Sì (obbligatorio)
<article>	Contenuto autonomo e sindicabile	Sì (obbligatorio)
<aside>	Contenuto tangenzialmente correlato	Opzionale
<nav>	Blocco di link di navigazione principale	Opzionale
<hgroup>	Raggruppa titolo + sottotitolo	Contiene h1-h6
<address>	Informazioni di contatto dell'autore/proprietario	No
<main>	Contenuto principale (uno solo per pagina)	No (non è sectioning)

Tag	Uso	Attributo chiave
<time>	Data/ora leggibile da macchina	datetime="2025-01-15"
<data>	Collegamento a valore numerico	value="42"
<ruby>	Annotazione fonetica (lingue asiatiche)	—
<rt>	Testo di annotazione ruby (sopra)	—
<rp>	Parentesi fallback ruby	—
<wbr>	Suggerisce punto di a-capo opzionale	—
<bdi>	Isola testo bidirezionale	—
<bdo>	Override direzione del testo	dir="rtl"

<form> — contenitore del modulo. Attributi principali:
action — URL di destinazione dei dati (dove vengono inviati)
method — GET (dati nell'URL) o POST (dati nel corpo, per dati sensibili)
enctype — multipart/form-data per upload file
novalidate — disabilita la validazione HTML5
<fieldset> — raggruppa campi correlati (con bordo)
<legend> — titolo del fieldset
<label> — etichetta per un input. L'attributo for deve corrispondere all'id dell'input.

type	Uso	Interfaccia mobile
text	Testo libero (default)	—
email	Indirizzo email (validato)	Tastiera email
password	Testo nascosto	—
number	Numero con min/max/step	Tastiera numerica
tel	Numero di telefono	Tastiera telefono
url	URL (validato)	Tastiera URL
search	Campo di ricerca (X per cancellare)	—
date	Data (year-month-day)	Date picker
time	Ora (HH:MM)	Time picker
datetime-local	Data + ora locale	DateTime picker
month	Anno e mese	Month picker
week	Anno e settimana	Week picker
color	Selettore colore	Color picker
range	Slider tra min e max	Slider
file	Upload file (accept, multiple)	—
checkbox	Casella sì/no	—
radio	Scelta esclusiva (stesso name)	—
hidden	Campo invisibile (dati extra)	—
image	Submit con immagine	—
submit	Pulsante invio	—
reset	Pulsante reset	—
button	Pulsante generico (JS)	—

Attributo	Tipo	Descrizione
name	tutti	Nome del campo (chiave nei dati inviati)
id	tutti	Identificatore univoco (per label for=)
value	tutti	Valore iniziale del campo
placeholder	text, email…	Testo suggerito (scompare al focus)
required	tutti	Campo obbligatorio
disabled	tutti	Disabilitato (non inviato)
readonly	text, email…	Sola lettura (inviato comunque)
min / max	number, date…	Valore minimo/massimo
step	number, range	Incremento per frecce
minlength / maxlength	text, email	Lunghezza minima/massima
pattern	text, email…	Espressione regolare di validazione
autocomplete	text, email…	on/off o nome campo (email, name…)
autofocus	tutti	Focus automatico al caricamento
multiple	email, file	Permette più valori
accept	file	Tipi di file accettati (.pdf, image/*)
checked	checkbox, radio	Selezionato di default
size	text	Larghezza in caratteri
list	text	ID di un datalist per suggerimenti
inputmode	tutti	Tipo tastiera mobile (numeric, email…)

<select> — menu a tendina. multiple permette selezione multipla, size mostra N opzioni visibili
<optgroup> — raggruppa opzioni con un'etichetta
<option> — singola voce del select. value = valore inviato, contenuto = testo visualizzato
<textarea> — area di testo multiriga. rows, cols, resize (CSS)
<button> — pulsante. type="submit" (default), type="reset", type="button"
<datalist> — suggerimenti per input text
<output> — risultato di un calcolo (collegato a un form)

HTML5 offre validazione nativa senza scrivere JavaScript. Il browser mostra messaggi di errore automatici quando si invia il form con dati non validi.

:valid / :invalid — pseudo-classi CSS per stilare i campi in base alla validità
:required — stilare i campi obbligatori
novalidate sull'elemento form — disabilita la validazione (per gestirla manualmente con JS)

Attributo	Descrizione
src	Percorso del file video (alternativa a <source>)
controls	Mostra i controlli del player (play/pausa/volume…)
autoplay	Parte automaticamente (richiede muted sui browser moderni)
muted	Silenziato (obbligatorio per autoplay)
loop	Riproduzione in loop
poster	Immagine da mostrare prima del play
preload	auto, metadata, none
width / height	Dimensioni del player
playsinline	Video inline su iOS (non fullscreen)

<source> dentro <video> permette più formati (il browser usa il primo supportato).
<track> aggiunge sottotitoli/didascalie (formato WebVTT).

Identico a <video> ma senza immagine. Attributi analoghi: controls, autoplay, muted, loop, preload.
Usa <source> per fornire più formati (MP3, OGG, WAV) per compatibilità cross-browser.

<iframe> incorpora un'altra pagina HTML all'interno della pagina corrente. Usi comuni: video YouTube/Vimeo, mappe Google, widget social, documenti PDF.

src — URL del contenuto
width / height — dimensioni
title — obbligatorio per accessibilità
loading="lazy" — carica solo se visibile
allowfullscreen — per video fullscreen
sandbox — restringe le capacità dell'iframe (sicurezza)

SVG (Scalable Vector Graphics) può essere incorporato direttamente nell'HTML con il tag <svg>. Vantaggi: stilabile con CSS, animabile, accessibile, niente richiesta HTTP aggiuntiva.

viewBox — "0 0 width height" definisce il sistema di coordinate
xmlns — necessario solo in file SVG standalone
Forme principali: circle, rect, ellipse, line, polyline, polygon, path
Attributi di stile: fill, stroke, stroke-width, opacity

Tag	Uso
<meta charset="UTF-8">	Codifica caratteri (sempre per prima)
<meta name="viewport">	Responsive design su mobile
<meta name="description">	Descrizione per i motori di ricerca (160 car.)
<meta name="keywords">	Parole chiave (ignorata da Google)
<meta name="author">	Autore della pagina
<meta name="robots">	index/noindex, follow/nofollow
<meta name="theme-color">	Colore barra browser mobile
<meta property="og:title">	Open Graph — titolo per social
<meta property="og:image">	Open Graph — immagine per social
<meta name="twitter:card">	Twitter Card type
<meta http-equiv="refresh">	Redirect automatico (secondi;url=…)

rel	Uso
stylesheet	Collega un file CSS esterno
icon	Favicon del sito
apple-touch-icon	Icona per iOS (home screen)
canonical	URL preferito per SEO (evita contenuto duplicato)
alternate	Versioni alternate (lingua, RSS feed)
preload	Precarica risorse critiche (font, img, script)
prefetch	Precarica risorse per navigazione futura
preconnect	Apre connessione TCP anticipata a un dominio
dns-prefetch	Risolve DNS in anticipo
manifest	Web App Manifest (PWA)

Metodo	Parsing HTML	Esecuzione JS	Consigliato per
<script> in <head>	Bloccato	Subito	⛔ Da evitare
<script> in fondo al <body>	Continua	Dopo il DOM	✓ Compatibile
defer	Non bloccato	Dopo parsing (in ordine)	✓ Consigliato
async	Non bloccato	Subito dopo download	Solo per script indipendenti
type="module"	Non bloccato	defer di default	ES6 Modules

Attributo	Valori	Uso
id	stringa unica	Identificatore univoco per CSS/JS/ancore
class	lista classi	Classi per CSS e JS (più valori separati da spazio)
style	CSS inline	Stile diretto (specificità massima)
title	stringa	Tooltip al hover, info aggiuntiva
lang	it, en, fr…	Lingua del contenuto dell'elemento
dir	ltr, rtl, auto	Direzione del testo
hidden	boolean	Nasconde l'elemento (equivale a display:none)
tabindex	numero	Ordine di tabulazione. 0=focus, -1=non tabulabile
contenteditable	true/false	Permette modifica del testo da parte dell'utente
draggable	true/false	Elemento trascinabile (Drag and Drop API)
spellcheck	true/false	Controllo ortografico del browser
translate	yes/no	Se tradurre l'elemento (es. nomi propri: no)
accesskey	char	Tasto di scelta rapida da tastiera
autocapitalize	on/off/words…	Maiuscola automatica mobile

Gli attributi data-* permettono di memorizzare dati personalizzati direttamente negli elementi HTML, senza dover usare attributi non standard o classi JS.

Sintassi HTML: data-nome-attributo="valore"
Accesso JS: element.dataset.nomeAttributo (camelCase automatico)

Esempi d'uso: ID di prodotti, configurazioni, tooltip personalizzati, stati UI, parametri animazione.

ARIA aggiunge semantica aggiuntiva agli elementi per gli screen reader. Usare sempre prima HTML semantico (il div non è un bottone!); ARIA è il completamento, non il sostituto.

Attributo	Uso
role	Ruolo: button, dialog, alert, navigation, banner, main, complementary
aria-label	Etichetta testuale (alternativa al testo visibile)
aria-labelledby	ID dell'elemento che funge da etichetta
aria-describedby	ID dell'elemento che descrive (es. messaggio errore)
aria-hidden="true"	Nasconde agli screen reader (icone decorative)
aria-expanded	Stato aperto/chiuso di un menu/accordion
aria-required	Campo obbligatorio (per screen reader)
aria-live	Regioni aggiornate dinamicamente (polite, assertive)
aria-current	Elemento corrente in navigazione (page, step)
aria-disabled	Elemento disabilitato semanticamente

<template> — contiene HTML che non viene renderizzato né eseguito finché non viene clonato via JavaScript. Perfetto per componenti riutilizzabili.
<slot> — segnaposto per contenuto iniettato dall'esterno (usato con Shadow DOM)
Custom Elements — customElements.define('tag-mio', Classe) crea tag HTML personalizzati
Shadow DOM — albero DOM incapsulato (stili e JS isolati dal documento principale)

<details> — widget di disclosure: nasconde/mostra il contenuto al click.
<summary> — primo figlio di details, funge da titolo cliccabile.
open — attributo booleano: se presente, il details è aperto di default.
<dialog> — modale/dialog nativo HTML5. Metodi JS: .show(), .showModal(), .close().
popover — attributo HTML per popup non bloccanti (HTML 2024+).

Attributo	Valori	Uso
contenteditable	true/false/plaintext-only	Rende modificabile qualsiasi elemento
draggable	true/false	Abilita drag and drop HTML5
inputmode	numeric, decimal, email, url, search, tel, text, none	Tipo di tastiera su mobile
enterkeyhint	enter, done, go, next, previous, search, send	Etichetta del tasto Invio su mobile
autocapitalize	none, sentences, words, characters	Maiuscola automatica mobile
autocorrect	on/off	Correzione automatica (Safari/iOS)
spellcheck	true/false	Controllo ortografico browser

Le entità HTML si usano per inserire caratteri che altrimenti verrebbero interpretati come codice (< > &) o non presenti sulla tastiera. Si scrivono come &nome; oppure &#codice; (decimale) o &#xHEX; (esadecimale).

Entità	Carattere	Descrizione
&	&	E commerciale
&lt;	<	Minore di
&gt;	>	Maggiore di
&quot;	"	Virgolette doppie
&apos;	'	Apostrofo
&nbsp;		Spazio non separabile
&copy;	©	Copyright ©
&reg;	®	Marchio registrato ®
&trade;	™	Trademark ™
&euro;	€	Euro €
&pound;	£	Sterlina £
&yen;	¥	Yen ¥
&mdash;	—	Trattino lungo —
&ndash;	–	Trattino medio –
&laquo; &raquo;	« »	Virgolette caporali
&hellip;	…	Puntini di sospensione …
&#9829;	♥	Cuore ♥ (decimale)
&#x1F600;	😀	Emoji 😀 (hex)

Versione	Anno	Note
HTML 1.0	1991	Tim Berners-Lee al CERN — solo testo e link
HTML 2.0	1995	Prima specifica formale IETF
HTML 3.2	1997	Tabelle, applet, scripting base (W3C)
HTML 4.01	1999	CSS separato, frame, form avanzati. Tre varianti: Strict, Transitional, Frameset
XHTML 1.0	2000	HTML recritto come XML. Più rigido (tutto lowercase, chiusura obbligatoria)
HTML5	2014	Rivoluzione: video, audio, canvas, semantica, localStorage, API. DOCTYPE semplificato
HTML Living Standard	2019+	WHATWG — non più versioni, spec sempre aggiornata

DOCTYPE HTML5 — l'unico che usi oggi: <!DOCTYPE html>
DOCTYPE HTML 4.01 Strict (storico): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "...">
Il DOCTYPE dice al browser in quale modalità renderizzare (standards mode vs quirks mode).