Complete HTML glossary with practical examples

DOCTYPEdocument type declaration

What it is: The <!DOCTYPE html> declaration is the very first line of a page and tells the browser that the document uses the HTML5 standard.
What it's for: It switches the browser into standards mode, avoiding "quirks mode", which would render the page inconsistently across different browsers.
When to use it: Always write it as the document's first line, before the <html> tag.

htmlThe root of the HTML document.

What it is: The <html> tag is the root element of an HTML page.
What it's for: It marks the beginning and the end of an HTML document.
When to use it: It must be used in every HTML document.

headHolds metadata, links to external resources and the title.

What it is: The <head> tag is a container for metadata and other elements that provide information about the HTML document.
What it's for: It holds things like the document's title, links to stylesheets, scripts and other metadata that is not displayed directly on the page.
When to use it: It must be used in every HTML document, as a direct child of <html> and before the <body> tag.

bodyThe main content of the HTML document.

What it is: The <body> tag represents the main content of an HTML document.
What it's for: It defines the section of the document holding all the visible, interactive content of a web page.
When to use it: It must be used in every HTML document, as a direct child of <html>, after the <head> tag.

metaDefines metadata for an HTML document (charset, viewport and so on).

What it is: The <meta> tag is an HTML element used to provide structured metadata about an HTML document.
What it's for: It supplies additional information about the HTML document, such as the page description, the keywords, the author, the character set in use, and instructions for...
When to use it: Use it inside a document's <head> to specify metadata that cannot be expressed by other related HTML elements.

titleThe document's title (shown in the title bar or browser tab).

What it is: The <title> tag defines the HTML document's title.
What it's for: It specifies a title for the web page, which appears in the browser's title bar or on the page's tab.
When to use it: It must be used in every HTML document, inside the <head> tag.

linkDefines a relationship between the current document and an external resource (CSS, favicon).

What it is: The <link> tag is an HTML element used to specify relationships between the current document and external resources.
What it's for: It mainly connects CSS stylesheets, site icons (favicons), web fonts and other external resources to the HTML document.
When to use it: Use it inside a document's <head> to establish connections with external resources that improve or complement the document.

styleHolds style information for a document or part of it (internal CSS).

What it is: The <style> tag is an HTML element used to include CSS style information directly inside an HTML document.
What it's for: It defines CSS styles for the HTML document without having to link an external CSS file.
When to use it: Use it when you want to include CSS directly in the HTML document, usually for page-specific styles or small amounts of CSS.

scriptEmbeds or references an executable script.

What it is: The <script> tag is an HTML element used to embed or reference an executable script — typically JavaScript — inside an HTML document.
What it's for: It includes JavaScript directly in the page or links external JavaScript files, letting you add interactivity, manipulate the content of the...
When to use it: Use it when you want to add dynamic behaviour to a web page, handle events, modify the DOM, make AJAX calls, or perform any other...

noscriptDefines alternative content for when scripts are disabled.

What it is: The <noscript> tag is an HTML element defining a section of HTML content to be inserted if scripts are disabled in the user's browser or if the...
What it's for: It provides alternative content or messages to users when JavaScript is unavailable or disabled, ensuring a better user experience and accessibility in...
When to use it: Use it when you want to provide an alternative for features or content that would normally need JavaScript to work correctly.

base base URL for relative links

What it is: The <base> tag is an empty HTML element that specifies the base URL and/or the default target for all the relative URLs in a document.
What it's for: It defines the base URL for all relative links on the page and/or the default behaviour for opening links (in a new window or in the same...
When to use it: Use it when you want to specify a common base URL for many links on the page, or when you want to set a default behaviour for opening links...

headerThe heading area of the document or of a section.

What it is: The <header> tag represents a container for introductory content or a group of navigation elements.
What it's for: It defines an introductory area, or a container for navigation elements, for its parent content — or for the whole document when used as a direct child of...
When to use it: At the start of a page or a section, to introduce the content or to hold navigation elements.

mainThe document's main content.

What it is: The <main> tag represents the main content of an HTML document.
What it's for: It defines the page's central content, excluding the header, the footer, navigation and sidebars.
When to use it: It must be used only once per page, holding the unique content specific to that page.

footerThe footer of the document or of a section.

What it is: The <footer> tag represents a footer for its nearest parent element or for the whole document.
What it's for: It typically holds closing information such as copyright, links to related documents, contact details, or secondary navigation links.
When to use it: At the end of a document, a section or an article, to provide concluding or reference information.

articleIndependent content, such as an article or a blog post.

What it is: The <article> tag represents a self-contained composition in a document, page, application or site, intended to be independently distributable or reusable.
What it's for: It defines independent, self-sufficient content, such as a blog post, a newspaper article, a user comment, or any other standalone piece of content.
When to use it: When the block of content makes sense on its own, outside the context of the page containing it.

sectionA section of thematically related content.

What it is: The <section> tag represents a generic, self-contained section of a document, typically with a specific theme or topic.
What it's for: It groups thematically related content, helping to structure the document into logical, semantically meaningful parts.
When to use it: When you need to divide the page into parts with a clear theme, usually accompanied by a heading.

asideContent tangential or secondary to the main content.

What it is: The <aside> tag represents a section of a page consisting of content tangentially related to the main content, which could be considered separate...
What it's for: It defines content that is related but not essential to understanding the main content: sidebars, callouts, adverts, pull quotes or marginal notes.
When to use it: When you want to present supplementary information that enriches the main content but is not essential to understanding it.

divA generic division or container for grouping content.

