Html

Cosa vuol dire Html?

HTML significa HyperText Markup Language, è il linguaggio di markup standard per i documenti progettati per essere visualizzati in un browser web. Esso definisce il significato e la struttura del contenuto nel web. È spesso assistito da tecnologie come Cascading Style Sheets (CSS) e linguaggi di scripting come JavaScript.

I browser Web ricevono documenti HTML da un server Web o da un archivio locale e trasformano i documenti in pagine Web multimediali. L’HTML descrive semanticamente la struttura di una pagina web e originariamente includeva suggerimenti per la formazione del suo aspetto.

Gli elementi HTML sono gli elementi costitutivi delle pagine HTML. Con i costrutti HTML, immagini e altri oggetti come moduli interattivi possono essere incorporati nella pagina che viene renderizzata(da un browser).

Argomenti

• Cosa vuol dire Html?
• I tag Html
• Cronologia delle Versioni Html
• XHTML
• MarkUp Html
• Elementi Html
  • Sintassi degli Elementi Html
  • Tipi di elementi Html
  • Struttura Elementi Html
  • Elementi Head della pagina Html
  • Elementi Body della pagina Html
    • Elementi Block
    • Elementi Testo
    • Elementi Elenco
    • Altri elementi Block
    • Elementi Inline
    • Ancore
    • Elementi della frase
    • Elementi informatici
    • Elementi di presentazione contenuto
    • Immagini e Oggetti
    • Tabelle
    • Frame

I tag Html

L’HTML fornisce un mezzo per creare documenti strutturati ti fornisce una semantica strutturale per testo, come titoli, paragrafi, elenchi, collegamenti, virgolette e molti altri elementi. Gli elementi HTML sono delineati da tag, scritti utilizzando parentesi angolari.

Tag come <img> e <input>introducono direttamente il contenuto nella pagina.

Altri tag come <p> e </p> racchiudono e forniscono informazioni sul testo del documento e possono includere tag di sottoelementi. I browser non visualizzano i tag HTML ma li utilizzano per interpretare il contenuto della pagina.
L’HTML può incorporare programmi scritti in un linguaggio di scripting come JavaScript, che influisce sul comportamento e sul contenuto delle pagine web.

L’inclusione dei CSS definisce l’aspetto e il layout del contenuto. Il World Wide Web Consortium (W3C), ex manutentore dell’HTML e attuale manutentore degli standard CSS, ha incoraggiato l’uso dei CSS rispetto all’HTML presentazionale dal 1997.

Una forma di HTML, nota come HTML5, viene utilizzata per visualizzare video e audio, principalmente utilizzando l’elemento <canvas>, insieme a JavaScript.

Cronologia della versione HTML

XHtml

Extensible HyperText Markup Language (XHTML) fa parte della famiglia dei linguaggi di markup XML. Rispecchia o estende le versioni dell’HyperText Markup Language (HTML), ampiamente utilizzato, il linguaggio in cui sono formulate le pagine Web.

XHTML 1.0 era “una riformulazione dei tre tipi di documenti HTML 4 come applicazioni di XML 1.0”. Anche il World Wide Web Consortium (W3C) ha mantenuto contemporaneamente la raccomandazione HTML 4.01. Nel documento XHTML 1.0 Recommendation, pubblicato e rivisto nell’agosto 2002, il W3C ha commentato che:

“La famiglia XHTML è il passo successivo nell’evoluzione di Internet. Migrando a XHTML oggi, gli sviluppatori di contenuti possono entrare nel mondo XML con tutte le i relativi vantaggi, pur rimanendo fiduciosi nella compatibilità con le versioni precedenti e future dei loro contenuti.”

XHTML è stato sviluppato per rendere l’HTML più estensibile e aumentare l’interoperabilità con altri formati di dati.

Inoltre, i browser perdonavano gli errori in HTML e la maggior parte dei siti Web veniva visualizzata nonostante errori tecnici nel markup; XHTML ha introdotto una gestione degli errori più rigorosa.

Markup Html

Il markup HTML è costituito da diversi componenti chiave, inclusi quelli chiamati tag (e i loro attributi), tipi di dati basati sui caratteri, riferimenti a caratteri e riferimenti a entità.

I tag HTML vengono comunemente forniti a coppie come <h1> e </h1>, sebbene alcuni rappresentino elementi vuoti e quindi non siano accoppiati, ad esempio <img>. Il primo tag della coppia è il tag di inizio e il secondo è il tag di fine (anche chiamati tag di apertura e tag di chiusura).

Un altro componente importante è la dichiarazione del tipo di documento HTML, che attiva il rendering in modalità standard.

Quello che segue è un esempio del classico di Html:

<!DOCTYPE html>
<html>
  <head>
    <title>Questo è un Titolo</title>
  </head>
  <body>
    <div>
        <p>Ciao Mondo!</p>
    </div>
  </body>
</html>

Il testo tra <html> e </html> descrive la pagina web, mentre il testo tra <body> e </body>è il contenuto visibile della pagina.

