Elementi HTML

In informatica, un "elemento HTML" indica una struttura in un documento HTML e un metodo per ordinare gerarchicamente i contenuti. Più specificatamente, è un elemento SGML che soddisfa i requisiti di uno o più DTD HTML. Gli elementi HTML consistono generalmente di quattro parti: un "tag di apertura" che definisce l'inizio di un elemento, i suoi attributi e i relativi valori, dei contenuti e un "tag di chiusura". Il tag di chiusura è opzionale per molti elementi; in pochissimi casi un "elemento vuoto" non ha contenuti o tag di chiusura.

Gli elementi XHTML vanno sempre chiusi. Gli elementi vuoti si chiudono aggiungendo una "/", come nei tag di chiusura (per questioni di retrocompatibilità è meglio mettere uno spazio prima della barra ^[1]).

Gli elementi possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, oggetti multimediali incorporati e diverse altre strutture.

Ci sono alcuni elementi che non sono parte di nessun DTD ufficiale, ma sono supportati da alcuni browser e utilizzati da alcune pagine web. Tali elementi possono essere ignorati o visualizzati impropriamente da browser che non li supportano.

Informalmente, gli elementi HTML sono qualche volta chiamati "tag" (un esempio di sineddoche), pensando che molti preferiscano il termine 'tag' in riferimento alle strutture semantiche che delimitano l'inizio e la fine di un elemento.

XHTML è il successore dell'HTML; XHTML 1.0 è compatibile all'indietro con HTML, mentre XHTML 2.0 no.

Nidificare gli elementi[modifica | modifica sorgente]

Molti elementi HTML possono essere "nidificati". La nidificazione è più facilmente comprensibile attraverso esempi:

<p>You <em>rock</em></p>

ha un elemento <em>dentro un elemento <p>. La situazione può complicarsi, per esempio

<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>

Si possono nidificare gli elementi fin quando si vuole ma i tag devono essere chiusi nell'ordine inverso nel quale sono stati aperti.

Sbagliato: <p>Lucy kissed <em>Jimmy</p></em>
Corretto: <p>Lucy kissed <em>Jimmy</em></p>

La possibilità di nidificare è regolamentata da alcune regole che definiscono se un elemento è un block-level o un inline. Un elemento block-level inizia di solito su una nuova riga mentre un elemento inline di solito no. Un elemento block-level può contenere altri elementi dello stesso tipo o di tipo inline mentre un elemento inline può contenere solo altri elementi dello stesso tipo. Esempi di elementi block-level sono paragrafi, elenchi, tabelle, intestazioni e il contenitore generale <div>.

Elementi d'intestazione in HTML 4.01[modifica | modifica sorgente]

<html>...</html>: Delimita un documento HTML (invece di un documento XML o altro). I tag sono opzionali in HTML ma alcuni browser e altre utility possono non riconoscere il documento senza di essi.