What it is: The <div> tag is a generic container for flow content that in itself represents nothing.
What it's for: It is mainly used to group HTML elements for styling purposes (through class or id) or for DOM operations with JavaScript.
When to use it: When you need a technical container for layout, styling or scripting and no more suitable semantic tag exists.

spangeneric inline container

What it is: The <span> tag is a generic inline container that in itself represents nothing and adds no semantic meaning.
What it's for: It isolates a portion of text or inline elements so you can style it with CSS (through class or id) or manipulate it with JavaScript.
When to use it: When you need a "hook" for styling or scripting on part of a text and no more suitable semantic tag exists; it is the inline equivalent of <div>.

addresscontact information

What it is: The <address> tag is a semantic element enclosing the contact details of an article's author or of the whole page.
What it's for: It semantically marks up contact points such as emails, addresses, phone numbers or links, helping browsers and assistive technologies recognise them.
When to use it: Use it for contact details relating to the <article> or <body> containing it, typically inside a <footer>; do not use it for a generic postal address that is not a contact point.

h1-h6Headings and subheadings at various levels

What it is: I tag <h1> fino a <h6> sono elementi di intestazione HTML che definiscono sei livelli di titoli in ordine decrescente di importanza.
What it's for: Sono utilizzati per creare una struttura gerarchica del contenuto, facilitando la lettura e la comprensione del documento.
When to use it: Per titoli e sottotitoli delle varie sezioni, rispettando l'ordine gerarchico del contenuto.

hgroupheading + subheading group

What it is: Il tag <hgroup> raggruppa un titolo principale (un elemento da <h1> a <h6>) con uno o più paragrafi di sottotitolo o didascalia ad esso associati.
What it's for: Serve a rappresentare come un'unica unità un titolo e il testo secondario che lo accompagna, senza che quest'ultimo crei un nuovo livello nella struttura del documento.
When to use it: Utilizzarlo quando un titolo ha un sottotitolo o uno slogan che vuoi tenere legato ad esso, ad esempio all'inizio di un <header> o di un <article>.

pA paragraph of text

What it is: Il tag <p> definisce un paragrafo in HTML.
What it's for: Viene utilizzato per suddividere il contenuto testuale in paragrafi logici, migliorando la leggibilità e la struttura del documento.
When to use it: Per separare blocchi di testo correlati.

ulUnordered list

What it is: Il tag <ul> rappresenta una lista non ordinata in HTML.
What it's for: Viene utilizzato per creare elenchi di elementi correlati senza un ordine specifico o una gerarchia numerica.
When to use it: Quando hai un elenco di elementi in cui l'ordine non è importante.

olOrdered list

What it is: Il tag <ol> rappresenta una lista ordinata in HTML.
What it's for: Viene utilizzato per creare elenchi di elementi correlati che hanno un ordine o una sequenza specifica, tipicamente numerati o alfabetici.
When to use it: Quando l'ordine degli elementi conta, per esempio in passaggi, classifiche o procedure.

liList item

What it is: Il tag <li> rappresenta un elemento di lista in HTML.
What it's for: Viene utilizzato per definire singoli elementi all'interno di una lista, fornendo struttura e semantica al contenuto elencato.
When to use it: Come figlio diretto di <ol>, <ul>, o <menu>.

dlDescription list

What it is: Il tag <dl> rappresenta una lista di definizioni in HTML.
What it's for: Viene utilizzato per creare liste di coppie nome-valore, come glossari, metadati, o qualsiasi altro tipo di elenco dove ogni elemento ha un nome (o termine) e un valore (o...
When to use it: Quando devi associare un termine a una descrizione, come in glossari, schede tecniche o metadati.

dtDescription term

What it is: Il tag <dt> rappresenta il "termine di definizione" o "nome" in una lista di definizioni (<dl>).
What it's for: Viene utilizzato per specificare un termine, nome o etichetta che sarà definito o descritto dal successivo elemento <dd>.
When to use it: All'interno di un <dl>, per indicare il termine o l'etichetta da spiegare.

ddDescription details

What it is: Il tag <dd> rappresenta la "descrizione di definizione" in una lista di definizioni (<dl>).
What it's for: Viene utilizzato per fornire la definizione, descrizione o dettagli relativi al termine specificato nell'elemento <dt> precedente.
When to use it: All'interno di un <dl>, subito dopo un <dt>, per spiegare o descrivere quel termine.

strongImportant text, rendered in bold.

What it is: Il tag <strong> è un elemento HTML utilizzato per indicare che il testo al suo interno ha una forte importanza, serietà o urgenza.
What it's for: Serve a enfatizzare fortemente una parte di testo, indicando che è particolarmente importante o critica nel contesto del documento.
When to use it: Va utilizzato quando si vuole dare particolare rilevanza a una parola o frase, specialmente in contesti dove l'importanza del testo potrebbe influenzare la comprensione o...

emEmphasised text, rendered in italics.

What it is: Il tag <em> è un elemento inline utilizzato per indicare enfasi nel testo HTML.
What it's for: Serve a evidenziare parti di testo che dovrebbero essere lette o interpretate con particolare enfasi o stress.
When to use it: Utilizzarlo quando si vuole dare importanza o enfasi a una parola o frase all'interno di un testo.

bBold text, used stylistically.

What it is: Il tag <b> è un elemento HTML utilizzato per attirare l'attenzione su un testo senza conferirgli particolare importanza semantica.
What it's for: Serve a evidenziare visivamente una parte di testo, rendendola in grassetto, senza implicare un'enfasi o un'importanza particolare dal punto di vista semantico.
When to use it: Va utilizzato quando si vuole attirare l'attenzione su un testo per motivi stilistici o di presentazione, ma non per indicare importanza o enfasi semantica.