Il testo di markup <title>Questo è un titolo</title> definisce il titolo della pagina del browser mostrato nelle schede del browser e nei titoli delle finestre e il tag <div> definisce una divisione della pagina utilizzata per uno stile semplice.

Tra <head> e </head> è possibile utilizzare un elemento <meta> per definire i metadati della pagina web.

La dichiarazione del tipo di documento <!DOCTYPE html> è per HTML5. Se una dichiarazione non viene inclusa, vari browser torneranno alla “modalità quirk” per il rendering.

Elementi Html

Un elemento HTML è un tipo di componente di documento HTML (HyperText Markup Language), uno dei diversi tipi di nodi HTML (ci sono anche nodi di testo, nodi di commento e altri).

La prima versione di HTML utilizzata è stata scritta da Tim Berners -Lee nel 1993 e da allora ci sono state molte versioni di HTML. La versione più comunemente utilizzata è HTML 4.01, divenuta standard ufficiale nel dicembre 1999.

Un documento HTML è composto da un albero di semplici nodi HTML, come nodi di testo, ed elementi HTML, che aggiungono semantica e formattazione a parti del documento (ad esempio, rendono il testo in grassetto, lo organizzano in paragrafi, elenchi e tabelle o incorporano collegamenti ipertestuali e immagini). Per ogni elemento possono essere specificati attributi HTML. Gli elementi possono anche includere contenuto, come altri elementi e testo.

Elementi VS tag

Come comunemente noto, la posizione di un elemento è indicata da un tag di apertura ed è terminata da un tag di chiusura.
Questo è il caso di molti, ma non di tutti gli elementi di un documento HTML. La distinzione è stata esplicitamente enfatizzata nella specifica HTML 4.01:

Gli elementi non sono tag. Alcune persone si riferiscono agli elementi come tag (ad esempio, “il tag P”). Ricorda che l’elemento è una cosa e il tag (sia esso di inizio o di fine) è un’altra. Ad esempio, l’elemento HEAD è sempre presente, anche se nel markup potrebbero mancare sia i tag iniziali che quelli finali.

Allo stesso modo la raccomandazione W3C HTML 5.1 2a edizione afferma esplicitamente:

I tag vengono utilizzati per delimitare l’inizio e la fine degli elementi nel markup. (…) I tag di inizio e fine di alcuni elementi normali possono essere omessi, (…)
Il contenuto dell’elemento deve essere posizionato subito dopo il tag di inizio (che potrebbe essere implicito, in alcuni casi) e subito prima del tag di fine (che, ancora una volta, potrebbe essere implicito, in alcuni casi).

Sintassi degli elementi HTML

Nella sintassi HTML, la maggior parte degli elementi sono scritti con un tag di inizio e un tag di fine, con il contenuto in mezzo. Un tag HTML è composto dal nome dell’elemento, racchiuso tra parentesi angolari. Un tag di fine ha anche una barra dopo la parentesi angolare di apertura, per distinguerlo dal tag di inizio. Ad esempio, un paragrafo, rappresentato dall’elemento <p>, verrebbe scritto come:

<p>Nella sintassi Html la maggior parte degli elementi ...</p>

Tuttavia, non tutti questi elementi richiedono la presenza del tag di chiusura, o di inizio.

Alcuni elementi, i cosiddetti elementi void, non hanno un tag di fine. Un tipico esempio è l’elemento
(interruzione di riga). Il comportamento di un elemento void è predefinito e non può contenere alcun contenuto o altri elementi. Ad esempio, un indirizzo verrebbe scritto come:

<p>M. Rossi<br>Via Monte Napoleone<br>Milano</p>

Quando si utilizza XHTML, è necessario aprire e chiudere tutti gli elementi, inclusi gli elementi void. Questo può essere fatto inserendo un tag di fine immediatamente dopo il tag di inizio, ma questo non è permesso in HTML 5 e porterà alla creazione di due elementi. Un modo alternativo per specificare che si tratta di un elemento void, compatibile sia con XHTML che con HTML 5, è mettere una / alla fine del tag (da non confondere con la / all’inizio di un tag di chiusura).

<p>P. Rossi<br />Via Monte Napoleone<br />Milano</p>

Gli attributi HTML sono specificati all’interno del tag di inizio. Ad esempio, l’elemento, che rappresenta un’abbreviazione, prevede un attributo title all’interno del tag di apertura. Questo sarebbe scritto:

<abbr title="abbreviation">abbr.</abbr>

Informalmente, gli elementi HTML vengono talvolta definiti “tag” (un esempio di sineddoche), sebbene molti preferiscano il termine tagquando ci si riferisce  al markup che delimita l’inizio e la fine di un elemento.

I nomi degli elementi (e degli attributi) possono essere scritti in qualsiasi combinazione di maiuscole o minuscole in HTML, ma devono essere in minuscolo in XHTML.
La forma canonica era maiuscola fino a HTML 4 e veniva utilizzata nelle specifiche HTML, ma negli ultimi anni la minuscola è diventata più comune.

