Un elemento HTML, in informatica, spesso chiamato anche tag HTML, indica una struttura in un documento HTML e un metodo per ordinare gerarchicamente i contenuti. Più specificamente è un elemento SGML che soddisfa i requisiti di uno o più DTD HTML.
Descrizione Gli elementi possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, form, oggetti multimediali incorporati e diverse altre strutture.
Gli elementi vuoti vengono chiusi aggiungendo una "/", come nei tag di chiusura. Per questioni di retrocompatibilità è consigliato mettere uno spazio prima della barra.Come consigliato dal W3C Appendix C. Linee guida per la compatibilità con HTML
Alcuni elementi, sebbene non siano contenuti in nessun DTD ufficiale, sono supportati da alcuni web browser e utilizzati da pagine web. Tali elementi possono essere ignorati o visualizzati impropriamente da browser che non li supportano.
Tipologie Gli elementi HTML consistono generalmente di quattro parti:
un tag di apertura che definisce l'inizio di un elemento; uno o più attributi di tale elemento con i loro rispettivi valori; il contenuto informativo da visualizzare; un 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.
Annidamento 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 inline.
Elementi della struttura del documento <html>...</html> Delimita un documento HTML (invece di un documento XML o altro). Questi 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. Questi 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.
Elementi block-level ed elementi 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 sia di tipo block-level sia di tipo inline mentre un elemento inline può contenere solo altri elementi di tipo inline. Esempi di elementi block-level sono paragrafi, elenchi, tabelle, intestazioni e il contenitore generale <div>. Gli elementi di blocco sono elementi con un contenitore rettangolare composto del contenuto, padding, border e padding esterno (margin). Si possono specificare le sue dimensioni con i CSS. Gli elementi in linea (ad esempio STRONG, ITALIC e UNDERLINE) non creano blocchi, vengono visualizzati sulla stessa linea con i contenuti del tag adiacenti. La larghezza e l'altezza dell'elemento "in linea" dipende solo dal suo contenuto, non si possono specificare le sue dimensioni con i CSS.
Elementi d'intestazione in HTML 4.01
<title>...</title> Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti user agent e sistemi operativi visualizzano il titolo in maniera differente. I browser web di solito lo visualizzano nella barra del titolo quando la finestra è aperta e nella barra delle 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", e non come "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> <link /> (in XTML) 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 XTML) 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: ... con dati sullo stile o riferimenti come /*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/
Elementi body definiti in HTML Tutti i tag body non sono elementi block-level e non possono essere contenuti all'interno di un elemento inline.
Intestazioni da <h1></h1> a <h6></h6> Intestazioni (o Titoli) 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 mostrerà <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 Molti elementi HTML sono realizzati per cambiare la struttura o il significato del testo. Alcuni sono block-level ma la maggior parte è inline e può essere inclusa nel normale flusso del testo.
Block-level <p>...</p> Crea un paragrafo. In HTML il tag di chiusura non è 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 <em>...</em> <strong>...</strong> Enfasi (convenzionalmente visualizzato in corsivo) e enfasi forte (convenzionalmente visualizzato in grassetto). <q>...</q> Una breve citazione. 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. Visualizzato barrato: Deleted text. <ins>...</ins> Testo inserito. Spesso utilizzato per identificare il testo che sostituisce il testo <del>. Visualizzato sottolineato: Testo inserito.
<cite>...</cite> Citazione. Riferimento ad una citazione di una fonte od elemento all'interno del testo. CITE è stato accettato all'interno dellHTML 2.0. <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 <dl>...</dl> Crea un elenco di descrizioni, formate da coppie di termini (o nomi) e rispettiva descrizione (o valore). <dt>...</dt> Crea un termine dell'elenco di descrizioni. <dd>...</dd> Crea una descrizione dell'elenco di descrizioni. <ol>...</ol> <ul>...</ul> Creano rispettivamente un elenco ordinato (numerato) o non ordinato (puntato). Per ul, l'attributo type può essere utilizzato per specificare il tipo di numerazione , che di default è quello arabo. 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>.
Esempi di elenchi Elenchi ordinati Per creare un elenco ordinato in HTML si usa un elemento ol contenente un elemento li, per ognuna delle voci dell'elenco stesso. Ad esempio: Codice HTML<ol> <li>Giovanni</li> <li>Luca</li> <li>Marco</li> <li>Giacomo</li> </ol> Giovanni Luca Marco Giacomo La numerazione predefinita utilizza il sistema arabo, ma è possibile scegliere anche le lettere dell'alfabeto latino moderno o la numerazione romana, sia maiuscoli che minuscoli. Per impostare il tipo di numerazione, è sufficiente assegnare all'attributo type di ol il primo termine della numerazione. Ad esempio: Codice con type predefinito (1)Lettere minuscole (a)Lettere maiuscole (A)Numeri romani minuscoli (i)Numeri romani maiuscoli (I)<ol type="1"> <li>Luca</li> <li>Marco</li> <li>Carlo</li> </ol> Luca Marco Carlo Luca Marco Carlo Luca Marco Carlo Luca Marco Carlo L'attributo start, invece, permette di specificare il punto di inizio della numerazione, utile, per esempio quando si desidera temporaneamente interrompere l'elenco. Infatti: Codice HTML, con start predefinito (1)Inizio a 8Inizio a 26<ol type="a" start="1"> <li>Luca</li> <li>Marco</li> <li>Carlo</li> </ol> Luca Marco Carlo Luca Marco Carlo Elenchi non ordinati Gli elenchi non ordinati (definiti anche puntati) vanno creati con un elemento ul che conterrà, come per gli elenchi ordinati, un elemento li. L'elenco non ordinato definisce di default lo stile di un elenco puntato con cerchi pieni. Ad esempio: Codice HTML<ul> <li>Giovanni</li> <li>Luca</li> <li>Marco</li> <li>Giacomo</li> </ul> Giovanni Luca Marco Giacomo L'attributo type di ul può far assumere tre stili diversi ai puntatori dei singoli elementi: con il valore disc verrà creata una lista puntata con cerchi pieni come quella predefinita, col valore circle i cerchi saranno di stessa dimensione ma vuoti, e infine con square verrà creato un elenco puntato a piccoli quadrati pieni. Non avendo nessun tipo di ordine di interpretazione, non è previsto l'attributo start. Codice con type predefinito (disc)<ul type="disc"> <li>Luca</li> <li>Marco</li> <li>Carlo</li> </ul> Luca Marco Carlo
Tabelle
<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>