iItalic text, used stylistically.

What it is: Il tag <i> è un elemento HTML utilizzato per indicare un testo che è in qualche modo diverso dal testo normale che lo circonda, spesso rappresentato visivamente in corsivo.
What it's for: Serve a denotare un testo che ha una qualità alternativa o è in una voce o umore diverso, come termini tecnici, frasi in lingua straniera, pensieri, o nomi di navi.
When to use it: Va utilizzato quando si vuole indicare una differenza qualitativa nel testo, senza necessariamente implicare enfasi (per la quale si userebbe <em>).

uunderlined text

What it is: Il tag <u> è un elemento inline utilizzato per rendere il testo sottolineato in HTML.
What it's for: Serve a indicare che una porzione di testo dovrebbe essere stilisticamente diversa dal testo normale, tipicamente sottolineandola.
When to use it: Utilizzarlo per sottolineare testo che non ha un'enfasi semantica particolare, come nomi propri in cinese o annotazioni di spelling.

brline break

What it is: Il tag <br> è un elemento vuoto che produce un'interruzione di riga in un testo HTML.
What it's for: Serve a inserire un'interruzione di riga (a capo) senza iniziare un nuovo paragrafo.
When to use it: Utilizzarlo quando si desidera inserire un'interruzione di riga all'interno di un blocco di testo, come in poesie, indirizzi o in casi in cui è necessaria una formattazione...

hrhorizontal rule

What it is: Il tag <hr> è un elemento vuoto che rappresenta una interruzione tematica tra paragrafi di contenuto HTML.
What it's for: Serve a creare una linea orizzontale nel documento HTML, tipicamente utilizzata per separare sezioni di contenuto o per indicare un cambio di argomento.
When to use it: Utilizzarlo quando si vuole creare una separazione visiva tra diverse sezioni di contenuto o per indicare un cambiamento tematico significativo all'interno della pagina.

markhighlighted text

What it is: Il tag <mark> è un elemento inline utilizzato per evidenziare o marcare parti di testo in un documento HTML.
What it's for: Serve a evidenziare visivamente una parte di testo, tipicamente per attirare l'attenzione del lettore su quella specifica porzione di contenuto.
When to use it: Utilizzarlo quando si vuole evidenziare del testo per scopi di riferimento, rilevanza o per indicare un risultato di ricerca all'interno di un documento.

smalltext of lesser importance

What it is: Il tag <small> è un elemento inline utilizzato per rappresentare commenti secondari o testo di minor importanza in un documento HTML.
What it's for: Serve a indicare che il testo contenuto ha una rilevanza minore o è un commento secondario rispetto al contenuto principale circostante.
When to use it: Utilizzarlo per testo che è considerato di importanza secondaria, come disclaimer, note a piè di pagina, copyright, o piccole stampe legali.

deldeleted text

What it is: Il tag <del> è un elemento inline utilizzato per rappresentare testo che è stato cancellato o rimosso da un documento HTML.
What it's for: Serve a indicare che una parte di testo è stata rimossa o non è più valida, pur mantenendola visibile nel documento.
When to use it: Utilizzarlo quando si vuole mostrare testo che è stato eliminato, sostituito o modificato, spesso in combinazione con il tag <ins> per indicare il nuovo testo inserito.

insinserted text

What it is: Il tag <ins> è un elemento inline utilizzato per rappresentare testo che è stato inserito o aggiunto a un documento HTML.
What it's for: Serve a indicare che una parte di testo è stata aggiunta o inserita in un documento, spesso per mostrare modifiche o aggiornamenti al contenuto.
When to use it: Utilizzarlo quando si vuole evidenziare nuovo testo aggiunto a un documento, spesso in combinazione con il tag <del> per mostrare le modifiche complete.

subsubscript text

What it is: Il tag <sub> è un elemento inline utilizzato per rappresentare testo in pedice in un documento HTML.
What it's for: Serve a visualizzare testo leggermente più in basso e più piccolo rispetto alla linea di base del testo normale, tipicamente usato per formule chimiche, notazioni matematiche o...
When to use it: Utilizzarlo per rappresentare pedici in formule chimiche (come H2O), notazioni matematiche, o per riferimenti a note a piè di pagina.

supsuperscript text