Tipi di elemento HTML

Esistono tre tipi di elementi HTML: elementi normali, elementi di testo grezzo ed elementi void.

Gli elementi normali di solito hanno sia un tag di inizio che un tag di fine, sebbene per alcuni elementi il tag di fine, o entrambi i tag, possa essere omesso. È costruito in modo simile:

• un tag iniziale (<tag>) che segna l’inizio di un elemento, che può incorporare un numero qualsiasi di attributi HTML;
• una certa quantità di contenuti, inclusi testo e altri elementi;
• un tag di fine, in cui il nome dell’elemento è preceduto da una barra slash: </tag>.

I Raw elements (noti anche come elementi di testo o di solo testo) sono costruiti con:

• un tag iniziale (nella forma <tag>) che segna l’inizio di un elemento, che può incorporare un numero qualsiasi di attributi HTML;
• una certa quantità di contenuto testuale, ma nessun elemento (tutti i tag, tranne il tag finale applicabile, verranno interpretati come contenuto);
• un tag di fine, in cui il nome dell’elemento è preceduto da una barra: </tag>. In alcune versioni di HTML, il tag di fine è facoltativo per alcuni elementi. Il tag finale è obbligatorio in XHTML.

Un esempio è l’elemento <title>, che non deve contenere altri elementi (compreso il markup del testo), solo testo semplice.

Gli elementi vuoti (a volte chiamati anche elementi vuoti, elementi singoli o elementi autonomi) hanno solo un tag iniziale (nella forma <tag>), che contiene eventuali attributi HTML. Non possono contenere elementi secondari, come testo o altri elementi. Per compatibilità con XHTML, la specifica HTML[quale?] consente uno spazio e una barra opzionali[citazione necessaria] (<tag /> è consentito). La barra è obbligatoria in XHTML e in altre applicazioni XML. Due elementi vuoti comuni sono <br /> (per un’interruzione di riga netta, come in una poesia o un indirizzo) e <hr /> (per un’interruzione tematica). Altri elementi simili sono spesso segnaposto che fanno riferimento a file esterni, come l’elemento immagine (<img />). Gli attributi inclusi nell’elemento punteranno quindi al file esterno in questione. Un altro esempio di elemento void è <link />, la cui sintassi è:

<link rel="stylesheet" href="fancy.css" type="text/css">

Questo elemento indirizza il browser a un foglio di stile da utilizzare quando si presenta il documento HTML all’utente. Nella sintassi HTML gli attributi non devono essere racchiusi tra virgolette se sono composti solo da determinati caratteri: lettere, cifre, il trattino meno e il punto. Quando si utilizza la sintassi XML (XHTML), d’altro canto, tutti gli attributi devono essere racchiusi tra virgolette ed è richiesta una barra finale spaziata prima dell’ultima parentesi angolare:

<link rel="stylesheet" href="fancy.css" type="text/css" />

Standard degli elementi Html

Gli elementi HTML sono definiti in una serie di standard aperti liberamente disponibili emessi a partire dal 1995, inizialmente dall’IETF e successivamente dal W3C.

Durante la guerra dei browser degli anni ’90, gli sviluppatori di user agent (ad esempio i browser web) spesso sviluppavano i propri elementi, alcuni dei quali sono stati adottati negli standard successivi. Altri programmi utente potrebbero non riconoscere elementi non standard e verranno ignorati, causando probabilmente una visualizzazione impropria della pagina.

Nel 1998, XML (una forma semplificata di SGML) ha introdotto meccanismi per consentire a chiunque di sviluppare i propri elementi e incorporarli in documenti XHTML, per l’utilizzo con programmi utente compatibili con XML.

Elementi della struttura del documento

<html>…</html>

L’elemento radice di un documento HTML; tutti gli altri elementi sono contenuti in questo. L’elemento HTML delimita l’inizio e la fine di un documento HTML.
Sia il tag iniziale che quello finale possono essere omessi (HTML5).
Standardizzato in HTML 2.0; ancora attuale.

<head>…</head>

Contenitore per l’elaborazione di informazioni e metadati per un documento HTML.
Sia i tag di inizio che quelli di fine possono essere omessi e dedotti da elementi child (HTML5).
Standardizzato in HTML 5.0; ancora attuale.

<body></body>

Contenitore per il contenuto visualizzabile di un documento HTML.
Sia i tag di inizio che quelli di fine possono essere omessi e dedotti da elementi child (HTML5).
Standardizzato in HTML 2.0; ancora attuale.

Elementi Html Head di pagina

<base />

Specifica un URL di base per tutti i relativi href e altri collegamenti nel documento. Deve apparire prima di qualsiasi elemento che fa riferimento a una risorsa esterna. L’HTML consente solo un elemento <base> per ciascun documento. Questo elemento ha attributi HTML, ma nessun contenuto.
Una versione di sviluppo di questo elemento (come BASE) è menzionata nei tag HTML; standardizzato in HTML 2.0; ancora attuale.

<link />