<head>...</head>: Delimita la sezione header (d'intestazione) del documento che contiene informazioni sulla pagina. I tag sono opzionali in HTML; se omessi l'esistenza dell'header può essere dedotto in altri modi.

<body>...</body>: Delimita il corpo del documento che contiene i contenuti visualizzati nella pagina. Come <html> e <head> i tag non sono necessari se il documento è in HTML.

<title>...</title>: Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti user agent e Sistema operativo visualizzano il titolo in maniera differente. I browser web di solito lo visualizzano nella barra del titolo quando la finestra è aperta e nella barra applicazioni quando è minimizzato. Può essere il nome predefinito quando si salva la pagina o altro. Al contrario degli altri tag, l'elemento title non permette di contenere altri tag. I browser visualizzeranno i tag inclusi come sono. Per esempio <title>My <b>first</b> webpage</title> verrebbe visualizzato come "My <b>first</b> webpage", not the intended "My first webpage".

<meta>...</meta>: Delimita i metadata e può essere utilizzato per specificare la descrizione della pagina, parole chiave e una forma particolare <meta http-equiv="foo"> è utilizzata per specificare comandi che devono essere spediti come header HTTP.

<link>

Specifica qualsiasi tipo di link per un documento come collegamenti precedenti e successivi o versioni alternative. È uso più comune collegare un Foglio di stile esterno alla pagina, nel modo seguente:

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

<base>

<base/> (in XHTML)

Specifica i valori base per i collegamenti, come la destinazione o il target.

<script>...</script>

Utilizzato per includere JavaScript o altri script nel documento.

<style>...</style>

Specifica un foglio di stile per il documento, solitamente:

<style type="text/css">...</style>

con dati sullo stile o riferimenti come

/*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/

Elementi body definiti in HTML 4.01[modifica | modifica sorgente]

Tutti i tag body sono elementi block-level e non possono essere contenuti all'interno di un elemento inline.

Intestazioni[modifica | modifica sorgente]

da <h1></h1> a <h6></h6>: Intestazioni a diversi livelli. Si utilizza <h1> per il livello massimo di intestazione (la sezione principale), <h2> per il successivo livello sottostante (sottosezione), <h3> per un livello al di sotto del precedente e così via. Il livello più basso d'intestazione è <h6>.

La maggior parte dei browser web mostreranno <h1> come un testo grande con un font differente e <h6> come testo piccolo in grassetto ma questo comportamento può essere modificato con i fogli di stile CSS. Gli elementi d'intestazione non sono utilizzabili solamente per creare testo grande o in grassetto: descrivono anche la struttura del documento e l'organizzazione. Alcuni programmi li utilizzano per generare indici e outline.

Testo strutturato[modifica | modifica sorgente]

Molti elementi HTML sono realizzati per cambiare la struttura o il significato del testo. Alcuni sono block-level ma la maggior parte sono inline e possono essere inclusi nel normale flusso del testo.

Block-level[modifica | modifica sorgente]

<p>...</p>: Crea un paragrafo. In HTML il tag di chiusura è opzionale.
<blockquote>...</blockquote>: Crea una citazione, convenzionalmente visualizzata indentata ma non realizzata per indentare il testo. Può automaticamente aggiungere delle virgolette. L'attributo cite può fornire la fonte e deve essere una URL completa.
<pre>...</pre>: Crea testo pre.formattato. Il testo è visualizzato con un font non proporzionato esattamente come è stato scritto nel file (vedi ASCII art). Con CSS: {white-space: pre}
<address>...</address>: Usato per delimitare informazioni sull'indirizzo.

Inline[modifica | modifica sorgente]

<em>...</em>
<strong>...</strong>: Enfasi (convenzionalmente visualizzato in corsivo) e enfasi forte (convenzionalmente visualizzato in grassetto).
<q>...</q>: Una breve quotazione. Può essere visualizzata con virgolette. Le citazioni possono essere nidificate. L'attributo cite Può fornire la fonte deve essere una URL completa.
<code>...</code>: Un pezzo di codice. Convenzionalmente visualizzato con un font monospazio Esempio di codice.
<del>...</del>: Testo cancellato. Visualiazzato barrato: ~~Deleted text.~~
<ins>...</ins>: Testo inserito. Spesso utilizzato per indentificare il testo che sostituisce il testo <del>. Visualizzato sottolineato: Testo inserito.
<dfn>...</dfn>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>: Definizione, testo d'esempio, input da tastiera, variabile. Sono simili a <code>, ma possono avere un significato più specifico.
<sub>...</sub>
<sup>...</sup>: Crea un testo _Pedice o un ^Apice. Equivalente CSS: {vertical-align: sub} or {vertical-align: super}

Elenchi[modifica | modifica sorgente]

<dl>...</dl>

Crea un elenco di definizioni (formato da termini con la rispettiva definizione).

<dt>...</dt>: Crea un termine di definizione.
<dd>...</dd>: Crea una definizione.

<ol>...</ol>

<ul>...</ul>

Crea un elenco ordinato (numerato) o non ordinato (puntato). Con ol, l'attributo type può essere specificato il tipo di ordinamento, ma CSS dà più controllo: {list-style-type: foo}. La numerazione predefinita è quella araba. Per ul, CSS può essere utilizzato per definire il marcatore dell'elenco: {list-style-type: foo}. Il marcatore predefinito è un punto annerito

<li>...</li>: Crea un oggetto dell'elenco in liste ordinate o meno

<dir>...</dir> (deprecato): Delimita l'elenco di una cartella. In disuso in favore di <ul>.
<menu>...</menu> (deprecato): Crea un elenco di menu. Dovrebbe essere più sintetico di un elenco <ul>, ma non è ben supportato. In disuso in favore di <ul>.

Tabelle[modifica | modifica sorgente]

<table>...</table>

Crea una tabella

<tr>...</tr>

Crea una riga in una tabella

<th>...</th>: Crea una cella d'intestazione all'interno di una riga; il contenuto è visualizzato di solito in grassetto e centrato
<td>...</td>: Crea una cella dati all'interno di una tabella.

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

<col> (<col /> in XHTML) Specifica gli attributi per una colonna.

<caption>...</caption>: Specifica un titolo per l'intera tabella.
<thead>...</thead>: Specifica l'intestazione della tabella. Questa sezione può essere ripetuta se la tabella è divisa in più pagine (nella stampa o in altre possibili tipi di stampa).
<tbody>...</tbody>: Specifica la parte principale della tabella.
<tfoot>...</tfoot>: Specifica la parte bassa della tabella. Come <thead>, Questa sezione può essere ripetuta se la tabella è divisa in più pagine (nella stampa o in altre possibili tipi di stampa).

Moduli[modifica | modifica sorgente]

L'HTML può solo definire il formato del modulo, gli input degli utenti vengono processati da un linguaggio di scripting server-side.

<form>...</form>

Crea un modulo.

<select name="foo">...</select>

Crea un menu ad elenco dal quale l'utente può scegliere una sola voce. Può essere visualizzato come un menu a cascata.

<option>...</option>: Crea una voce nel menu.

<input type="checkbox">: Crea una casella di spunta (checkbox).
<input type="radio">: Crea un pulsante radio; se più pulsanti radio hanno lo stesso nome, l'utente potrà selezionarne solo uno.
<input type="submit" value="NAME">: Crea un pulsante d'invio.
<input type="image" border=0 name="NAME" src="name.gif">: Create un pulsante d'invio utilizzando un'immagine.
<input type="reset">: Crea un pulsante di reset che ripristina i valori del modulo a quelli iniziali.
<input type="text">: Crea una casella di testo a linea singola. Size imposta la lunghezza della casella. Maxlength imposta il numero massimo di caratteri inseribili (può essere più grande di Size).
<textarea>...</textarea>: Crea un'area di testo multilinea impostasta dagli attributi cols (colonne) erows (righe). Il testo tra i tag apparirà nell'area di testo al caricamento della pagina.

Altri elementi[modifica | modifica sorgente]

<span>...</span>: Crea una divisione logica sulla riga. Permette di assegnare a porzioni di testo un id o una classe, utilizzabili con i CSS.
<div>...</div>: Crea un livello logico block-level. Soprattutto per l'uso dei CSS.
<center>...</center> (deprecato): Crea un blocco centrato anche di testo. In disuso a favore di <div> con l'allineamento centrato definito nei CSS.
<hr>
<hr /> (in XHTML): Inserisce una linea orizzontale.
<object>...</object>: Include un oggetto nella pagina del tipo specificato dall'attributotype. Può essere qualsiasi oggetto MIME che il browser riconosce, come una pagina incorporata (vedi <iframe>), un plug-in come Flash, o un file audio.
<param>...<param/> (in XHTML): Questo tag appare solamente all'interno dell'elemento object e imposta i parametri per l'oggetto per esempio larghezza, altezza o URL del contenuto.
<embed>...</embed> (non ufficiale): Richiama un gestore di plug-in per il tipo specificato dall'attributo type. Utilizzato per includere file flash, file audio. non ufficiale, è preferibile <object>.
<noembed>...</noembed> (non ufficiale): Specifica un'alternativa se l'oggetto incluso non può essere visualizzato.
<applet>...</applet> (non ufficiale): Include un'applet Java nella pagina. Non ufficiale, è preferibile <object>.

Formattazione[modifica | modifica sorgente]

<b>...</b>: Utilizza il grassetto. CSS equivalente: {font-weight: bold}
<i>...</i>: Usa il corsivo. CSS equivalente: {font-style: italic}
<big>...</big>: Crea testo più grande. CSS equivalente: {font-size: larger}.
<small>...</small>: Crea testo più piccolo.CSS equivalente: {font-size: smaller}
<s>...</s> e <strike>...</strike> (deprecati): Cancella il testo: ~~Cancellato~~.CSS equivalente: {text-decoration: line-through}
<tt>...</tt>: Usa un carattere simile a quelli da macchina da scrivere (caratteri non proporzionali a dimensione fissa). CSS equivalente: {font-family: monospace}
<u>...</u> (deprecato): Usa un carattere sottolineato.CSS equivalente: {text-decoration: underline}
<font [color=color,] [size=size,] [face=face]>...</font> (deprecato): Può specificare il colore del testo tramite l'attributo color , il tipo con face e la grandezza assoluta o relativa con size

Esempi:

<font color="green">text</font> crea testo verde.
<font color="#1f4099">text</font> crea testo di colore esadecimale #1f4099.
<font size="4">text</font> crea testo di grandezza 4. La grandezza va da 1 a 7. La grandezza standard è 3, a meno che non sia specificata in <<body> o in altri tag.
<font size="+1">text</font> creat testo con grandezza aumentata di 1 rispetto a quella standard.. <font size="-1">text</font> è l'opposto.
<face="Courier">text</font>visualizza il testo con il carattere Courier.

Css equivalenti per gli attributi del testo:

<font size="N"> corrisponde a {font-size: Ypx} (le specifiche HTML non definisco la relazione tra grandezza "N" e grandezza pixel "Y").
<font color="red"> corrisponde a {color: red}
<font face="Courier"> corrisponde a {font-family: Courier}

Collegamenti e ancore[modifica | modifica sorgente]

<a>...</a>: Crea un elemento che diventa un collegamento ipertestuale con l'attributo href impostato su una URL; inoltre l'attributo title può essere impostato per avere un box d'informazione sul collegamento:
<a href="URL" title="testo in aiuto">Etichetta collegamento</a>: Quando il puntatore è sul collegamento, di solito si trasforma in una mano con il dito indice disteso, e il testo in aiuto appare in un box speciale che sparisce quando il cursore si sposta.

Alcuni browser visualizzato il testo alternativo nello stesso modo ma è tecnicamente sbagliato.

Alternativamente, l'elemento diventa un'ancora con l'attributo name, che preceduto dal simbolo '#' nell'URL si comporta come un segnalibro, scorrendo la pagina fino a quel punto. Ogni elemento può essere trasformato in un ancora attraverso l'attributo id così usare <a name="foo"> non è necessario.

Immagini[modifica | modifica sorgente]

<img...>
<img... /> (in XHTML): Include un'immagine con l'attributo src, alt fornisce testo alternativo nel caso l'immagine non può essere visualizzata. Alt è inteso come testo alternativo, sebbene alcuni browser lo visualizzano come un suggerimento; l'attributo title è il suggerimento.

Vari[modifica | modifica sorgente]

<br>

<br/> (in XHTML)

Specifca un'interruzione di linea. Può essere fatto anche con i CSS: {break: left|right|all}

<map>...</map>

Specifica una mappa lato client.

<area>
<area/> (in XHTML): Specifica un'area in una mappa.

<blink>...</blink> (unofficial): Testo lampeggiante. Uno dei tag HTML più odiati. Può essere fatto con i CSS: {text-decoration: blink}
<marquee>...</marquee> (unofficial): Crea testo scorrevole. L'altro odiato tag HTML. Nessun equivalente CSS; bisogna usare degli script.
: Racchude un commento. Questo è un tag SGML e non limitato a HTML, quindi può apparire dovunque nel documento, anche prima del DTD o dopo </html>. Un browser non visualizzerà nessun commento. La chiusura ">" è necessaria. Per compatibilità con browser rilasciati prima del 1995, i commenti SGML sono utilizzati solitamente all'interno dei tag <style> e <script>, ma non è necessario e può causare effetti indesiderati.

Frame[modifica | modifica sorgente]

Un documento HTML può contenere un intestazione o un corpo o un'intestazione e un frameset, ma non entrambi. Per i frame bisogna seguire il frames DTD.

<frameset>...</frameset>

Delimita il frameset. La disposizione dei frame è data da un elenco separato da virgola negli attributi rows e cols.

<frame>...</frame>: Racchiude un singolo frame, o regione, all'interno del frameset. Un documento different collegato attraverso l'attributo src appare all'interno.

<noframes>...</noframes>: Contiene un normale elemento <body> con i figli che appariranno nel browser web che non supporta i frame
<iframe>...</iframe>: Un frame all'interno di un normale <body> HTML, che ha molti attributi dell'elemento img, ma incorpora un altro documento HTML invece di un'immagine.

Note[modifica | modifica sorgente]

↑ Come consigliato dal W3C

Collegamenti esterni[modifica | modifica sorgente]

Lista completa degli elementi per HTML 4.01: elementi e attributi

[1] Come consigliato dal W3C

[1]