What it is: Il tag <sup> è un elemento inline utilizzato per rappresentare testo in apice in un documento HTML.
What it's for: Serve a visualizzare testo leggermente più in alto e più piccolo rispetto alla linea di base del testo normale, tipicamente usato per esponenti, notazioni matematiche o...
When to use it: Utilizzarlo per rappresentare esponenti in formule matematiche, numeri ordinali (es.

abbrabbreviation or acronym

What it is: Il tag <abbr> è un elemento inline utilizzato per rappresentare un'abbreviazione o un acronimo in un documento HTML.
What it's for: Serve a indicare che una sequenza di caratteri rappresenta un'abbreviazione o un acronimo, fornendo opzionalmente il significato completo attraverso l'attributo title.
When to use it: Utilizzarlo quando si introduce un'abbreviazione o un acronimo nel testo, specialmente la prima volta che appare nel documento o quando si vuole fornire una spiegazione.

timedate or time

What it is: Il tag <time> è un elemento inline utilizzato per rappresentare una data, un'ora o un intervallo di tempo in un documento HTML.
What it's for: Serve a marcare semanticamente date e orari in un formato leggibile sia dagli umani che dalle macchine, facilitando l'interpretazione e l'elaborazione di informazioni temporali.
When to use it: Utilizzarlo quando si fa riferimento a date specifiche, orari, o intervalli di tempo nel contenuto, come date di pubblicazione, scadenze, orari di eventi, ecc.

qshort inline quotation

What it is: Il tag <q> è un elemento inline utilizzato per rappresentare una breve citazione all'interno di un testo in un documento HTML.
What it's for: Serve a marcare semanticamente una citazione breve che non richiede interruzioni di paragrafo, distinguendola dal testo circostante.
When to use it: Utilizzarlo per citazioni brevi incorporate nel flusso del testo, tipicamente di una o poche frasi.

blockquoteextended quotation

What it is: Il tag <blockquote> è un elemento a livello di blocco utilizzato per rappresentare una citazione estesa da un'altra fonte in un documento HTML.
What it's for: Serve a marcare semanticamente una citazione più lunga o complessa, separandola visivamente dal testo principale e indicando che si tratta di contenuto citato.
When to use it: Utilizzarlo per citazioni più lunghe che richiedono un paragrafo separato o multiple linee, tipicamente estratte da un'altra fonte.

citecitation of a work's title

What it is: Il tag <cite> è un elemento inline utilizzato per rappresentare il titolo di un'opera (come un libro, un film, una canzone, ecc.) in un documento HTML.
What it's for: Serve a marcare semanticamente il riferimento al titolo di un'opera creativa, scientifica o intellettuale, distinguendolo dal testo circostante.
When to use it: Utilizzarlo quando si fa riferimento al titolo di un'opera come libri, articoli, film, canzoni, dipinti, siti web, ecc.

codefragment of code

What it is: Il tag <code> è un elemento inline che rappresenta una breve porzione di codice sorgente informatico.
What it's for: Serve a marcare semanticamente frammenti di codice, che i browser mostrano di default con un font a spaziatura fissa (monospace).
When to use it: Utilizzarlo per nomi di comandi, variabili, tag o brevi frammenti di codice nel testo; per blocchi su più righe abbinalo a <pre>.

prepreformatted text

What it is: Il tag <pre> (preformatted) è un elemento a livello di blocco che mostra il testo esattamente come è scritto nel codice sorgente.
What it's for: Serve a preservare spazi, tabulazioni e a capo, che normalmente l'HTML comprimerebbe o ignorerebbe, ed è reso con un font a spaziatura fissa.
When to use it: Utilizzarlo per blocchi di codice (spesso insieme a <code>), output di terminale o ASCII art, cioè quando gli spazi hanno un significato.

stext no longer accurate (struck through)

What it is: Il tag <s> è un elemento inline che mostra il testo barrato, con una linea che lo attraversa.
What it's for: Serve a indicare contenuti che non sono più accurati o pertinenti, ma che si vogliono comunque mostrare.
When to use it: Utilizzarlo per informazioni superate, come un vecchio prezzo accanto a quello scontato; per il testo rimosso in una revisione usa invece <del>.

kbdkeyboard input

What it is: Il tag <kbd> (keyboard) è un elemento inline che rappresenta un input inserito dall'utente, tipicamente da tastiera.
What it's for: Serve a marcare semanticamente tasti, combinazioni di tasti o comandi da digitare, di solito resi con un font a spaziatura fissa.
When to use it: Utilizzarlo nelle istruzioni per indicare scorciatoie o comandi, ad esempio la combinazione Ctrl + C.

sampoutput from a program

What it is: Il tag <samp> (sample) è un elemento inline che rappresenta l'output di esempio prodotto da un programma o da un sistema.
What it's for: Serve a marcare semanticamente messaggi, risultati o output generati dal computer, resi di default con un font a spaziatura fissa.
When to use it: Utilizzarlo per mostrare nel testo messaggi di errore, output di comandi o risposte del sistema.

varvariable

What it is: Il tag <var> è un elemento inline che rappresenta una variabile in un'espressione matematica o in un contesto di programmazione.
What it's for: Serve a marcare semanticamente il nome di una variabile, tipicamente reso in corsivo dai browser.
When to use it: Utilizzarlo per indicare variabili in formule o spiegazioni di codice, ad esempio "l'area si ottiene moltiplicando base per altezza".

dfnthe term being defined

What it is: Il tag <dfn> (definition) è un elemento inline che identifica il termine che viene definito all'interno di una frase.
What it's for: Serve a marcare semanticamente la prima occorrenza di un termine, quella in cui se ne dà la definizione.
When to use it: Utilizzarlo attorno al termine definito quando lo si introduce e spiega per la prima volta nel testo.

datamachine-readable value

What it is: Il tag <data> è un elemento inline che collega un contenuto testuale leggibile dall'utente a una versione leggibile dalla macchina, tramite l'attributo value.
What it's for: Serve a fornire in modo semantico un valore machine-readable (come un codice prodotto o un identificativo) accanto al testo mostrato.
When to use it: Utilizzarlo quando un testo ha un valore corrispondente utile a script o elaborazioni; per date e orari usa invece l'elemento più specifico <time>.

ahyperlink

What it is: Il tag <a> è un elemento inline utilizzato per creare collegamenti ipertestuali (hyperlink) in un documento HTML.
What it's for: Serve a creare link clickabili che possono indirizzare l'utente a altre pagine web, file, indirizzi email, posizioni all'interno della stessa pagina, o qualsiasi altra URL.
When to use it: Utilizzarlo ogni volta che si vuole creare un collegamento a un'altra risorsa, sia interna che esterna al sito web.

navnavigation section

What it is: Il tag <nav> è un elemento di sezione utilizzato per definire una sezione di navigazione principale in un documento HTML.
What it's for: Serve a raggruppare e identificare semanticamente i principali collegamenti di navigazione di un sito web o di una sezione di un documento.
When to use it: Utilizzarlo per racchiudere i menu di navigazione principali, come il menu principale del sito, menu di sezione, o qualsiasi gruppo di link che rappresenti una navigazione...

mapimage map

What it is: Il tag <map> è un elemento utilizzato per definire una mappa di immagine, ossia un'immagine con aree cliccabili.
What it's for: Serve a creare aree interattive all'interno di un'immagine, permettendo di associare diverse parti dell'immagine a diversi link o azioni.
When to use it: Utilizzarlo quando si vuole rendere diverse aree di un'immagine cliccabili e collegate a diverse destinazioni, come in mappe geografiche interattive o diagrammi complessi.

areaclickable area in an image map

What it is: Il tag <area> è un elemento vuoto utilizzato all'interno di un <map> per definire un'area cliccabile in una mappa di immagine.
What it's for: Serve a specificare una regione cliccabile all'interno di un'immagine, permettendo di creare link o azioni associate a parti specifiche dell'immagine.
When to use it: Utilizzarlo all'interno di un elemento <map> per definire aree interattive in un'immagine, come in mappe geografiche, diagrammi o interfacce basate su immagini.

imgimage

What it is: Il tag <img> è un elemento vuoto utilizzato per incorporare un'immagine in un documento HTML.
What it's for: Serve a visualizzare immagini all'interno di una pagina web, che possono essere fotografie, illustrazioni, grafici, o qualsiasi altro tipo di contenuto visivo.
When to use it: Utilizzarlo ogni volta che si desidera includere un'immagine nel contenuto della pagina, sia per scopi decorativi che informativi.

figureself-contained content

What it is: Il tag <figure> è un elemento contenitore utilizzato per incapsulare contenuti autonomi come immagini, diagrammi, codice, ecc., spesso accompagnati da una didascalia.
What it's for: Serve a raggruppare un contenuto autonomo (come un'immagine, un grafico, un video) con la sua didascalia, creando un'unità semantica indipendente all'interno del documento.
When to use it: Utilizzarlo quando si vuole presentare un contenuto che è riferito nel testo principale ma che potrebbe essere spostato in un'appendice o in un'altra parte del documento senza...