Specifica collegamenti ad altri documenti, come collegamenti precedenti e successivi o versioni alternative.

Un uso comune è quello di collegarsi a fogli di stile esterni, utilizzando il modulo <link rel=”stylesheet” type=”text/css” href=”url” title=”description_of_style”>.

Un utilizzo meno comune, ma importante, è quello di fornire suggerimenti di navigazione in modo coerente attraverso l’uso di microformati. Vengono definite diverse relazioni comuni, che possono essere esposte agli utenti attraverso l’interfaccia del browser piuttosto che direttamente nella pagina web, come ad esempio: <link rel="next" href="url">. L’elemento <head> di un documento può contenere un numero qualsiasi di elementi <link />. Questo elemento ha attributi HTML, ma nessun contenuto.
LINK esisteva in HTML Internet Draft 1.2 ed era standardizzato in HTML 2.0; ancora attuale.

<meta />

Può essere utilizzato per specificare metadati aggiuntivi su un documento, come:

• autore,
• data di pubblicazione,
• data di scadenza,
• lingua,
• titolo della pagina,
• descrizione della pagina,
• parole chiave
• o altre informazioni non fornite tramite gli altri elementi di intestazione e attributi HTML.

A causa della loro natura generica, gli elementi <meta /> specificano coppie chiave-valore associative. In generale, un elemento meta trasmette informazioni nascoste sul documento(non visibili sulla pagina renderizzata). È possibile utilizzare diversi meta tag, tutti nidificati nell’elemento head. Lo scopo specifico di ciascun elemento <meta /> è definito dai suoi attributi. Al di fuori di XHTML, viene spesso fornito senza la barra (<meta>), nonostante sia un elemento void.

In una data forma, gli elementi <meta /> possono specificare intestazioni HTTP che dovrebbero essere inviate da un server web prima del contenuto effettivo. Ad esempio, <meta http-equiv=”hea” content=”bar” /> specifica che la pagina dovrebbe essere servita con un’intestazione HTTP chiamata hea che mostra una barra di valori.

Nella forma generale, un elemento <meta /> specifica il nome e gli attributi HTML del contenuto associato che descrivono gli aspetti della pagina HTML.
Per evitare possibili ambiguità, può essere disposto un terzo attributo opzionale, schema, per specificare una struttura semantica che definisce il significato della chiave e il suo valore. Ad esempio, in <meta name=”hea” content=”bar” schema=”DC” /> l’elemento <meta /> si identifica come contenente l’elemento hea, con un valore bar, dalla risorsa DC o Dublin Core description framework.

<object>…</object>

Utilizzato per includere oggetti generici nell’intestazione del documento. Sebbene usato raramente all’interno di un elemento <head>, potrebbe potenzialmente essere utilizzato per estrarre dati esterni e associarli al documento corrente.

<script>…</script>

Può fungere da contenitore per istruzioni di script o collegarsi a uno script esterno con l’attributo src opzionale. Utilizzabile anche nel corpo del documento per generare dinamicamente contenuto sia a blocchi che in linea.

<title>…</title>

Questo tag definisce il titolo di un documento. Richiesto in ogni documento HTML e XHTML. Gli user agent possono utilizzare il titolo in diversi modi. Per esempio:

• I browser Web solitamente lo visualizzano nella barra del titolo di una finestra quando la finestra è aperta e (ove applicabile) nella barra delle applicazioni quando la finestra è ridotta a icona.
• Potrebbe diventare il nome file predefinito quando si salva la pagina.
• Possiamo usare l’elemento <title> solo una volta in una pagina web, e quando creiamo un’altra pagina utilizzeremo di nuovo un altro elemento <title> con un nuovo titolo (non usare lo stesso nome per tutti o tanti tag title nel sito web, può essere un problema per i motori di ricerca).
• I web crawler dei motori di ricerca potrebbero prestare particolare attenzione alle parole utilizzate nel titolo.

L’elemento <title> non deve contenere altri elementi, solo testo. In un documento è consentito un solo elemento <title>.
Esisteva nei tag HTML ed era standardizzato in HTML 2.0; ancora attuale

Elementi HTML del Body di pagina

Nei browser visuali, gli elementi visualizzabili possono essere visualizzati come blocchi o in linea. Mentre tutti gli elementi fanno parte della sequenza del documento, gli elementi del blocco appaiono all’interno dei loro elementi principali:

• come oggetti rettangolari che non si interrompono attraverso le linee;
• con margini di blocco, proprietà di larghezza e altezza che possono essere impostate indipendentemente dagli elementi circostanti.

Al contrario, gli elementi inline vengono trattati come parte del flusso del testo del documento; non possono avere margini, larghezza o altezza impostati e si suddividono su righe.

Elementi di blocco Html

Gli elementi blocco html, o elementi block-level, hanno una struttura rettangolare. Per impostazione predefinita, questi elementi copriranno l’intera larghezza del relativo elemento genitore e quindi non consentiranno a nessun altro elemento di occupare lo stesso spazio orizzontale su cui sono posizionati.

