I metadati contengono informazioni sulla pagina. Ciò include informazioni su stili, script e dati per aiutare il software ( motori di ricerca, browser, ecc.) A utilizzare e renderizzare la pagina. I metadati per stili e script possono essere definiti nella pagina o collegati a un altro file che contiene le informazioni.
| Elemento | Descrizione |
|---|---|
<link> |
specifica le relazioni tra il documento corrente e una risorsa esterna. Possibili usi per questo elemento includono la definizione di un framework relazionale per la navigazione. Questo elemento è più utilizzato per collegare ai fogli di stile. |
<meta> |
rappresenta i metadati che possono essere rappresentati da altri elementi meta-correlati, come <base><<script><style> o <title>. |
<style> |
contiene informazioni di stile per un documento o parte di un documento. Per impostazione predefinita, le istruzioni di stile scritte all'interno di quell'elemento dovrebbero essere CSS. |
| Elemento | Descrizione |
|---|---|
<body> |
rappresenta il contenuto di un documento HtmL. Ci può essere solo un <body>elemento in un documento. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Titolo-Pagina</title>
<meta name="description" content="desrizione,contenuto">
<meta name="keywords" content="elenco,contenuti">
<meta name="author" content="Mario Rossi">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<!--indirizzo-fissato-->">
<script type="text/javascript" src="script.js"></script>
<noscript>Il suo browser non sostiene a JavaScript!</noscript>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<!-- Quì va inserito il contenuto che sarà visualizzato -->
</body>
</html
Gli elementi di sezione del contenuto consentono di organizzare il contenuto del documento in parti logiche. Utilizzare gli elementi di sezione per creare una struttura generale per il contenuto della pagina, inclusa la navigazione dell'intestazione e del piè di pagina e gli elementi di direzione per identificare sezioni di contenuto.
| Elemento | Descrizione |
|---|---|
<address> |
fornisce informazioni di contatto per il più vicino <article>o <body>antenato; in quest'ultimo caso, si applica all'intero documento. |
<article> |
rappresenta una composizione autonoma in un documento, una pagina, un'applicazione o un sito, che è destinato a essere distribuibile o riutilizzabile in modo indipendente (ad esempio, in syndication). Gli esempi includono: un post sul forum, una rivista o un articolo di giornale o un post di blog. |
<aside> |
rappresenta una sezione di un documento con contenuto collegato tangenzialmente al contenuto principale del documento (spesso presentato come barra laterale). |
<footer> |
rappresenta un piè di pagina per il contenuto di sezione più prossimo o per l' elemento radice di sezionamento. In genere un footer contiene informazioni sull'autore della sezione, sui dati di copyright o sui link ai documenti correlati. |
<h1–h6> |
Rappresentano i titoli per le pagine e ogni altro tipo di contenuto |
<header> |
rappresenta il contenuto introduttivo, in genere un gruppo di aiuti introduttivi o di navigazione. Può contenere alcuni elementi di intestazione ma anche altri elementi come un logo, un modulo di ricerca, un nome di autore e così via. |
<hgroup> |
rappresenta un'intestazione multilivello per una sezione di un documento. Raggruppa un insieme di <h1>–<h6>elementi. |
<nav> |
rappresenta una sezione di una pagina il cui scopo è fornire collegamenti di navigazione, all'interno del documento corrente o ad altri documenti. Esempi comuni di sezioni di navigazione sono menu, sommari e indici. |
<section> |
rappresenta una sezione autonoma di funzionalità contenuta in un documento HtmL, in genere con un'intestazione, che non ha un elemento semantico più specifico per rappresentarlo. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Titolo pagina</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<header>
<hgroup>
<h1>Intestazione</h1>
h1...h6
<h6></h6>
</hgroup>
</header>
<nav> ... Collegamenti di navigazione ... </nav>
<section>...Intestazioni e ...Contenuti</section>
<article>...Intestazioni e ...Contenuti</article>
<aside>Contenuti-laterali</aside>
<address>scrivere a <a href="mailto:webmaster@esempio.com">mario Rossi</a></address>
<footer>
<p>pieDiPagina: © info <a href="mailto:nicknome@example.com">nicknome@example.com</a> altro...</p>
</footer>
</body>
</html
Utilizza gli elementi di contenuto di testo HtmL per organizzare blocchi o sezioni di contenuti posizionati tra i tag di apertura <body>e di chiusura </body>. Importante per l' accessibilità "SEO", questi elementi identificano lo scopo o la struttura di quel contenuto.
| Elemento | Descrizione |
|---|---|
<blockquote> |
Indica che il testo incluso è un preventivo esteso. Di solito, questo viene reso visivamente con un rientro. Mentre una rappresentazione testuale della fonte può essere fornita usando l'elemento <cite>. |
<dd> |
Indica la descrizione di un termine in una lista di descrizione <dl>. |
<div> |
è il contenitore generico per il contenuto del flusso e non rappresenta intrinsecamente nulla. Usalo per raggruppare gli elementi per scopi come lo stile (usando gli attributi classo id), contrassegnando una sezione di un documento in una lingua diversa (usando l' langattributo), e così via. |
<dl> |
Rappresenta un elenco di descrizioni. L'elemento racchiude un elenco di gruppi di termini e descrizioni. Gli usi comuni di questo elemento sono l'implementazione di un glossario o la visualizzazione di metadati (un elenco di coppie chiave-valore). |
<dt> |
identifica un termine in un elenco di descrizioni. Questo elemento può verificarsi solo come elemento figlio di a <dl>. Di solito è seguito da un <dd>elemento; tuttavia, più <dt>elementi in una riga indicano diversi termini che sono tutti definiti <dd>dall'elemento immediatamente successivo . |
<figcaption> |
rappresenta una didascalia o una legenda associata a una figura o un'illustrazione descritta dal resto dei dati <figure>dell'elemento che ne è l'antenato immediato. |
<figure> |
rappresenta contenuto autonomo, frequentemente con una didascalia ( <figcaption>), ed è tipicamente referenziato come una singola unità. |
<hr> |
rappresenta un'interruzione tematica tra elementi a livello di paragrafo (ad esempio, un cambio di scena in una storia o uno spostamento di argomento con una sezione). Nelle precedenti versioni di HtmL, rappresentava una regola orizzontale. Può ancora essere visualizzato come una regola orizzontale nei browser visivi, ma ora è definito in termini semantici piuttosto che in termini di presentazione. |
<li> |
viene utilizzato per rappresentare un elemento in un elenco. Deve essere contenuto in un elemento genitore: un elenco ordinato ( <ol>), un elenco non ordinato ( <ul>) o un menu ( <menu>). Nei menu e negli elenchi non ordinati, gli elementi dell'elenco vengono solitamente visualizzati utilizzando i punti elenco. Negli elenchi ordinati, di solito vengono visualizzati con un contatore crescente a sinistra, ad esempio un numero o una lettera. |
<main> |
rappresenta il contenuto principale <body>di un documento, parte di un documento o applicazione. L'area del contenuto principale è costituita da contenuto direttamente correlato o che espande l'argomento centrale di un documento o la funzionalità centrale di un'applicazione. |
<ol> |
rappresenta un elenco ordinato di elementi, in genere visualizzato come elenco numerato. |
<p> |
Rappresenta un paragrafo di testo. |
<pre> |
rappresenta il testo preformattato. Il testo all'interno di questo elemento viene in genere visualizzato in un carattere non proporzionale (" monospazio ") esattamente come è disposto nel file. Gli spazi bianchi all'interno di questo elemento vengono visualizzati come digitati. |
<ul> |
rappresenta un elenco non ordinato di elementi, in genere visualizzato come elenco puntato. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<main>
rappresenta il contenuto principale del body del documento e ne può essere presente uno solo in una pagina-documento.
Inoltre non può essere figlio di un elemento article, aside, footer, header o nav.
</main>
<blockquote cite="http://www.pagina.citata.php">blockquote specifica una sezione 'INDENTATA' che viene citata da un'altra fonte.</blockquote>
<div>Questo è un contenuto 'div' che opera una delimitazione di contenuto</div>
<dl>
<dt>Il 'tag dl' definisce un'elenco di</dt>
<dd>descrizione</dd>
<dt>Il 'tag dt' definisce termini/nomi</dt>
<dd>Il 'tag dd' descrive ogni termine/nome</dd>
</dl>
<figure>Il 'tag figure' specifica contenuti autonomi, come illustrazioni, diagrammi, foto ecc..<br>
<img src="homex32.png" alt="nome-img"><br>
<figcaption>Fig1.-Il 'tag figcaption' definisce una didascalia per 'figure'.</figcaption>
</figure>
<hr>'hr': produce una riga
<p>questo è un contenuto di paragrafo</p>
<pre>
Il 'tag pre' definisce il testo preformattato
perchè conserva sia spazi che interruzioni
di riga.
</pre>
<ul>
<li>Il 'tag ul' insieme al 'tag li'</li>
<li>definisce elenchi</li>
<li>puntati e non ordinati.</li>
</ul>
<ol>
<li>Il 'tag ol' insieme al 'tag li'</li>
<li>definisce elenchi</li>
<li>numerici o alfabetici.</li>
</ol>
</body>
</html>
Usa la semantica del testo inline HtmL per definire il significato, la struttura o lo stile di una parola, una linea o qualsiasi parte di testo arbitrario.
| Elemento | Descrizione |
|---|---|
<a> |
(Elemento di ancoraggio ) crea un collegamento ipertestuale ad altre pagine Web, file, posizioni all'interno della stessa pagina, indirizzi di posta elettronica o qualsiasi altro URL. |
<abbr> |
rappresenta un'abbreviazione e facoltativamente fornisce una descrizione completa per esso. Se presente, l' titleattributo deve contenere questa descrizione completa e nient'altro. |
<b> |
Rappresenta un'estensione di testo stilisticamente diversa dal testo normale, senza trasmettere alcuna importanza o pertinenza speciale e in genere viene visualizzata in grassetto. |
<bdi> |
( isolamento bidirezionale ) isola un intervallo di testo che potrebbe essere formattato in una direzione diversa da un altro testo al di fuori di esso. |
<bdo> |
( override bidirezionale ) viene utilizzato per sovrascrivere la direzionalità corrente del testo. Fa sì che la direzionalità dei personaggi sia ignorata a favore della direzionalità specificata. |
<br> |
produce un'interruzione di riga nel testo (carriage-return). È utile per scrivere una poesia o un indirizzo, in cui la divisione delle linee è significativa. |
<cite> |
Rappresenta un riferimento a un'opera creativa. Deve includere il titolo di un'opera o un riferimento URL, che può essere in forma abbreviata secondo le convenzioni utilizzate per l'aggiunta dei metadati delle citazioni. |
<code> |
rappresenta un frammento di codice del computer. Per impostazione predefinita, viene visualizzato nel font monospace predefinito del browser. |
<data> |
collega un dato contenuto con una traduzione leggibile da una macchina. Se il contenuto è correlato all'ora o alla data, l' <time>elemento deve essere utilizzato. |
<dfn> |
Rappresenta l'istanza di definizione di un termine. |
<em> |
segna il testo con enfasi sullo stress. L' <em>elemento può essere annidato, con ogni livello di nidificazione che indica un maggior grado di enfasi. |
<i> |
Rappresenta un intervallo di testo che viene disattivato dal testo normale per qualche motivo, ad esempio termini tecnici, frasi di lingue straniere o pensieri di personaggi fittizi. In genere è visualizzato in corsivo. |
<kbd> |
rappresenta l'input dell'utente e produce un elemento inline visualizzato nel font monospace predefinito del browser. |
<mark> |
rappresenta il testo evidenziato, ovvero una sequenza di testo contrassegnata a scopo di riferimento, a causa della sua rilevanza in un particolare contesto. |
<q> |
Indica che il testo racchiuso è una breve citazione in linea. Questo elemento è inteso per brevi citazioni che non richiedono interruzioni di paragrafo; per le lunghe citazioni usa l' <blockquote>elemento. |
<rp> |
viene utilizzato per fornire parentesi fall-back per i browser che non supportano la visualizzazione di annotazioni ruby mediante l' <ruby>elemento. |
<rt> |
abbraccia la pronuncia dei caratteri presentati in annotazioni ruby, che sono usati per descrivere la pronuncia dei caratteri dell'Asia orientale. Questo elemento è sempre usato all'interno di un <ruby>elemento. |
<rtc> |
comprende annotazioni semantiche di caratteri presentati in un rubino di <rb>elementi utilizzati all'interno <ruby>dell'elemento. <rb>gli elementi possono avere entrambe le annotazioni di pronuncia ( <rt>) e semantica ( <rtc>. |
<ruby> |
rappresenta un'annotazione rubino. Le annotazioni ruby servono a mostrare la pronuncia dei caratteri dell'Asia orientale. |
<s> |
Esegue il rendering del testo con un barrato o una linea attraverso di esso. Usa l' <s>elemento per rappresentare cose che non sono più rilevanti o non più accurate. Tuttavia, <s>non è appropriato quando si indicano le modifiche del documento; per questo, usa gli elementi <del>e <ins>, come appropriato. |
<samp> |
è un elemento destinato a identificare l'output di esempio da un programma per computer. Viene solitamente visualizzato nel font monotype predefinito del browser (come Lucida Console). |
<small> |
riduce le dimensioni del carattere del testo di una dimensione (ad esempio, da grande a medio, o da piccolo a x-piccolo) fino alla dimensione minima del carattere del browser. In HTML5, questo elemento viene riproposto in modo da rappresentare i commenti secondari e la stampa di piccole dimensioni, inclusi il copyright e il testo legale, indipendentemente dalla presentazione in stile. |
<span> |
è un contenitore in linea generico per il contenuto a frase, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare gli elementi per scopi di stile (utilizzando gli attributi classo id) o perché condividono valori di attributo, come ad esempio lang. |
<strong> |
Offre una forte importanza al testo e viene in genere visualizzato in grassetto.<strong> |
<sub> |
definisce un intervallo di testo che dovrebbe essere visualizzato, per ragioni tipografiche, più basso e spesso più piccolo, rispetto all'intervallo principale di testo. |
<sup> |
definisce un intervallo di testo che dovrebbe essere visualizzato, per ragioni tipografiche, più elevato, e spesso più piccolo, rispetto all'intervallo principale di testo. |
<time> |
rappresenta un orario su un orologio di 24 ore o una data precisa nel calendario gregoriano (con informazioni facoltative su fuso orario e fuso orario). |
<u> |
Rende il testo con una sottolineatura, una linea sotto la linea di base del suo contenuto. In HTML5, questo elemento rappresenta un'estensione di testo con un'annotazione non scritta, anche se resa esplicitamente, non testuale, come etichettare il testo come un nome proprio nel testo cinese (un segno di nome proprio cinese), o etichettare il testo come errata. |
<var> |
rappresenta una variabile in un'espressione matematica o in un contesto di programmazione. |
<wbr> |
rappresenta un'opportunità di interruzione di parole, ovvero una posizione all'interno del testo in cui il browser può opzionalmente interrompere una linea, anche se le sue regole di divisione non creerebbero altrimenti un'interruzione in quella posizione. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<a href="collegamento.php#segnaposto">un collegamento a qualcosa: una pagina, un segnaposto, un indirizzo ecc...</a>
<abbr title="Organizzazione ABC">ABC</abbr> fondata nel 1950.
<b>definisce il testo in grassetto</b>
<bdi>Questo elemento è utile quando incorpora i contenuti generati dall'utente con una direzionalità sconosciuta.</bdi>
<div>TESTO-INVERTITO: <bdo dir="rtl">Il 'tag bdo' viene utilizzato per ignorare la direzione del testo corrente.</bdo></div>
<br>'br': produce un ritorno a capo
<cite>Il 'tag cite' definisce il titolo di un lavoro</cite>
<code>Il 'tag code' definisce un pezzo di codice di programma monospaziato.</code>
<div>Il 'tag data' associa un valore per il processore dati a un valore leggibile dall'utente:
<data value="978-88-481-7844-0">ISBN: 978-88-481-7844-0</data></div>
<dfn>HtmL</dfn>Il 'tag dfn' rappresenta l'istanza di definizione di un termine.
<em>Il 'tag em' evidenzia il testo in corsivo.</em>
<div>Il 'tag i' è utilizzato per indicare un termine specifico es: "Era chiamato <i>Ercole</i>, perché era molto forte".</div>
<kbd>Il 'tag kbd' emula il dattiloscritto, ovvero l'input della tastiera.</kbd>
<mark>contrassegna una evidenziazione.</mark>
<div>Il 'tag q' definisce una <q> citazione corta con le virgolette </q></div>
<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>Il 'tag rp' fornisce parentesi il 'tag rt' fornisce spiegazioni o pronuncia per la tipografia
est asiatica in un'annotazione ruby</ruby>
<div>Il 'tag s' specifica un testo che non è pertinente<s>testo NON pertinente.</s><span>Testo pertinente a correzione.</span></div>
<samp>Il 'tag samp'definisce un esempio esempio codice programmatico</samp>
<small>Il 'tag small' definisce un testo più piccolo: Copyright 2010-2018</small>
<strong>Testo importante: Il 'tag strong' definisce un testo importante</strong>
<div>Il 'tag sub' definisce un testo al di sotto della linea normale con un carattere più piccolo,
utilizzato per formule es: H<sub>2</sub>O</div>
<div>Il 'tag sup' definisce un testo al di sopra della linea normale con un carattere più piccolo,
utilizzato per formule es: 25<sup>2</sup></div>
<div>Il 'tag time' definisce una data/ora leggibile dall'uomo. <time>14-02-2017 ore 20:00</time>
Giorno di festa.</div>
<div>Il 'tag u' rappresenta un testo che dovrebbe essere stilisticamente diverso dal testo
normale, come <u>nomi propri in cinese.</u></div>
<div>Il 'tag var' è un tag che definisce una variabile: <var>Variable</var></div>
<div>Il 'tag wbr' specifica dove in un testo deve andare a capo, quando il browser potrebbe
interrompere la riga nel posto sbagliato, utilizzare l'elemento <wbr> per aggiungere
una opportunità di precisione.</wbr></div>
</body>
</html>
HtmL supporta varie risorse multimediali come immagini, audio e video.
| Elemento | Descrizione |
|---|---|
<area> |
definisce una regione hot-spot su un'immagine e opzionalmente la associa a un collegamento ipertestuale. Questo elemento è usato solo all'interno di un <map>elemento. |
<audio> |
viene utilizzato per incorporare il contenuto audio nei documenti. Può contenere una o più sorgenti audio, rappresentate utilizzando l' srcattributo o l' <source>elemento: il browser sceglierà quello più adatto. Può anche essere la destinazione per i media in streaming, utilizzando a MediaStream. |
<img> |
rappresenta un'immagine nel documento. |
<map> |
viene utilizzato con gli <area>elementi per definire una mappa immagine (un'area di collegamento cliccabile). |
<track> |
è usato come figlio degli elementi multimediali <audio>e <video>. Ti consente di specificare tracce di testo temporizzate (o dati basati sul tempo), ad esempio per gestire automaticamente i sottotitoli. Le tracce sono formattate in formato WebVTT ( .vttfile) - Tracce di testo Web Video. |
<video> |
Utilizzare l'elemento per incorporare il contenuto video in un documento. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<div>Il 'tag map' viene utilizzato per definire una mappa immagine con aree
cliccabili definite dal 'tag area'.<br>
<img src="img.jpg" width="268" height="188" alt="img" usemap="#imgmappa">
<map name="imgmappa">
<area shape="rect" coords="0,0,100,188" href="#" alt="cane"><area shape="circle"
coords="150,94,10" href="#" alt="gatto">
</map>
</div>
<audio controls><source src="audio.mp3" type="audio/mp3"></audio><!-- audio assente -->
<div>Il 'tag track' specifica i sottotitoli,ovvero le tracce di testo per audio e video.<br>
<video width="320" height="240" controls><source src="video.mp4" type="video/mp4"><!-- video assente -->
<track src="sottotitoli_it.vtt" kind="sottotitoli" srclang="it" label="Italiano">
</video>
</div>
</body>
</html>
Oltre al normale contenuto multimediale, l'HtmL può includere (con qualche difficoltà) una varietà di altri contenuti.
| Elemento | Descrizione |
|---|---|
<embed> |
rappresenta un punto di integrazione per un'applicazione esterna o un contenuto interattivo (in altre parole, un plug-in). |
<object> |
rappresenta una risorsa esterna, che può essere trattata come un'immagine, un contesto di esplorazione nidificato o una risorsa che deve essere gestita da un plug-in. |
<param> |
definisce i parametri per un <object>elemento. |
<source> |
specifica più risorse multimediali per <picture>, the <audio>o l' <video>elemento. È un elemento vuoto. Viene comunemente utilizzato per offrire lo stesso contenuto multimediale in più formati supportati da diversi browser. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<embed src="video.swf"><!-- video assente -->
<object width="400" height="400" data="video.swf">
<param name="autoplay" value="true">:
</object><!-- video assente -->
<div>Il 'tag picture' offre maggiore flessibilità nella specifica delle risorse di immagine.<br>
<picture>
<source media="(min-width: 650px)" srcset="homex32.png">
<img src="homex32.png" alt="nome-img" style="width:auto;">
</picture>
</div>
</body>
</html>
Per creare contenuti dinamici e applicazioni Web, HtmL supporta l'uso di linguaggi di scripting, in particolare JavaScript. Alcuni elementi supportano questa funzionalità.
| Elemento | Descrizione |
|---|---|
<canvas> |
Usare con l'API di scripting canvas per disegnare grafica e animazioni. |
<noscript> |
definisce una sezione di HtmL da inserire se un tipo di script nella pagina non è supportato o se lo script è attualmente disattivato nel browser. |
<script> |
viene utilizzato per incorporare o fare riferimento a uno script eseguibile. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<div>Il 'tag canvas' è utilizzato come contenitore per la grafica, è necessario
JavaScript per disegnare la grafica.<canvas id="iodisegno"></canvas></div>
<noscript>Il suo browser non supporta JavaScript!</noscript>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Questi elementi consentono di fornire indicazioni sul fatto che parti specifiche del testo sono state alterate.
| Elemento | Descrizione |
|---|---|
<del> |
rappresenta un intervallo di testo che è stato cancellato da un documento. Questo elemento è spesso (ma non deve essere) reso con testo barrato. |
<ins> |
rappresenta un intervallo di testo che è stato aggiunto a un documento. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<ins>Il 'tag ins' definisce un testo sottolineato inserito in un documento.</ins><br>
<del>Il 'tag del' definisce il testo che è stato eliminato da un documento.</del><br>
</body>
</html>
Elementi da usare per creare e gestire dati tabulari.
| Elemento | Descrizione |
|---|---|
<caption> |
rappresenta il titolo di una tabella. Anche se è sempre il primo discendente di a <table>, il suo stile, usando i CSS, può collocarlo altrove, relativamente al tavolo. |
<col> |
definisce una colonna all'interno di una tabella e viene utilizzata per definire la semantica comune su tutte le celle comuni. Si trova generalmente all'interno di un <colgroup>elemento. |
<colgroup> |
definisce un gruppo di colonne all'interno di una tabella. |
<table> |
rappresenta i dati tabulari, ovvero le informazioni espresse tramite una tabella di dati bidimensionale. |
<tbody> |
raggruppa uno o più <tr>elementi come corpo di un <table>elemento. |
<td> |
definisce una cella di una tabella che contiene dati. Partecipa al modello di tabella . |
<tfoot> |
definisce un insieme di righe che riassumono le colonne della tabella. |
<th> |
definisce una cella come intestazione di un gruppo di celle di tabella. La natura esatta di questo gruppo è definita dagli attributi scopee headers. |
<thead> |
definisce un insieme di righe che definiscono la testa delle colonne della tabella. |
<tr> |
L'elemento specifica che il markup contenuto all'interno del blocco <tr> comprende una riga di una tabella, all'interno della quale gli elementi <th>e <td>creano rispettivamente le celle di intestazione e di dati all'interno della riga. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<table>
<caption>Testata della TABELLA</caption>
<colgroup>
<col span="1" style="background-color:#eee">
<col span="1" style="background-color:#fffcc4;">
</colgroup>
<thead>
<tr>
<th>Titolo-colonna-1_thead</th>
<th>Il 'tag thead' raggruppa l'intestazione in una tabella-2_thead</th>
</tr>
</thead>
<tfoot>
<tr>
<td>PieDiPagina-1_tfoot</td>
<td>Il 'tag tfoot' raggruppa il contenuto del piè di pagina in una tabella-2_tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Il 'tag colgroup' specifica una o più colonne in una tabella per la formattazione.</td>
<td>Il 'tag col' specifica le proprietà di colonna per ogni colonna all'interno di un elemento
<colgroup> </td>
</tr>
<tr>
<td>Contenuto-colonna-1_tbody</td>
<td>Il 'tag tbody' raggruppa il contenuto del corpo in una tabella-2_tbody</td>
</tr>
<tr>
<td>L'elemento <tbody> viene utilizzato in combinazione con gli elementi <thead> e <tfoot></td>
<td>per specificare ciascuna parte di una tabella (corpo, intestazione, piè di pagina).</td>
</tr>
<tr>
<td>Il 'tag td' definisce una cella standard in una tabella HTML.</td>
<td>Il 'tag tr' definisce una riga in una tabella HTML e contiene uno o più elementi <th> o
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
HtmL fornisce una serie di elementi che possono essere utilizzati insieme per creare moduli che l'utente può compilare e inviare al sito Web o all'applicazione. C'è una grande quantità di ulteriori informazioni a riguardo disponibili nella guida ai moduli HtmL.
| Elemento | Descrizione |
|---|---|
<button> |
rappresenta un pulsante cliccabile. |
<datalist> |
contiene un insieme di <option>elementi che rappresentano i valori disponibili per altri controlli. |
<fieldset> |
viene utilizzato per raggruppare diversi controlli e etichette (<label>) all'interno di un modulo Web. |
<form> |
rappresenta una sezione di documento che contiene controlli interattivi per inviare informazioni a un server Web. |
<input> |
viene utilizzato per creare controlli interattivi per moduli basati sul Web al fine di accettare i dati dell'utente. |
<label> |
rappresenta una didascalia per un elemento in un'interfaccia utente. |
<legend> |
rappresenta una didascalia per il contenuto del suo genitore <fieldset>. |
<meter> |
rappresenta un valore scalare all'interno di un intervallo noto o un valore frazionario. |
<optgroup> |
crea un raggruppamento di opzioni all'interno di un <select>elemento. |
<option> |
viene utilizzato per definire un elemento contenuto in a <select>, an <optgroup>o un <datalist> elemento. In quanto tale, <option> può rappresentare voci di menu in popup e altri elenchi di elementi in un documento HtmL. |
<output> |
rappresenta il risultato di un calcolo o un'azione dell'utente. |
<progress> |
rappresenta l'avanzamento del completamento di un'attività, in genere visualizzato come una barra di avanzamento. |
<select> |
rappresenta un controllo che fornisce un menu di opzioni: |
<textarea> |
rappresenta un controllo di modifica di testo in più righe. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<form autocomplete="off">
<fieldset>
<legend>Dettagli:</legend>
<table>
<tr>
<td><label for="nome">Nome: </label></td>
<td><input type="text" name="nome" id="nome" autofocus required size="50"></td></tr>
<tr>
<td><label for="cognome">Cognome: </label></td>
<td><input type="text" name="cognome" id="cognome" required size="50"></td></tr>
<tr>
<td><label for="pwd">Password: </label> </td>
<td><input type="password" name="password" id="pwd" required size="50"></td></tr>
<tr>
<td><label for="data">Data di nascita: </label></td>
<td><input type="date" name="data" id="data" required></td></tr>
<tr>
<td><label for="cerca">Cerca con Google: </label></td>
<td><input type="search" name="cerca"></td></tr>
<tr>
<td><label for="telef">Telefono: </label></td>
<td><input type="tel" name="telef" required></td></tr>
<tr>
<td><label for="utente">Selezioni un tempo: </label></td>
<td><input type="time" name="utente"></td></tr>
<tr>
<td><label for="settimana">Selezioni alla settimana: </label></td>
<td><input type="week" name="settimana"></td></tr>
<tr>
<td><label for="giugno">Il compleanno (mese e anno): </label></td>
<td><input type="month" name="giugno"></td></tr>
<tr>
<td><label for="dataora">Il compleanno (data ed ora): </label></td>
<td><input type="datetime-local" name="dataora" required></td></tr>
<tr>
<td><label for="Roma">Citta nascosta: </label></td>
<td><input type="hidden" name="citta" value="Roma"></td></tr>
<tr>
<td><label for="fileutente">eleziona un file: </label></td>
<td><input type="file" name="fileutente"></td></tr>
<tr>
<td><input type="button" value="Clicca" onclick="funzione()"></td>
<td><input type="image" src="homex32.png" alt="img"></td> </tr>
<tr>
<td>Sesso: </td>
<td><input type="radio" name="sesso" id="maschio" value="maschio">
<label for="maschio">Maschio: </label>
<input type="radio" name="sesso" id="femmina" value="femmina">
<label for="femmina">Femmina: </label></td></tr>
<tr>
<td><label for="mail">Email: </label></td>
<td>
<input type="email" name="mail" id="mail" multiple required size="50" placeholder="Ad esempio:
thp1972@gmail.com"></td></tr>
<tr>
<td><label for="i_web">Indirizzo Web: </label></td>
<td><input type="url" name="i_web" id="i_web" size="50" placeholder="Ad esempio:
http://www.indirizzoweb.it"></td></tr>
<tr>
<td>Materie preferite:</td>
<td><input type="checkbox" name="storia" id="storia" value="STO">
<label for="storia">Storia: </label>
<input type="checkbox" name="matematica" id="matematica" value="MAT">
<label for="matematica">Matematica: </label>
<input type="checkbox" name="geografia" id="geografia" value="GEO">
<label for="geografia">Geografia </label>
<input type="checkbox" name="fisica" id="fisica" value="FIS">
<label for="fisica">Fisica: </label></td></tr>
<tr>
<td><label for="nr_libri">Quanti libri leggi all'anno? </label></td>
<td><input type="number" name="nr_libri" id="nr_libri" value="1"></td></tr>
<tr>
<td><label for="libri">Ogni quanti mesi compri un libro? </label></td>
<td><input type="range" name="libri" id="libri" min="1" step="1" max="12" value="1">
</td></tr>
<tr>
<td><label for="colore">Il tuo colore preferito? </label></td>
<td><input type="color" name="colore" id="colore"></td></tr>
<tr>
<td>Seleziona un sistema operativo: </td>
<td><select name="so">
<optgroup label="Famiglia Windows">
<option value="windows_10">Windows 10</option>
<option value="windows_8">Windows 8</option>
<option value="windows_7">Windows 7</option>
<option value="windows_vista">Windows Vista</option>
<option value="windows_xp">Windows XP</option>
</optgroup>
</select></td></tr>
<tr>
<td><label for="lp">Scegli un linguaggio di programmazione: </label></td>
<td><datalist id="lp_datasource">
<option value="Java"></option>
<option value="C#"></option>
<option value="C++"></option>
<option value="PHP"></option>
<option value="JavaScript"></option>
<option value="Python"></option>
</datalist>
<input type="text" name="lp" id="lp" list="lp_datasource"> </td></tr>
<tr>
<td> <label for="note">Note: </label></td>
<td><textarea name="note" id="note" rows="10" cols="30" maxlength="2000" wrap="soft"
spellcheck="true"></textarea></td></tr>
<tr>
<td>Puoi salvare o cancellare tutto:</td>
<td><button type="submit" id="ok"> Salva i dati <i class="fa fa-save"></i></button>
<button type="reset" id="reset"> Ripristina <i class="fa fa-refresh"></i></button></td></tr>
</table>
</fieldset>
</form>
</body>
</html>
HtmL offre una selezione di elementi che aiutano a creare oggetti interattivi dell'interfaccia utente.
| Elemento | Descrizione |
|---|---|
<details> |
viene utilizzato come widget di divulgazione da cui l'utente può recuperare informazioni aggiuntive. |
<dialog> |
rappresenta una finestra di dialogo o un altro componente interattivo, ad esempio un ispettore o una finestra. |
<menu> |
rappresenta un gruppo di comandi che un utente può eseguire o attivare. Ciò include sia i menu di elenco, che potrebbero apparire nella parte superiore di uno schermo, sia i menu di scelta rapida, come quelli che potrebbero apparire sotto un pulsante dopo che è stato cliccato. |
<menuitem> |
rappresenta un comando che un utente è in grado di richiamare attraverso un menu a comparsa. Ciò include i menu di scelta rapida, nonché i menu che potrebbero essere collegati a un pulsante di menu. |
<summary> |
viene utilizzato come riepilogo, didascalia o legenda per il contenuto di un <details>elemento. |
Esempio Indicativo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo pagina</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<details>
<summary>Clicca quì sopra per aprire il contenuto</summary>
<div>...contenuto del 'div'...</div>
<p>...contenuto di 'p'...</p>
</details>
<div>Il 'tag dialog' definisce una finestra di dialogo
<dialog open>Questa è una finestra di dialogo window</dialog></div>
<div contextmenu="menuContesto">
<p style="background:#eee;font-size:18px;padding:10px;">Clic-destro per vedere il menu contestuale!
<span style="color:red;"> ...Attenzione! Questo Esempio Funziona solo su Firefox!</span></p>
<menu type="context" id="menuContesto">
<menuitem label="Aggiorna" onclick="window.location.reload();"
icon="agg.png"></menuitem>
<menu label="SottoMenu...">
<menuitem label="Email A queta Pagina" icon="mail.png" onclick="window.location=
'mailto:?body='+window.location.href;"></menuitem>
</menu>
</menu>
</div>
</body>
</html>
Web Components è una tecnologia legata all'HtmL che rende possibile, in sostanza, creare e utilizzare elementi personalizzati come se fossero normali HtmL. Inoltre, è possibile creare versioni personalizzate di elementi HtmL standard.
| Elemento | Descrizione |
|---|---|
<content> |
Parte obsoleta della suite di tecnologie Web Components, veniva utilizzato all'interno di Shadow DOM come punto di inserimento e non era pensato per essere utilizzato nell'HtmL ordinario. Ora è stato sostituito <slot>dall'elemento, che crea un punto nel DOM in cui è possibile inserire un DOM ombra. |
<element> |
Era parte di Web Components ; questo elemento era destinato a essere utilizzato per definire nuovi elementi DOM personalizzati. È stato rimosso a favore di una metodologia basata su JavaScript per la creazione di nuovi elementi personalizzati; tuttavia, questa tecnologia non è matura e nessun brower la implementa pienamente. |
<shadow> |
Parte obsoleta della suite tecnologica di Web Components, doveva essere utilizzato come punto di inserimento DOM ombra. Potresti averlo usato se hai creato più shadow root sotto un host shadow. Non è utile in HtmL ordinario. |
<slot> |
Parte della suite tecnologica di Web Components, è un segnaposto all'interno di un componente Web che è possibile riempire con il proprio markup, che consente di creare alberi DOM separati e presentarli insieme. |
<template> |
è un meccanismo per mantenere il contenuto lato client che non deve essere sottoposto a rendering quando viene caricata una pagina, ma può essere successivamente istanziato durante il runtime utilizzando JavaScript. |
Attenzione: questi sono vecchi elementi HtmL obsoleti e deprecati che non dovrebbero mai essere usati in nuovi progetti e sostituiti nei vecchi progetti quando possibile.
| Elemento | Descrizione |
|---|---|
<acronym> |
Consente agli autori di indicare chiaramente una sequenza di caratteri che compongono un acronimo o un'abbreviazione di una parola. Questo elemento è stato rimosso in HTML5. Usare <abbr>elemento. |
<applet> |
Identifica l'inclusione di un'applet Java. |
<basefont> |
Stabilisce una dimensione carattere predefinita per un documento. La dimensione del carattere può quindi essere variata rispetto alla dimensione del carattere di base usando l'<font>elemento. |
<big> |
Rende le dimensioni del carattere del testo una dimensione più grande (ad esempio, da piccolo a medio, o da grande a grande x) fino alla dimensione massima del carattere del browser. |
<blink> |
Elemento non standard che causa il flashing del testo incluso. |
<center> |
Elemento a livello di blocco che può contenere paragrafi e altri elementi a livello di blocco e in linea. L'intero contenuto di questo elemento è centrato orizzontalmente all'interno del suo elemento di contenimento (tipicamente, il <body>. |
<command> |
Elemento che rappresenta un comando che l'utente può richiamare. |
<content> |
Parte obsoleta della suite di tecnologie Web Components, veniva utilizzato all'interno di Shadow DOM come punto di inserimento e non era pensato per essere utilizzato nell'HtmL ordinario. Ora è stato sostituito dall'elemento <slot>, che crea un punto nel DOM in cui è possibile inserire un DOM ombra. |
<dir> |
Rappresenta una directory, ovvero una raccolta di nomi di file. |
<element> |
era parte di Web Components; questo elemento era destinato a essere utilizzato per definire nuovi elementi DOM personalizzati. È stato rimosso a favore di una metodologia basata su JavaScript per la creazione di nuovi elementi personalizzati; tuttavia, questa tecnologia non è matura e nessun brower la implementa pienamente. |
<font> |
Definiva la dimensione, il colore e la faccia del font per il suo contenuto. |
<frame> |
Eelemento HtmL che definisce una particolare area in cui è possibile visualizzare un altro documento HtmL. Un usato all'interno di a <frameset>. |
<frameset> |
Elemento HtmL che viene utilizzato per contenere elementi <frame>. |
<image> |
Elemento HtmL è un residuo obsoleto di un'antica versione di HtmL perso nella notte dei tempi; usare l'elemento standard <img>. |
<isindex> |
Elemento HtmL obsoleto che inserisce un campo di testo in una pagina per interrogare il documento. |
<keygen> |
Elemento HtmL esiste per facilitare la generazione di materiale chiave e l'invio della chiave pubblica come parte di un modulo HtmL. Questo meccanismo è progettato per l'uso con i sistemi di gestione dei certificati basati sul Web. Si prevede che l' <keygen>elemento verrà utilizzato in un modulo HtmL insieme ad altre informazioni necessarie per costruire una richiesta di certificato e che il risultato del processo sarà un certificato firmato. |
<listing> |
Rende il testo tra i tag di inizio e fine senza interpretare il codice HtmL in mezzo e utilizzando un font a spaziatura fissa. Lo standard HtmL 2 raccomandava che le linee non dovessero essere rotte se non superiori a 132 caratteri. |
<marquee> |
Elemento HtmL viene utilizzato per inserire un'area di testo scorrevole. Puoi controllare cosa succede quando il testo raggiunge i bordi della sua area di contenuto usando i suoi attributi. |
<multicol> |
Elemento HtmL era un elemento sperimentale progettato per consentire layout a più colonne. Non ha mai avuto una trazione significativa e non è implementato in nessuno dei principali browser. |
<noembed> |
è un modo deprecato e non standard di fornire contenuto alternativo o "fallback" per i browser che non supportano l' <embed>elemento o che non supportano il contenuto incorporato che un autore desidera utilizzare. |
<plaintext> |
Rende tutto seguendo il tag iniziale come testo grezzo, senza interpretare qualsiasi HtmL. Non esiste un tag di chiusura, poiché tutto ciò che segue è considerato testo non elaborato. |
<shadow> |
Una parte obsoleta della suite tecnologica di Web Components, doveva essere utilizzato come punto di inserimento DOM ombra. |
<spacer> |
Elemento HtmL obsoleto che consentiva l'inserimento di spazi vuoti sulle pagine. È stato ideato da Netscape per ottenere lo stesso effetto di un'immagine di layout a pixel singolo, che era qualcosa che i web designer utilizzavano per aggiungere spazi bianchi alle pagine web senza utilizzare effettivamente un'immagine. Tuttavia, <spacer>non è più supportato da alcun browser principale e ora è possibile ottenere gli stessi effetti utilizzando semplici CSS. |
<strike> |
Posiziona un barrato (linea orizzontale) sul testo. |
<tt> |
Produce un elemento inline visualizzato nel font monotype predefinito del browser. Questo elemento è stato concepito per lo stile del testo che verrà visualizzato su un display a larghezza fissa, ad esempio un teletype. Probabilmente è più comune visualizzare il tipo a larghezza fissa usando l'<code>elemento. |
<xmp> |
Rende il testo tra i tag di inizio e di fine senza interpretare l'HtmL in mezzo e usando un carattere a spaziatura fissa. La specifica HTML2 raccomandava di renderla abbastanza ampia da consentire 80 caratteri per riga. |