figcaptioncaption for a figure

What it is: Il tag <figcaption> è un elemento utilizzato all'interno di <figure> per fornire una didascalia o una spiegazione del contenuto della figura.
What it's for: Serve a fornire un titolo, una spiegazione o un contesto aggiuntivo per il contenuto racchiuso nell'elemento <figure> associato.
When to use it: Utilizzarlo all'interno di un elemento <figure> per descrivere o spiegare il contenuto della figura, che può essere un'immagine, un grafico, un video, un blocco di...

audioaudio playback

What it is: Il tag <audio> è un elemento HTML5 utilizzato per incorporare contenuti audio in un documento web.
What it's for: Serve a riprodurre file audio direttamente nel browser senza la necessità di plugin esterni, offrendo controlli nativi per la riproduzione.
When to use it: Utilizzarlo quando si vuole inserire contenuti audio come musica, podcast, effetti sonori o qualsiasi altro tipo di audio nella pagina web.

videovideo playback

What it is: Il tag <video> è un elemento HTML5 utilizzato per incorporare contenuti video in un documento web.
What it's for: Serve a riprodurre file video direttamente nel browser senza la necessità di plugin esterni, offrendo controlli nativi per la riproduzione e diverse opzioni di personalizzazione.
When to use it: Utilizzarlo quando si vuole inserire contenuti video come filmati, animazioni, tutorial video o qualsiasi altro tipo di contenuto video nella pagina web.

sourcealternative media source

What it is: Il tag <source> è un elemento vuoto utilizzato all'interno degli elementi <audio>, <video> o <picture> per specificare risorse multimediali alternative.
What it's for: Serve a fornire più versioni di una risorsa multimediale (audio, video o immagine) per garantire la massima compatibilità tra diversi browser e dispositivi.
When to use it: Utilizzarlo all'interno di elementi <audio>, <video> o <picture> quando si vogliono offrire formati alternativi dello stesso contenuto multimediale.

tracktext track for media

What it is: Il tag <track> è un elemento vuoto utilizzato come figlio degli elementi <audio> e <video> per specificare tracce di testo temporizzate.
What it's for: Serve a fornire sottotitoli, didascalie, descrizioni audio o altri tipi di testo sincronizzato con il contenuto audio o video.
When to use it: Utilizzarlo all'interno di elementi <audio> o <video> quando si vogliono aggiungere sottotitoli, traduzioni, descrizioni audio o capitoli al contenuto multimediale.

canvasdynamic drawing area

What it is: Il tag <canvas> è un elemento HTML che fornisce un'area rettangolare su cui è possibile disegnare grafici, animazioni o altri elementi visivi utilizzando JavaScript.
What it's for: Serve a creare grafici, animazioni, giochi, visualizzazioni di dati e altri contenuti visivi dinamici direttamente nel browser senza l'uso di plugin esterni.
When to use it: Utilizzarlo quando si necessita di rendere grafici o animazioni complesse, creare giochi basati sul browser, o realizzare visualizzazioni di dati interattive che richiedono...

svgscalable vector graphics