La struttura rettangolare di un elemento a blocco viene spesso definita box model ed è composta da più parti. Ogni elemento contiene quanto segue:

• Il contenuto di un elemento è il testo effettivo (o altro supporto) inserito tra i tag di apertura e chiusura di un elemento.
• Il padding di un elemento è lo spazio attorno al contenuto ma che costituisce comunque parte dell’elemento. Il padding non deve essere utilizzato per creare spazi bianchi tra due elementi. Qualsiasi stile di sfondo assegnato all’elemento, ad esempio un’immagine o un colore di sfondo, sarà visibile all’interno del riempimento. Aumentando la dimensione del riempimento di un elemento aumenta la quantità di spazio che questo elemento occuperà.
• Il bordo di un elemento è la fine assoluta di un elemento e si estende lungo il perimetro di quell’elemento. Lo spessore di un bordo aumenta la dimensione di un elemento.
• Il margine di un elemento è lo spazio bianco che circonda un elemento. Il contenuto, il riempimento e il bordo di qualsiasi altro elemento non potranno entrare in quest’area a meno che non siano costretti a farlo da qualche posizionamento CSS avanzato. Utilizzando la maggior parte dei DTD standard, i margini a sinistra e a destra di diversi elementi si allontanano a vicenda. I margini nella parte superiore o inferiore di un elemento, invece, non si accumuleranno o si mescoleranno. Ciò significa che lo spazio bianco tra questi elementi sarà grande quanto il margine maggiore tra di loro.

La sezione precedente si riferisce solo all’implementazione dettagliata del rendering CSS e non ha alcuna rilevanza per gli elementi HTML stessi.

Testo di Base

<p>…</p>

Crea un paragrafo, forse l’elemento a livello di blocco più comune.
P esisteva nei tag HTML ed era standardizzato in HTML 2.0; ancora attuale.

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

Intestazioni delle sezioni a diversi livelli. h1 denota l’intestazione di livello più alto, h2 il livello successivo (sottosezione), h3 per un livello inferiore e così via fino a h6.

A volte vengono indicati collettivamente come tag hn, con il significato di uno qualsiasi dei livelli di intestazione disponibili. La maggior parte dei browser visuali mostra i titoli come testo in grassetto di grandi dimensioni per impostazione di default, sebbene ciò possa essere sovrascritto con i CSS. Gli elementi di intestazione non sono destinati esclusivamente alla creazione di testo grande o in grassetto; infatti, non dovrebbero essere utilizzati per definire esplicitamente uno stile del testo. Piuttosto, descrivono la struttura e l’organizzazione del documento. Alcuni programmi li utilizzano per generare schemi e sommari.
I titoli esistevano nei tag HTML ed furono standardizzati in HTML 2.0; sono ancora attuali.

Elenchi

<dl>…</dl>

Un elenco di descrizioni (noto anche come elenco di associazioni o elenco di definizioni), che consiste di gruppi nome-valore, ed era noto come elenco di definizioni prima di HTML5.

Gli elenchi di descrizioni sono destinati a gruppi di “termini e definizioni, argomenti e valori di metadati, domande e risposte o qualsiasi altro gruppo di dati nome-valore.

<dt>…</dt>

Un nome in un elenco di descrizioni (in precedenza termine di definizione in un elenco di definizioni).

<dd>…</dd>

Un valore in un elenco di descrizioni (in precedenza dati di definizione in un elenco di definizioni).

<ol>…</ol>

Un elenco ordinato (enumerato). L’attributo type può essere utilizzato per specificare il tipo di indicatore da utilizzare nell’elenco, ma i fogli di stile offrono un maggiore controllo in questo caso. L’impostazione predefinita è la numerazione araba.

<ul>…</ul>

Un elenco non ordinato (puntato). Il tipo di indicatore dell’elemento dell’elenco può essere specificato in un attributo HTML.

<li>…</li>

Un elemento di elenco in elenchi ordinati (ol) o non ordinati (ul).

Altri Block Element

<address>…</address>

Informazioni di contatto per l’autore del documento.

<article>…</article>

Utilizzato per articoli e altri contenuti simili.

<aside>…</aside>

Utilizzato per il contenuto di un documento separato dal contenuto della pagina principale, ad esempio barre laterali o pubblicità.

<blockquote>…</blockquote>

Una citazione a livello di blocco, quando la citazione include elementi a livello di blocco, ad es. paragrafi. L’attributo cite (da non confondere con l’elemento <cite>) può fornire la fonte e deve essere un identificatore di risorsa uniforme completamente qualificato.

La presentazione predefinita delle virgolette in blocco nei browser visuali consiste solitamente nel farle rientrare da entrambi i margini. Ciò ha portato l’elemento ad essere utilizzato inutilmente solo per rientrare i paragrafi, indipendentemente dalla semantica. Per le citazioni che non contengono elementi a livello di blocco vedere l’elemento quote (<q>).

<del>…</del>

Contrassegna una sezione di contenuto eliminata. Questo elemento può essere utilizzato anche come inline.