What it is: Il tag <svg> è un elemento contenitore per grafica vettoriale scalabile (Scalable Vector Graphics) in HTML5.
What it's for: Serve a definire e incorporare grafica vettoriale scalabile direttamente nel documento HTML, permettendo la creazione di immagini che mantengono la nitidezza a qualsiasi...
When to use it: Utilizzarlo per creare icone, loghi, illustrazioni, grafici interattivi e animazioni che devono essere nitidi a qualsiasi risoluzione o dimensione dello schermo.

tabledata table

What it is: Il tag <table> è un elemento HTML utilizzato per creare tabelle di dati strutturati in righe e colonne.
What it's for: Serve a presentare informazioni in un formato tabulare, organizzando dati in righe e colonne per una facile lettura e confronto.
When to use it: Utilizzarlo quando si necessita di presentare dati strutturati che hanno una relazione bidimensionale, come orari, statistiche, informazioni di confronto o qualsiasi set di...

captionthe table's title

What it is: Il tag <caption> definisce il titolo o la didascalia di una tabella.
What it's for: Serve a fornire una descrizione dell'intera tabella, utile alla comprensione e all'accessibilità, mostrata di default sopra di essa.
When to use it: Utilizzarlo come primo figlio dell'elemento <table>, per dare un titolo che spieghi quali dati contiene.

colgroupcolumn group

What it is: Il tag <colgroup> raggruppa una o più colonne di una tabella per poterle formattare insieme.
What it's for: Serve a definire proprietà comuni (come larghezza o stile) applicabili a intere colonne, senza doverle ripetere su ogni cella.
When to use it: Utilizzarlo subito dopo <caption> (o all'inizio della tabella), contenendo di norma elementi <col>.

colsingle column

What it is: Il tag <col> rappresenta una singola colonna (o più colonne con l'attributo span) all'interno di un <colgroup>.
What it's for: Serve ad applicare stili o attributi a una colonna specifica della tabella; è un elemento vuoto, senza tag di chiusura.
When to use it: Utilizzarlo dentro un <colgroup> quando vuoi dare a colonne precise una larghezza o uno stile comune.

theadtable header

What it is: Il tag <thead> è un elemento HTML utilizzato per raggruppare il contenuto dell'intestazione in una tabella HTML.
What it's for: Serve a definire un gruppo di righe che formano l'intestazione di una tabella, tipicamente contenendo etichette descrittive per le colonne.
When to use it: Utilizzarlo all'interno di un elemento <table> per racchiudere le righe di intestazione della tabella, generalmente la prima riga o le prime righe che descrivono il...

tbodytable body

What it is: Il tag <tbody> è un elemento HTML utilizzato per raggruppare il contenuto principale (corpo) di una tabella HTML.
What it's for: Serve a incapsulare le righe che contengono i dati principali della tabella, separandoli dall'intestazione (<thead>) e dal piè di pagina (<tfoot>).
When to use it: Utilizzarlo all'interno di un elemento <table> per racchiudere le righe di dati della tabella, escludendo le righe di intestazione e di piè di pagina.

tfoottable footer

What it is: Il tag <tfoot> è un elemento HTML utilizzato per raggruppare il contenuto del piè di pagina in una tabella HTML.
What it's for: Serve a definire un gruppo di righe che formano il piè di pagina di una tabella, tipicamente contenente riepiloghi, totali o altre informazioni conclusive relative ai dati...
When to use it: Utilizzarlo all'interno di un elemento <table> per racchiudere le righe di piè di pagina della tabella, generalmente contenenti totali, somme o altre informazioni...

trtable row

What it is: Il tag <tr> è un elemento HTML che definisce una riga all'interno di una tabella.
What it's for: Serve a creare una riga orizzontale in una tabella, contenendo celle di dati (<td>) o celle di intestazione (<th>).
When to use it: Utilizzarlo all'interno di elementi <table>, <thead>, <tbody>, o <tfoot> per definire ogni singola riga della tabella.

thtable header cell

What it is: Il tag <th> è un elemento HTML che definisce una cella di intestazione all'interno di una tabella.
What it's for: Serve a creare celle di intestazione per colonne o righe in una tabella, fornendo un'etichetta o una descrizione per i dati contenuti nelle celle normali (<td>).
When to use it: Utilizzarlo all'interno di elementi <tr> per definire intestazioni di colonna (tipicamente nella prima riga) o intestazioni di riga (tipicamente nella prima colonna) di...

tdtable data cell

What it is: Il tag <td> è un elemento HTML che definisce una cella di dati standard all'interno di una tabella.
What it's for: Serve a contenere i dati effettivi di una tabella, rappresentando una singola unità di informazione all'interno di una riga.
When to use it: Utilizzarlo all'interno di elementi <tr> per definire celle di dati standard, che non sono intestazioni, in una tabella.

formcontainer for an interactive form

What it is: Il tag <form> è un elemento HTML che rappresenta una sezione di un documento contenente controlli interattivi per l'invio di informazioni.
What it's for: Serve a creare un'area interattiva in cui gli utenti possono inserire dati e inviarli a un server per l'elaborazione.
When to use it: Utilizzarlo quando si ha bisogno di raccogliere informazioni dagli utenti, come in moduli di contatto, moduli di ricerca, form di registrazione, sondaggi, e qualsiasi altra...

inputinteractive input field

What it is: Il tag <input> è un elemento HTML che crea un campo di input interattivo all'interno di un form, permettendo all'utente di inserire dati di vario tipo.
What it's for: Serve a raccogliere input dell'utente in vari formati, come testo, numeri, date, checkbox, radio button, e altro, a seconda del tipo specificato.
When to use it: Utilizzarlo all'interno di un <form> o in modo indipendente quando è necessario raccogliere input specifici dall'utente, come in moduli di registrazione, campi di...

textareainput field for multi-line text

What it is: Il tag <textarea> è un elemento HTML che crea un controllo per l'inserimento di testo su più righe all'interno di un form.
What it's for: Serve a permettere agli utenti di inserire grandi quantità di testo libero, come commenti, messaggi, descrizioni o qualsiasi altro contenuto che richieda più spazio di un...
When to use it: Utilizzarlo quando si ha bisogno di raccogliere input testuali estesi dagli utenti, come in campi per commenti, aree di feedback, campi di descrizione in form di inserimento...

buttonclickable button

What it is: Il tag <button> è un elemento HTML che crea un pulsante cliccabile, permettendo agli utenti di inviare form o attivare funzionalità JavaScript.
What it's for: Serve a creare elementi interattivi che l'utente può cliccare o toccare per eseguire un'azione, come inviare un form, attivare una funzione JavaScript, o navigare verso una...
When to use it: Utilizzarlo quando si vuole fornire all'utente un modo chiaro e interattivo per eseguire un'azione specifica, come "Invia", "Cerca", "Aggiungi al carrello", o per attivare...

selectdropdown menu

What it is: Il tag <select> è un elemento HTML che crea un menu a discesa o una lista di selezione, permettendo agli utenti di scegliere una o più opzioni da un elenco predefinito.
What it's for: Serve a fornire agli utenti un'interfaccia per selezionare una o più opzioni da un elenco predefinito, ottimizzando lo spazio e semplificando la scelta in caso di molte opzioni...
When to use it: Utilizzarlo quando si vuole offrire all'utente una scelta tra diverse opzioni predefinite, specialmente quando lo spazio è limitato o quando il numero di opzioni è elevato.

optionoption in a dropdown menu

What it is: Il tag <option> è un elemento HTML che definisce una singola opzione all'interno di un elemento <select>, <optgroup>, o <datalist>.
What it's for: Serve a creare una singola scelta selezionabile all'interno di un menu a discesa o di una lista di selezione, rappresentando un valore che può essere scelto dall'utente.
When to use it: Utilizzarlo all'interno di elementi <select> per definire ciascuna opzione disponibile per la selezione.

optgroupgroup of options in a dropdown menu

What it is: Il tag <optgroup> è un elemento HTML utilizzato all'interno di un elemento <select> per raggruppare opzioni correlate.
What it's for: Serve a creare una struttura gerarchica all'interno di un menu a discesa, organizzando le opzioni in categorie logiche per migliorare la leggibilità e la navigabilità...
When to use it: Utilizzarlo all'interno di elementi <select> quando le opzioni possono essere logicamente categorizzate, come raggruppare città per nazione, prodotti per categoria, o...

labellabel for form elements

What it is: Il tag <label> è un elemento HTML che definisce un'etichetta per un elemento di form interattivo.
What it's for: Serve a creare un'associazione esplicita tra un'etichetta di testo e un elemento di form specifico, migliorando l'usabilità e l'accessibilità dell'interfaccia utente.
When to use it: Utilizzarlo per ogni elemento di input in un form, inclusi input text, checkbox, radio buttons, select, e textarea.

fieldsetgrouping of form elements

What it is: Il tag <fieldset> è un elemento HTML utilizzato per raggruppare elementi correlati all'interno di un form.
What it's for: Serve a creare un raggruppamento logico di campi di form, fornendo una struttura organizzativa e semantica ai controlli del form correlati.
When to use it: Utilizzarlo quando si hanno gruppi di input relativi allo stesso argomento o funzione all'interno di un form, come informazioni personali, dettagli di spedizione, preferenze...

legendtitle for a form group

What it is: Il tag <legend> è un elemento HTML utilizzato per fornire un titolo o una caption per il contenuto di un elemento <fieldset>.
What it's for: Serve a descrivere il gruppo di controlli di form racchiusi all'interno di un <fieldset>, fornendo un contesto chiaro e una descrizione per il gruppo di elementi correlati.
When to use it: Utilizzarlo come primo elemento figlio all'interno di un <fieldset> per etichettare e descrivere il gruppo di controlli di form contenuti nel fieldset.

datalistlist of predefined options for an input

What it is: Il tag <datalist> è un elemento HTML che fornisce una lista di opzioni predefinite per gli elementi <input>.
What it's for: Serve a creare una lista di suggerimenti o opzioni per un campo di input, offrendo all'utente un'autocompletamento o una selezione rapida, pur mantenendo la possibilità di...
When to use it: Utilizzarlo quando si vuole fornire suggerimenti o opzioni predefinite per un campo di input, ma si desidera anche consentire all'utente di inserire valori non presenti nella...

outputthe result of a calculation or a user action

What it is: Il tag <output> è un elemento HTML che rappresenta il risultato di un calcolo o l'esito di un'azione dell'utente.
What it's for: Serve a visualizzare il risultato di un'operazione, tipicamente all'interno di un form, fornendo un contenitore semantico per i valori calcolati o generati dinamicamente.
When to use it: Utilizzarlo quando si vuole mostrare il risultato di un calcolo basato su input dell'utente, come la somma di valori, il risultato di una conversione, o qualsiasi output...

progressprogress bar

What it is: Il tag <progress> è un elemento HTML che rappresenta visualmente lo stato di avanzamento di un'operazione.
What it's for: Serve a mostrare all'utente il progresso di un'attività, come il caricamento di un file, il completamento di un form, o qualsiasi processo che richieda tempo per essere completato.
When to use it: Utilizzarlo quando si vuole fornire un feedback visivo all'utente su un'operazione in corso, specialmente per processi che richiedono tempo o hanno più fasi di completamento.

meterscalar measurement within a known range

What it is: Il tag <meter> è un elemento HTML che rappresenta una misurazione scalare all'interno di un intervallo noto o un valore frazionario.
What it's for: Serve a visualizzare una misurazione su una scala con un minimo e un massimo definiti, come l'utilizzo del disco, il punteggio di un test, o qualsiasi altro valore che rientri...
When to use it: Utilizzarlo quando si vuole rappresentare visivamente un valore che ha un significato specifico all'interno di un intervallo noto, a differenza di <progress> che indica...

detailscontainer for expandable details

What it is: Il tag <details> è un elemento HTML che crea un widget di divulgazione interattivo in cui l'utente può ottenere informazioni aggiuntive o controlli espandendo il contenuto.
What it's for: Serve a creare un contenitore espandibile/contraibile per contenuti aggiuntivi, permettendo agli utenti di visualizzare o nascondere informazioni dettagliate su richiesta.
When to use it: Utilizzarlo quando si vuole fornire informazioni aggiuntive o dettagli che non sono immediatamente necessari, ma che possono essere utili per alcuni utenti, come FAQ...

summaryvisible heading for details

What it is: Il tag <summary> è un elemento HTML utilizzato come primo figlio dell'elemento <details> per fornire un'intestazione o un'etichetta visibile per il contenuto...
What it's for: Serve a specificare un titolo o una descrizione sintetica per il contenuto nascosto all'interno dell'elemento <details>, fungendo da controllo interattivo per espandere o...
When to use it: Utilizzarlo sempre come primo elemento figlio all'interno di un <details> per fornire un'etichetta chiara e concisa che descrive il contenuto nascosto o espandibile.

picturecontainer for responsive images

What it is: Il tag <picture> è un elemento HTML che contiene zero o più elementi <source> e un elemento <img>, fornendo un modo per specificare multiple sorgenti per...
What it's for: Serve a offrire versioni alternative di un'immagine per diversi scenari, come diverse risoluzioni dello schermo, formati di file supportati o art direction (adattamento del...
When to use it: Utilizzarlo quando si vuole fornire immagini responsive che si adattano a diverse condizioni di visualizzazione, o quando si desidera offrire formati di immagine più efficienti...

dialogdialog window / modal

What it is: Il tag <dialog> rappresenta una finestra di dialogo o un pannello interattivo, come una modale o un box a comparsa.
What it's for: Serve a creare finestre modali native del browser, che gestiscono automaticamente il focus e lo sfondo oscurato quando aperte con il metodo showModal().
When to use it: Utilizzarlo per popup, conferme o form modali, aprendolo e chiudendolo via JavaScript (show/showModal/close) invece di ricostruire tutto a mano.

templateHTML template that is not rendered

What it is: Il tag <template> contiene frammenti di HTML che non vengono renderizzati al caricamento della pagina.
What it's for: Serve a definire una porzione di markup "modello" da clonare e inserire nel documento tramite JavaScript quando serve.
When to use it: Utilizzarlo quando devi generare dinamicamente elementi ripetuti (righe di una lista, card, ecc.) partendo da una struttura predefinita.

menulist of commands

What it is: Il tag <menu> rappresenta un elenco di comandi o di voci, semanticamente simile a una lista non ordinata.
What it's for: Serve a raggruppare in modo semantico un insieme di azioni o strumenti, ad esempio una barra di pulsanti (toolbar).
When to use it: Utilizzarlo per toolbar e liste di comandi interattivi; per la navigazione principale del sito preferisci <nav> con <ul>.

iframeinline frame for external content

What it is: Il tag <iframe> (Inline Frame) è un elemento HTML che permette di incorporare un documento HTML esterno all'interno della pagina corrente.
What it's for: Serve a incorporare contenuti da altre fonti, come video, mappe, widget o intere pagine web, all'interno della pagina corrente senza dover reindirizzare l'utente.
When to use it: Utilizzarlo quando si vuole integrare contenuti esterni che non possono essere facilmente replicati o incorporati direttamente nella pagina, come video di YouTube, mappe di...

embedcontainer for external content or plugins

What it is: Il tag <embed> è un elemento HTML utilizzato per incorporare contenuti esterni o applicazioni plug-in all'interno di una pagina web.
What it's for: Serve a integrare contenuti multimediali esterni, applicazioni o altri tipi di risorse che richiedono plugin o gestori specifici per essere visualizzati.
When to use it: Il suo uso è generalmente sconsigliato nelle applicazioni web moderne.

objectcontainer for external objects

What it is: Il tag <object> è un elemento HTML utilizzato per incorporare oggetti esterni come immagini, contenuti multimediali, applicazioni o altri documenti HTML all'interno di...
What it's for: Serve a integrare una vasta gamma di contenuti esterni, inclusi ma non limitati a PDF, SVG, Flash (ormai obsoleto), e altri tipi di file o applicazioni che possono essere...
When to use it: Utilizzarlo quando si desidera incorporare contenuti esterni che non sono gestiti nativamente da HTML5, o quando si necessita di maggiore flessibilità rispetto ad elementi più...

paramparameter for objects

What it is: Il tag <param> è un elemento HTML utilizzato per definire parametri per gli elementi <object>.
What it's for: Serve a passare parametri di configurazione agli oggetti incorporati tramite il tag <object>, permettendo di personalizzare il comportamento o l'aspetto dell'oggetto...
When to use it: Utilizzarlo all'interno di un elemento <object> quando si necessita di specificare impostazioni o configurazioni per l'oggetto incorporato, come file multimediali o...