<div>…</div>

Una divisione logica a livello di blocco. Un elemento generico senza significato semantico utilizzato per distinguere una sezione del documento, solitamente per scopi quali la presentazione o il controllo del comportamento.

<figure>…</figure>

Utilizzato per raggruppare immagini e didascalie, insieme a <figcaption>.

<figcaption>…</figcaption>

Una didascalia per un’immagine. Sempre inserito all’interno dell’elemento <figure>.

<footer>…</footer>

Utilizzato per i piè di pagina del documento. Questi potrebbero contenere informazioni sull’autore o sul copyright o collegamenti ad altre pagine.

<header>…</header>

Utilizzato per le intestazioni dei documenti. Questi in genere contengono contenuti che introducono la pagina.

<hr />

Una pausa tematica (originariamente: regola orizzontale). Le regole di presentazione possono essere disegnate con i fogli di stile.

<ins>…</ins>

Contrassegna una sezione del contenuto inserito. Questo elemento può essere utilizzato anche come inline.

<main>…</main>

Contiene il contenuto principale di un documento.

<nav>…</nav>

Utilizzato nelle sezioni di navigazione degli articoli (aree di pagine Web che contengono collegamenti ad altre pagine Web).

<noscript>…</noscript>

Contenuti sostitutivi per gli script. A differenza dello script, questo può essere utilizzato solo come elemento a livello di blocco.

<pre>…</pre>

Testo preformattato. Il testo all’interno di questo elemento viene generalmente visualizzato in un carattere non proporzionale esattamente come è disposto nel file. Mentre i browser ignorano gli spazi bianchi per altri elementi HTML, in <pre>…</pre>, gli spazi bianchi dovrebbero essere visualizzati come creati.

<section>…</section>

Utilizzato per sezioni generiche di un documento. Questo è diverso da <div> in quanto viene utilizzato solo per contenere sezioni di una pagina, che il W3C definisce come un gruppo di contenuti con un tema simile.

<script>…</script>

Inserisce uno script nel documento. Utilizzabile anche in contesti head e inline. Può essere utilizzato come <script /> con un attributo src per fornire un URL da cui caricare lo script, oppure utilizzato come <script>…</script> attorno al contenuto dello script incorporato. Nota: <script> non è di per sé né un blocco né un elemento inline; di per sé non dovrebbe essere visualizzato affatto, ma può contenere istruzioni per generare dinamicamente sia contenuti a blocchi che in linea.

Elementi Inline

Gli elementi inline non possono essere posizionati direttamente all’interno dell’elemento <body>; devono essere completamente nidificati all’interno di elementi a livello di blocco.

Ancora

<a>…</a>

Un elemento di ancoraggio è chiamato ancora perché i web designer possono utilizzarlo per “ancorare” un URL a del testo su una pagina web. Quando gli utenti visualizzano la pagina Web in un browser, possono fare clic sul testo per attivare il collegamento e visitare la pagina il cui URL si trova nel collegamento.[26]

In HTML, un’ancora può essere l’origine (il testo dell’ancora) o l’estremità di destinazione (destinazione) di un collegamento ipertestuale.

Con l’attributo href, l’ancora diventa un collegamento ipertestuale a un’altra parte del documento o a un’altra risorsa (ad esempio una pagina web) utilizzando un URL esterno. In alternativa (e talvolta contemporaneamente), con gli attributi HTML name o id impostati, l’elemento diventa una destinazione del collegamento. Un URL (Uniform Resource Locator) può collegarsi a questa destinazione tramite un identificatore di frammento.

In HTML5, qualsiasi elemento può ora essere trasformato in un target utilizzando l’attributo id, quindi utilizzare <a name=”hea”>…</a> non è necessario, sebbene questo modo di aggiungere ancoraggi continui a lavoro.

Elementi della frase

Gli elementi frase vengono utilizzati per contrassegnare frasi e aggiungere struttura o significato semantico a frammenti di testo. Ad esempio, i tag <em> e <strong> possono essere utilizzati per aggiungere enfasi al testo.

Generali

<abbr>…</abbr>

Contrassegna un’abbreviazione e può rendere disponibile il modulo completo.

<dfn>…</dfn>

Definizione inline di un singolo termine.

<em>…</em>

Enfasi (convenzionalmente visualizzata in corsivo)

<strong>…</strong>

Importanza; originariamente forte enfasi (visualizzata convenzionalmente in grassetto). Un agente utente uditivo può utilizzare voci diverse per enfatizzare.

Elementi di frasi informatiche

Questi elementi sono utili principalmente per documentare lo sviluppo del codice del computer e l’interazione dell’utente attraverso la differenziazione del codice sorgente (<code>), variabili (<var>), input dell’utente (<kbd>) e terminale o altro output (<samp>)

<code>…</code>

Uno snippet di codice (esempio di codice). Reso convenzionalmente in un carattere a spaziatura singola.

<kbd>…</kbd>

Tastiera: testo che l’utente deve inserire (esempio kbd).

<samp>…</samp>

Output di esempio: da un programma o script: (esempio di esempio).

<var>…</var>

Variabile (esempio var).

Presentazione

Poiché il markup di presentazione visivo si applica direttamente solo ai browser visivi, il suo utilizzo è sconsigliato. Al loro posto dovrebbero essere utilizzati i fogli di stile. Molti di questi elementi sono deprecati o non validi in HTML 4/XHTML 1.0, mentre i restanti non sono validi nell’attuale bozza di XHTML 2.0. L’attuale bozza di HTML5, tuttavia, include nuovamente <s>, <u> e <small>, assegnando a ciascuno un nuovo significato semantico. In un documento HTML5 l’utilizzo di questi elementi non è più sconsigliato, a patto che sia semanticamente corretto.

<b>…</b>

In HTML 4, imposta il carattere in grassetto ove possibile. CSS equivalente: { peso-carattere: grassetto; }. L’elemento <strong> di solito ha lo stesso effetto nei browser visivi, oltre ad avere un significato più semantico, in HTML 4.01. In HTML5, tuttavia, <b> ha un suo significato, distinto da quello di <strong>. Denota “testo sul quale viene attirata l’attenzione per scopi utilitaristici senza trasmettere alcuna importanza aggiuntiva e senza implicazioni di una voce o di uno stato d’animo alternativi”.

<i>…</i>

In HTML 4, imposta il carattere corsivo ove possibile. CSS equivalente: { stile carattere: corsivo; }. L’uso di <em>…</em> ha lo stesso effetto visivo nella maggior parte dei browser, oltre ad avere un significato semantico come enfasi, in HTML 4.01. (Il corsivo puramente tipografico ha molti scopi non di enfasi, come riconosciuto più esplicitamente da HTML 5.) In HTML5, tuttavia, <i> ha un proprio significato semantico, distinto da quello di <em>. Denota “una diversa qualità di testo” o “una voce o uno stato d’animo alternativo”, ad esempio un pensiero, il nome di una nave, il nome di una specie binaria, una frase in lingua straniera, ecc.

<u>…</u>

In HTML 4, testo sottolineato. CSS equivalente: { decorazione del testo: sottolineatura; }. Deprecato nell’HTML 4.01. Restaurato in HTML5. In HTML5, l’elemento <u> denota “una porzione di testo con un’annotazione non testuale inarticolata, sebbene resa esplicitamente, come l’etichettatura del testo come nome proprio nel testo cinese (un segno di nome proprio cinese), o l’etichettatura il testo è scritto in modo errato.” La specifica HTML5 ricorda agli sviluppatori che altri elementi sono quasi sempre più appropriati di <u> e avverte i progettisti di non utilizzare testo sottolineato laddove potrebbe essere confuso con un collegamento ipertestuale.

<small>…</small>
In HTML 4, dimensione del carattere ridotta (testo più piccolo). CSS equivalente: { dimensione carattere: più piccolo; } In HTML5, l’elemento <small> denota “commenti collaterali come caratteri piccoli.”[33] Ciò ha causato una certa confusione con l’elemento <aside>…</aside>.

<s>…</s>

In HTML 4, indicava il testo barrato (Barrato) ed era equivalente a <strike>. In HTML5, l’elemento <s> denota informazioni che “non sono più accurate o non più rilevanti” e non deve essere confuso con <del>, che indica rimozione/eliminazione

Immagini e Oggetti

<area />

Specifica un’area focalizzabile in una <map>.

<audio>…</audio>

Aggiunge audio HTML5 riproducibile alla pagina. L’URL audio viene determinato utilizzando l’attributo src. I formati audio supportati variano da browser a browser.

<canvas>…</canvas>

Aggiunge una tela il cui contenuto può essere modificato con JavaScript. Utilizzato frequentemente per i giochi online.

<embed>…</embed>
Aggiunge una tela il cui contenuto può essere modificato con JavaScript. Utilizzato frequentemente per i giochi online.

<img />
Utilizzato dagli interpreti visivi per inserire un’immagine nel documento. L’attributo src specifica l’URL dell’immagine. L’attributo alt richiesto fornisce testo alternativo nel caso in cui l’immagine non possa essere visualizzata.[51] (Sebbene alt sia inteso come testo alternativo, Microsoft Internet Explorer 7 e versioni precedenti lo rendono come descrizione comando se non viene fornito l’attributo title.[52] Safari e Google Chrome, d’altro canto, non visualizzano affatto l’attributo alt.) [53] L’elemento <img /> è stato proposto per la prima volta da Marc Andreessen e implementato nel browser web NCSA Mosaic.

<map>…</map>

Specifica una mappa immagine lato client.

<object>…</object>

Include un oggetto nella pagina del tipo specificato dall’attributo type. Può trattarsi di qualsiasi tipo MIME compreso dal programma utente, come una pagina HTML incorporata, un file che deve essere gestito da un plug-in come Flash, un’applet Java, un file audio, ecc.

<param />
Originariamente introdotto con <applet>, questo elemento è ora utilizzato con <object> e dovrebbe verificarsi solo come figlio di <object>. Utilizza gli attributi HTML per impostare un parametro per l’oggetto, ad es. larghezza, altezza, carattere, colore di sfondo, ecc., a seconda del tipo di oggetto. Un oggetto può avere più elementi <param />.

<source>…</source>
Specifica diverse origini per audio o video. Utilizza l’attributo src in modo simile agli elementi <video> e <audio>.

<track>…</track>

Fornisce tracce di testo, come sottotitoli e didascalie, per audio e video.

<video>…</video>
Aggiunge un video HTML5 riproducibile alla pagina. L’URL del video viene determinato utilizzando l’attributo src. I formati video supportati variano da browser a browser.

Moduli

Questi elementi possono essere combinati in un modulo o in alcuni casi utilizzati separatamente come controlli dell’interfaccia utente; nel documento possono essere semplici HTML o utilizzati insieme agli script. Il markup HTML specifica gli elementi che compongono un modulo e il metodo con cui verrà inviato. Tuttavia, è necessario utilizzare una qualche forma di script (lato server, lato client o entrambi) per elaborare l’input dell’utente una volta inviato.

(Questi elementi sono elementi a blocchi o in linea, ma vengono raccolti qui poiché il loro utilizzo è più limitato rispetto ad altri elementi in linea o a blocchi.)

<form action=”url”>…</form>

Crea un modulo. L’elemento <form> specifica e gestisce l’azione complessiva di un’area del modulo, utilizzando l’attributo action richiesto.

<button>…</button>

Un pulsante di modulo generico che può contenere una serie di altri elementi per creare pulsanti complessi.

<datalist>…</datalist>

Un elenco di opzioni da utilizzare negli elementi del modulo.

<fieldset>…</fieldset>

Un contenitore per aggiungere struttura ai moduli. Ad esempio, una serie di controlli correlati possono essere raggruppati all’interno di un <fieldset>, a cui può poi essere aggiunta una <legend> per identificarne la funzione.

<input />
Gli elementi <input> consentono di implementare una varietà di controlli del modulo standard.

Tabelle

Il formato delle tabelle HTML è stato proposto nelle bozze HTML 3.0 e nelle successive tabelle HTML RFC 1942. Sono stati ispirati dal modello da tavolo CALS. Alcuni elementi di queste proposte furono inclusi nell’HTML 3.2; la forma attuale delle tabelle HTML è stata standardizzata in HTML 4. (Molti degli elementi utilizzati nelle tabelle non sono né blocchi né elementi in linea.)

<table>…</table>

Identifica una tabella. Diversi attributi HTML sono possibili in HTML Transitional, ma la maggior parte di questi non sono validi in HTML Strict e possono essere sostituiti con fogli di stile. L’attributo summary è richiesto in modo informale per scopi di accessibilità, sebbene il suo utilizzo non sia semplice.

<tr>…</tr>

Contiene una riga di celle in una <tabella>.

<th>…</th>

Una cella di intestazione <tabella>; i contenuti sono convenzionalmente visualizzati in grassetto e centrati. Un agente utente acustico può utilizzare una voce più forte per questi elementi.

<td>…</td>

Una cella di dati <tabella>.

<colgroup>…</colgroup>
Specifica un gruppo di colonne in una <tabella>.

<col>…</col>
Specifica una colonna in una <tabella>.

<caption>…</caption>

Specifica una didascalia per una <tabella>

<thead>…</thead>

Specifica la parte dell’intestazione di una <tabella>. Questa sezione può essere ripetuta dal programma utente se la tabella è divisa su più pagine (nella stampa o in altri supporti paginati).

<tbody>…</tbody>

Specifica un corpo di dati per una <tabella>.

<tfoot>…</tfoot>

Specifica la parte del piè di pagina di una <tabella>. Come <thead>, questa sezione può essere ripetuta dal programma utente se la tabella è divisa su più pagine (nella stampa o in altri supporti paginati).

Frame

I frame consentono di dividere una finestra del browser HTML visuale in segmenti, ognuno dei quali può mostrare un documento diverso. Ciò può ridurre l’utilizzo della larghezza di banda, poiché parti ripetute di un layout possono essere utilizzate in un fotogramma, mentre il contenuto variabile viene visualizzato in un altro. Ciò può comportare un certo costo in termini di usabilità, specialmente negli user agent non visivi, a causa di documenti (o siti Web) separati e indipendenti visualizzati adiacenti l’uno all’altro e autorizzati a interagire con la stessa finestra principale. A causa di questo costo, i frame (escluso l’elemento <iframe>) sono consentiti solo nel set di frame HTML 4.01. Gli iframe possono anche contenere documenti su server diversi. In questo caso l’interazione tra le finestre viene bloccata dal browser. Siti come Facebook e Twitter utilizzano iframe per visualizzare contenuti (plugin) su siti Web di terzi. Google AdSense utilizza iframe per visualizzare banner su siti Web di terzi.