HTML

linguaggio di multimedia usato per la

formattazione di documenti ipertestuali

HTML

Estensione .html, .htm, .shtml, .shtm

Tipo MIME text/html
Sviluppato da W3C
1ª pubblicazione giugno 1993[1]
Ultima versione 5.2 (14 dicembre 2017[2])
Tipo Linguaggio di markup
Estensione di SGML
Esteso a XHTML
Standard ISO/IEC 15445
Formato aperto? Sì
Sito web html.spec.whatwg.org/ (https://html.spec.whatwg.org/)
In informatica l'HyperText Markup Language (traduzione letterale: linguaggio a marcatori per
ipertesti), comunemente noto con l'acronimo HTML, è un linguaggio di markup. Nato per la
formattazione e impaginazione di documenti ipertestuali disponibili nel web 1.0, oggi è
utilizzato principalmente per il disaccoppiamento della struttura logica di una pagina web
(definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili CSS per
adattarsi alle nuove esigenze di comunicazione e pubblicazione all'interno di Internet[3].

L'HTML è un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web
Consortium (W3C). È derivato dall'SGML, un metalinguaggio finalizzato alla definizione di
linguaggi utilizzabili per la stesura di documenti destinati alla trasmissione in formato
elettronico. La versione attuale, la quinta, è stata rilasciata dal W3C nell'ottobre 2014.

Il motivo principale che ha spinto il W3C e i suoi membri a sviluppare HTML5 è stata la
necessità di fornire direttamente le funzionalità che in precedenza erano fruibili tramite
estensioni proprietarie all'esterno dei browser, come Adobe Flash e simili. Un secondo
obiettivo che gli sviluppatori si erano prefissati era quello di garantire una maggiore
compatibilità tra i diversi browser, indipendentemente dalla piattaforma software utilizzata, e
principalmente mirata all'espansione dei dispositivi mobili.[3]

Storia

L'HTML è stato sviluppato nei primissimi anni novanta del XX secolo da Tim Berners-Lee al
CERN di Ginevra (Svizzera), assieme al protocollo HTTP dedicato al trasferimento di
documenti in tale formato. Nel 1989 Berners-Lee propose un progetto che riguardava la
pubblicazione di ipertesti, noto con il nome di "world wide web". All'interno di questo progetto
in seguito nacquero sia il server web "httpd" (HyperText Transfer Protocol Daemon), sia il
client WorldWideWeb (il primo browser della storia), il cui sviluppo partì nell'ottobre del 1990,
e il cui uso fu esclusivamente interno al CERN fino alla sua pubblicazione nella rete internet
nel corso del 1991. Assistito dai suoi colleghi all'interno dell'istituto Svizzero, Berners-Lee
concorse alla definizione della prima versione dell'HTML, che fu ufficialmente resa pubblica
nel giugno del 1993, co-firmata insieme a Daniel Connolly e sostenuta dal gruppo di lavoro
dell'Internet Engineering Task Force (IETF) chiamato Integration of Internet Information
Resources ("Integrazione delle risorse informative di Internet"), per proporla come standard
IETF.[1]
Esempio di pagina HTML

Nel 1994 il linguaggio ha avuto una forte diffusione in seguito ai primi utilizzi commerciali del
web, così nello stesso anno nacque il World Wide Web Consortium, e da quel momento in
poi, lo sviluppo dell'HTML diverrà prerogativa del W3C.

Nel 1995 il W3C definì la versione 3.0 di HTML, a cui seguì la versione 3.2 nel 1997, e infine
arrivarono nel 1998 le prime specifiche di HTML4.

La versione 4.01, pubblicata il 24 dicembre 1999 e penultima versione ufficiale, costituisce il

frutto dei diversi ampliamenti e miglioramenti del decennio precedente, in particolare nella
separazione del livello presentazionale della formattazione, cioè quella che descrive gli
aspetti grafici del documento, in un'entità separata dall'HTML, i fogli di stile a cascata (CSS),
definiti nello stesso anno nella loro prima versione, il livello 1[4]. Tale distinzione, tra
contenuto e aspetto finale del documento, permette a browser e dispositivi differenti di
rappresentare gli stessi contenuti in maniera consona alle diverse capacità grafiche e
dimensioni disponibili. Se da una parte questo impone agli sviluppatori web la creazione di
personalizzazioni dei fogli di stile, dall'altra ha garantito la massima diffusione del web ed
evitato che esso diventasse un medium di élite.

Nel gennaio 2000, viene pubblicato come standard XHTML 1.0[5], una variante di HTML4 che
usa XML 2.0 anziché SGML come metalinguaggio di markup, per migliorarne l'interoperabilità
con altri linguaggi della famiglia come SVG e MathML[6] Il W3C decise di riformulare l'HTML4
e di continuare lo sviluppo solo su XHTML[7] e nel maggio 2011 XHTML 1.1 diventa uno
standard ufficiale[8].
Nel corso del nuovo millennio, il W3C cominciò a lavorare a due nuovi progetti, uno orientato
ad estendere l'XHTML, e l'altro destinato a definire un nuovo linguaggio che non sarebbe
stato compatibile con le vecchie versioni di HTML e XHTML, noto con il nome di XHTML 2
(quest'ultimo progetto è stato dichiarato ufficialmente fallito alla fine del 2010, in favore di un
approccio meno rigido).

Nel 2004, a seguito di una giornata di studi, nasce un gruppo di lavoro alternativo al
consorzio: Apple, Mozilla Foundation, Opera Software e, in un secondo momento, anche
Google, si riuniscono nel Web Hypertext Application Technology Working Group (WHATWG) e
cominciano lo sviluppo di una nuova versione dell'HTML, preoccupati dal disinteresse per
l'HTML dimostrato dal consorzio[9]. Nel 2006 il W3C decide di prendere parte allo sviluppo di
HTML5 e nel 2007 si unì al WHATWG, i due gruppi collaborano fino al 2011, quando si
rendono conto di avere obiettivi inconciliabili: il consorzio voleva tracciare una linea e
pubblicare una nuova versione delle specifiche standard, mentre il WHATWG voleva uno
standard in continua evoluzione[7]. Il W3C ha pubblicato la quinta revisione delle specifiche il
28 ottobre 2014[2].

Attualmente i documenti HTML sono in grado di incorporare molte tecnologie, che offrono la
possibilità di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica,
interazioni dinamiche con l'utente, animazioni interattive e contenuti multimediali. Si tratta di
linguaggi come CSS, JavaScript, XML, JSON, o di altre applicazioni multimediali di
animazione vettoriale o di streaming audio o video.

Al giorno d'oggi molti web designer delegano la scrittura del codice HTML ad applicazioni
specifiche, come per esempio i cosiddetti editor WYSIWYG che permettono al designer di
occuparsi dell'aspetto grafico finale della pagina mentre il codice vero e proprio viene
generato automaticamente. Gli sviluppatori puri preferiscono invece utilizzare direttamente il
codice HTML, in modo da avere un maggior controllo sul risultato finale e sulla pulizia del
codice scritto, cosa che gli editor WYSIWYG odierni nonostante siano sempre più avanzati
non possono sempre garantire, vuoi anche per la diversa resa dei browser sulle parti di
codice HTML.

Descrizione

L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o

visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso
tag di formattazione. Sebbene l'HTML supporti l'inserimento di script e oggetti esterni quali
immagini o filmati, non è un linguaggio di programmazione: non prevedendo alcuna
definizione di variabili, strutture dati, funzioni o strutture di controllo che possano realizzare
programmi, il suo codice è in grado soltanto di strutturare e decorare dati testuali.[10][11]

Il linguaggio HTML, o la sua variante XHTML, ha come scopo quello di gestire i contenuti
associandone o specificandone allo stesso tempo la struttura grafica (layout) all'interno della
pagina web da realizzare grazie all'utilizzo di tag diversi. Ogni tag (ad esempio <h1> o
<p> ) specifica un diverso ruolo dei contenuti che esso contrassegna (quindi il tag <h1>
definirà un'importanza maggiore del tag <p> ). La formattazione consiste nell'inserimento
nel testo di marcatori o etichette, detti tag, che descrivono caratteristiche come la funzione, il
colore, le dimensioni, la posizione relativa all'interno della pagina. I browser che leggono il
codice mostrano all'utente formattazioni predefinite per ogni tag che incontrano (così ad
esempio i contenuti marcati con il tag <h1> avranno carattere 18pt e i contenuti marcati
da <p> avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il
controllo dell'utente, che può modificarla nelle Impostazioni del suo browser.

Quando un documento ipertestuale scritto in HTML è memorizzato in un file la sua

estensione è tipicamente .html o .htm .

Archiviazione e manipolazione

I documenti HTML vengono immagazzinati sui dischi rigidi di macchine elaboratrici

(computer-server) costantemente collegate e connesse alla rete Internet. Su queste
macchine è installato un software specifico (web server) che si occupa di produrre e inviare i
documenti ai browser degli utenti che ne fanno richiesta usando il protocollo HTTP per il
trasferimento dati.

Spesso il documento HTML viene generato del tutto o parzialmente tramite un codice
eseguibile residente sul server Internet (elaborazione lato server) in grado di interagire con
altre applicazioni presenti sul server stesso, come per esempio una base di dati, e inviare poi
al browser il risultato finale, realizzando le cosiddette pagine web dinamiche con cui un utente
può compiere operazioni interattive avanzate (ad es. filtrare gli articoli all'interno di un
catalogo on-line, inviare e registrare dati, fare login ecc.). È il caso di documenti scritti in
linguaggi come ASP, PHP, Perl o Java. In altri casi invece alcuni tipi di elaborazione sono
operati lato client con linguaggi come JavaScript.

Sintassi

Il componente principale della sintassi di questo linguaggio è l'elemento, inteso come

struttura di base a cui è delegata la funzione di formattare i dati o indicare al browser delle
informazioni.

Ogni elemento è racchiuso all'interno di marcature dette tag, costituite da una sequenza di
caratteri racchiusa tra due parentesi angolari o uncinate (<>), cioè i segni minore e maggiore
(Es.: <br /> ; il tag di questo esempio serve per indicare un ritorno a capo).

Quando il tag deve essere applicato a una sezione di testo o di codice, l'ambito di
applicazione deve essere delimitato fra un tag di apertura ed uno di chiusura (chiusura
esplicita), che coincide col tag di apertura preceduto da una barra (/) dopo la parentesi
angolare aperta (Es.: <b>testo testo testo</b> , in questo caso, il testo compreso
tra questi due tag verrà visualizzato in grassetto dal browser).

Alcuni tag presentano un'applicazione puntuale, come per esempio il tag <img> che serve
per inserire un'immagine in un determinato punto della pagina, e in quanto tali non richiedono
il tag di chiusura; in questo caso si parla di tag a chiusura implicita. In XHTML, invece, la
chiusura implicita è proibita e tutti i tag devono essere sempre chiusi esplicitamente tramite
un tag di chiusura o, nel caso dei tag puntuali, usando il carattere '/' alla fine del tag stesso
(per esempio <br /> ). Per questi tag, i browser sono in grado di accettare entrambe le
modalità, per motivi di compatibilità.

Struttura di un documento HTML

Lo stesso argomento in dettaglio: Elemento HTML.

Struttura di un generale documento HTML.

Un documento HTML inizia con una dichiarazione del tipo di documento, una breve stringa
che indica in quale sintassi e relativa versione esso sia scritto, per esempio HTML 4.0 Strict.
Tale informazione è necessaria al browser per identificare le regole di interpretazione e
visualizzazione appropriate per lo specifico documento, ed è per questa ragione che la
dichiarazione debba precedere il documento vero e proprio.

Ogni versione del linguaggio HTML precedenti alla quinta, ovvero fino ad HTML 4.01 o
XHTML 1.1, possiede una sintassi formalmente definita da una definizione del tipo di
documento (DTD) che, pubblicata sul web dal W3C, indica, per ogni versione, quali elementi,
attributi ed entità possano o debbano essere utilizzati, e in quale maniera; pertanto in questi
casi la dichiarazione del tipo di documento deve (può, nel caso delle varianti XML)
comprendere anche l'URL di tale risorsa. La quinta versione di HTML, invece, non possiede
alcuna DTD, pertanto in questi casi la dichiarazione iniziale indica la mera dicitura "HTML".

Per dichiarare un documento che utilizzerà lo standard HTML5 si utilizza il tag <!DOCTYPE
html> .

Dopo la dichiarazione del tipo di documento, il documento HTML presenta una struttura ad
albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno
contengono a loro volta sottosezioni più piccole, sempre delimitate da tag.

La struttura più esterna è quella che delimita l'intero documento, eccetto la DTD, ed è
compresa tra i tag <html> e </html> .

All'interno dei tag <html> lo standard prevede sempre la definizione di due sezioni ben
distinte e disposte in sequenza ordinata:

la sezione di intestazione o header, delimitata tra i tag <head> e </head> , che

contiene informazioni di controllo normalmente non visualizzate dal browser, con
l'eccezione di alcuni elementi

la sezione del corpo o body, delimitata tra i tag <body> e </body> , che contiene la
parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che
costituiscono la parte visualizzata dal browser.

Al di sotto di questa suddivisione generale, lo standard non prevede particolari obblighi per
quanto riguarda l'ordine e il posizionamento delle ulteriori sottosezioni all'interno dell'header
o del body, a parte l'indicazione del rispetto dei corretti annidamenti (le sottosezioni non si
devono sovrapporre, ossia ogni sottosezione deve essere chiusa prima di iniziare la
sottosezione successiva), lasciando così completa libertà allo sviluppatore o al progettista
per quanto riguarda la strutturazione e l'organizzazione successive.

Tag della head

I tag utilizzati nella sezione head sono tipicamente di tipo diverso da quelli utilizzati nella
sezione body, essendo destinati a scopi differenti. I tag utilizzati nella sezione head
normalmente non vengono visualizzati dal browser ma servono come informazioni di
controllo e di servizio quali:

metadata per convogliare informazioni utili ad applicazioni esterne (es. motori di ricerca) o
al browser (es. codifica dei caratteri, utile per la visualizzazione di alfabeti non latini)

metadata di tipo http-equiv per controllare informazioni aggiuntive nel protocollo HTTP

collegamenti verso file di servizio esterni (CSS, script, icone visualizzabili nella barra degli
indirizzi del browser)

inserimento di script (codice eseguibile) utilizzati dal documento

informazioni di stile (CSS locali)

il titolo associato alla pagina e visualizzato nella finestra principale del browser

Tag del body

All'interno della sezione di body, che racchiude la parte visualizzabile del documento, si
utilizzano i tag specifici previsti per la formattazione dei contenuti accessibili all'utente finale,
ossia per il controllo di:

intestazioni (titoli di capitoli, di paragrafi eccetera)

strutture di testo (testo indentato, paragrafi, eccetera)

aspetto del testo (grassetto, corsivo, eccetera)

elenchi e liste (numerate, generiche, di definizione)

tabelle

moduli elettronici (campi compilabili dall'utente, campi selezionabili, menu a tendina,

pulsanti eccetera)

collegamenti ipertestuali e ancore

layout generico del documento

inserimento di immagini
 inserimento di contenuti multimediali (audio, video, animazioni eccetera)

inserimento di contenuti interattivi (script, applicazioni esterne)

Tra quelli elencati sopra, il tag <a> è quello che gioca un ruolo chiave in quanto descrive
un collegamento (o link) a un altro documento ipertestuale consentendo, con un click del
mouse o con un'operazione da tastiera, di abbandonare la pagina o il sito che si sta
visualizzando e caricare quella indicata dal link, realizzando così la funzione di navigazione
tipica dell'uso di Internet.

Haml

Haml (HTML Abstraction Markup Language) è un sistema di modelli progettato per evitare di
scrivere codice inline in un documento web e rendere l'HTML più pulito. Haml offre la
flessibilità di avere alcuni contenuti dinamici in HTML. Simile ad altri linguaggi web come
PHP, ASP, JSP e sistemi di modelli come eRuby, Haml incorpora anche del codice che viene
eseguito durante il runtime e genera codice HTML per fornire alcuni contenuti dinamici. Per
eseguire il codice Haml, i file devono avere un'estensione .haml . Questi file sono simili ai
file .erb o eRuby; aiutano anche a incorporare il codice Ruby durante lo sviluppo di
un'applicazione web[12].

Esempio

Haml utilizza il rientro degli spazi (due spazi) per la nidificazione e l'ambito dei tag che funge
da sostituto per le coppie di tag open-end, rendendolo asciutto e più pulito. L'esempio
seguente confronta le sintassi di Haml ed eRuby (Embedded Ruby), insieme all'output HTML.
 Haml ERB HTML

< div class =

"category" >

% div < div

.category
class =
< div class = "category" >

 % div "ricette" >

< div class = "ricette"

.recipes
< h1 >
>

 % <% = ricetta
< h1 > Cookie </ h1 >

h1 = . nome  %> </

< h3 > Dessert </ h3
ricetta . h1 >

>

nome
< h3 >
</ div >

 % <% = ricetta
< div >

h3 = . categoria
< h4 > A base di
ricetta .  %> </ h3 >

pasta e zucchero. Di solito

categoria
</ div >

di forma circolare e ha circa

 % div
< div >

400 calorie. </ h4 >

 % < h4 >
</ div >

h4 = <% = ricetta
</ div >

ricetta . . descrizione
descrizione
 %> </ h4 >

<

</ div >

Mappe immagine

Lo stesso argomento in dettaglio: Mappa immagine.

Lato client

Le mappe immagine lato client sono state introdotte in HTML 3.2 e non richiedono alcuna
logica speciale per essere eseguite sul server (sono completamente lato client). Inoltre non
richiedono JavaScript.
Sopra una mappa immagine fatta con il tag <map> . Sotto tre immagini PNG trasparenti (si può usare anche il
formato GIF) inserite con <img> e aventi dei link <a> . Solo per quanto riguarda quadrati e rettangoli il risultato è
lo stesso. Il rosso rappresenta un'immagine e il giallo le aree cliccabili

HTML puro

Una mappa immagine lato client in HTML è composta da due parti:

1. l'immagine reale, che è incorporata con il tag <img> . Il tag "image" deve avere un
attributo usemap, che assegna un nome alla mappa immagine da utilizzare per questa
immagine (possono esistere più mappe immagine su una singola pagina).
1. Un elemento <map> e, al suo interno, elementi <area> , ciascuno dei quali
definisce una singola area cliccabile all'interno della mappa immagine. Essi sono simili
al tag <a> che definisce l'URL da aprire per un normale collegamento web. Un
attributo title può essere inserito e visualizzato come un suggerimento se un
utente desktop passa il puntatore del mouse sull'area. Per motivi di accessibilità web, è
spesso importante - e in alcuni casi può anche essere un requisito legale o contrattuale
- fornire un attributo alt che descriva il collegamento che il software di lettura dello
schermo può leggere, ad esempio, per gli utenti non vedenti[13].

Gli elementi <area> possono essere rettangoli ( shape="rect" ), poligoni

( shape="poly" ) o cerchi ( shape="circle" ). I valori di forma sono coppie di
coordinate. Ogni coppia ha un valore X e Y (da sinistra / in alto di un'immagine) ed è separata
da una virgola.

Rettangolo: impostare quattro coordinate: x1, y1, x2, y2

Poligono: impostare tutte le coordinate che si desidera (un multiplo di due): x1, y1, x2, y2,
[...] xn, yn
 Cerchio: una coppia di coordinate e un altro valore con un raggio: x1, y1, raggio

L'esempio seguente definisce un'area rettangolare (9,372,66,397). Quando un utente fa clic in

un punto qualsiasi di quest'area, viene indirizzato alla home page di Wikipedia in inglese.

< img src = "image.png" alt = "Mappa sito web" usemap =

"#mapname" />

< map name = "mapname" >

< area shape = "rect" coords = "9,372,66,397" href =

"https://en.wikipedia.org/" alt = "Wikipedia" title =
"Wikipedia" />

</ map >

Creazione e utilizzo

È possibile creare mappe immagine lato client a mano utilizzando un editor di testo, ma per
farlo è necessario che i web designer sappiano come codificare HTML e come enumerare le
coordinate delle aree che desiderano posizionare sull'immagine. Di conseguenza, la maggior
parte delle mappe immagine codificate a mano sono semplici poligoni. Poiché la creazione
di mappe immagine in un editor di testo richiede molto tempo e impegno, molte applicazioni
sono state progettate per consentire ai web designer di creare mappe immagine rapidamente
e facilmente, proprio come creerebbero forme in un editor di grafica vettoriale. Esempi di
queste applicazioni sono Dreamweaver di Adobe o KImageMapEditor (per KDE) e un plugin di
mappe immagine di GIMP[14].

Le mappe di immagini che non rendono evidenti le loro aree cliccabili rischiano di sottoporre
l'utente a una navigazione misteriosa. Anche quando lo fanno, dove conducono potrebbe non
essere ovvio. Questo può essere parzialmente risolto con effetti di rollover[15].

Immagini SVG

Poiché il formato immagine SVG (Scalable Vector Graphics) fornisce i propri meccanismi per
l'aggiunta di collegamenti ipertestuali e altre forme più sofisticate di interattività alle
immagini, le tecniche tradizionali di mappatura delle immagini non sono generalmente
necessarie quando si lavora con immagini vettoriali nel formato SVG. Esempio (una mappa
immagine rettangolare)[16]:

<figure id=prova>

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200
808" preserveAspectRatio="xMinYMin meet" >

<image width="1200" height="808" xlink:href="prova.jpg">

</image>

<a xlink:href="http://www.sito.it/">

<rect x="535" y="28" fill="#fff" opacity="0" width="150"

height="750" />

</a>

</svg>

</figure>

CSS:

#prova {

position: relative;

width: 100%;

padding-bottom: 77%;

vertical-align: middle;

margin: 0;

overflow: hidden;

#prova svg {

 display: inline-block;

position: absolute;

top: 0; left: 0;

Alternative

Esistono alternative visivamente identiche alle mappe immagine create con il tag <map>.
Esse consistono nel creare forme e/o maschere di immagini con varie tecniche CSS, renderle
cliccabili, nasconderle con opacità "0" o inserendo GIF o PNG o SVG trasparenti e infine
sovrapporle ad un'immagine[17][18][19].

Clip-path CSS

Esempio (un'area cliccabile a forma di stella):

HTML

<a href="http://www.sito.com">

<img height=100px width=100px src="immagine.jpg"

class="clip">

</a>

<a class="star-link clip" href="http://www.sito.com"></a>

<svg>

<defs>

 <clipPath id="clip">

<polygon

points="50,0 61,35 98,35

68,57 79,91 50,70

21,91 32,57 2,35 39,35"/>

</clipPath>

</defs>

</svg>

CSS

.clip {

clip-path: url(#clip);

.star-link {

position: absolute;

left: 125px;

background-color: blue;

min-height: 100px;

height: 100px;
 width: 100px;

min-width: 100px;

.clip:hover {

opacity: 0.5;

Forme CSS

Esempio (un'area cliccabile a forma di cuore):

HTML

<a id="heart" href="https://www.sito.it"></a>

CSS

#heart {

position: relative;

width: 100px;

height: 90px;

#heart:before,

#heart:after {

position: absolute;

 content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

#heart:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

Mask-image CSS

Esempio (un'area cliccabile triangolare):

HTML

<svg width="0" height="0" viewBox="0 0 400 600">

 <defs>

<mask id="my-svg-mask">

<rect fill="#000000" x="0" y="0" width="400" height="600">

</rect>

<polygon fill="#FFFFFF" points="200.5 152 349 449 52 449">

</polygon>

</mask>

</defs>

</svg>

CSS

.mask5 {

-webkit-mask-image: url(#my-svg-mask);

mask-image: url(#my-svg-mask);

CodePen

Logo CodePen
CodePen è una comunità online per testare e mostrare frammenti di codice HTML, CSS e
JavaScript creati dagli utenti. Funziona come un editor di codice online e un ambiente di
apprendimento open source, in cui gli sviluppatori possono creare frammenti di codice,
chiamati "penne", e testarli. È stato fondato nel 2012 dagli sviluppatori full-stack Alex
Vazquez e Tim Sabat e dal designer di front-end Chris Coyier[20]. I suoi dipendenti lavorano a
distanza, raramente tutti si incontrano di persona. CodePen è una delle più grandi comunità
di web designer e sviluppatori per mostrare le proprie capacità di programmazione[21], con
una stima di 330 000 utenti registrati nel 2015[22] e 14,16 milioni di visitatori mensili nel
2019[23].

HTML Tidy

Lo stesso argomento in dettaglio: HTML Tidy.

HTML Tidy è uno strumento ideato da Dave Raggett per aiutare ad evitare di fare errori nella
stesura di codice HTML.

Tidy infatti si occupa di correggere tutti gli errori più tipici in cui si incorre durante lo sviluppo
di codice web. Inoltre si occupa di rendere leggibile il codice generato da editor HTML, e di
segnalare all'utente dove deve prestare più attenzione. Riesce a riconoscere una vasta
gamma di errori, segnalandoli come WARNINGS (avvertimenti), ai quali affianca numero di
riga e colonna.

Note

1. (EN) Tim Berners-Lee e Daniel Connolly, Hypertext Markup Language (HTML) - A

Representation of Textual Information and MetaInformation for Retrieval and Interchange
(https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt) (TXT), su World Wide Web
Consortium, 1993.

2. https://html.spec.whatwg.org/multipage/

3. Daniele Bochiccio e Stefano Mostarda, HTML5 con CSS e JavaScript, Hoepli, 2015, p. 20.

4. ^ (EN) Cascading Style Sheets, level 1 (https://www.w3.org/TR/1999/REC-CSS1-199901

11) , su World Wide Web Consortium.

5. ^ (EN) XHTML 1.0: The Extensible HyperText Markup Language - A Reformulation of HTML
4 in XML 1.0 - W3C Recommendation (https://www.w3.org/TR/xhtml1/) , su World Wide
Web Consortium, 26 gennaio 2000.
 6. ^ (EN) §1.1 (https://www.w3.org/TR/xhtml1/#why) , in Why the need for XHTML?,
XHTML 1.0 Specification, World Wide Web Consortium, 26 gennaio 2000.

7. (EN) §1.4 (https://html.spec.whatwg.org/multipage/introduction.html#history-2) , in

History, HTML5 - A vocabulary and associated APIs for HTML and XHTML - W3C
Recommendation, World Wide Web Consortium, 28 ottobre 2014.

8. ^ (EN) XHTML 1.1 - Module-based XHTML - W3C Recommendation (https://www.w3.org/T

R/2001/REC-xhtml11-20010531/) , su World Wide Web Consortium, 31 maggio 2001.

9. ^ (EN) What is the WHATWG? (https://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATW

G.3F) , su wiki.whatwg.org. URL consultato il 19 gennaio 2017.

10. ^ (EN) Thomas Powell, HTML & XHTML: the complete reference (https://archive.org/detail
s/htmlxhtmlcomplet0000powe) , McGraw-Hill, 2003, p. 25 (https://archive.org/details/
htmlxhtmlcomplet0000powe/page/25) , ISBN 0-07-222942-X.

«HTML is not a programming language».

11. ^ (EN) Jennifer Niederst Robbins, Learning Web Design (https://archive.org/details/learni

ngwebdesig00robb) , O'Reilly, 2007, p. 4 (https://archive.org/details/learningwebdesig
00robb/page/n5) , ISBN 978-0-596-52752-5.

«HTML is not a programming language; it is a markup language».

12. ^ Haml (https://haml.info/) , su haml.info. URL consultato il 4 febbraio 2021.

13. ^ Image Maps in HTML (http://accessibility.psu.edu/imagemaps) , in AccessAbility,

Penn State University. URL consultato il 6 ottobre 2013.

14. ^ (EN) GIMP - Image Map Tutorial (https://www.gimp.org/tutorials/Image_Map/) , su

www.gimp.org. URL consultato il 22 marzo 2021.

15. ^ Vincent Flanders, Web Pages That Suck: Learn Good Design by Looking at Bad Design (h
ttps://archive.org/details/webpagesthatsuck00flan) , San Francisco, Sybex Inc, March
1998, ISBN 978-0-7821-2187-2.

16. ^ (EN) Dudley Storey, Create A Responsive Imagemap With SVG (http://thenewcode.com/
760/Create-A-Responsive-Imagemap-With-SVG) , su the new code. URL consultato il 22
marzo 2021.

17. ^ (EN) The Many Ways to Link Up Shapes and Images with HTML and CSS (https://css-tric
ks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/) , su CSS-
Tricks, 1º ottobre 2019. URL consultato il 23 marzo 2021.

18. ^ (EN) Masking Images in CSS Using the mask-image Property (https://www.digitalocean.
com/community/tutorials/css-masking-with-mask-image) , su DigitalOcean. URL
consultato il 23 marzo 2021.
19. ^ (EN) Masking vs. Clipping: When to Use Each (https://css-tricks.com/masking-vs-clippin
g-use/) , su CSS-Tricks, 7 giugno 2017. URL consultato il 23 marzo 2021.

20. ^ CodePen "About page" (https://web.archive.org/web/20120325042104/http://codepen.i

o/about) , Codepen.io, 17 marzo 2016.

21. ^ Thiago Pontes and Maxwell Da Silva "Building a Cross Platform 360-degree Video
Experience at The New York Times" (https://open.blogs.nytimes.com/2016/11/11/building
-a-cross-platform-360-degree-video-experience-at-the-new-york-times/) , The New York
Times, 11 novembre 2016.

22. ^ Kelly Kearsley, #50startups Update: How CodePen Raised $1 Million (in Five Minutes) (ht
tps://startupbend.com/articles/50startups-update-how-codepen-raised-1-million-in-five-
minutes/) , in Startupbend, 14 settembre 2015.

23. ^ (EN) codepen.io Traffic Statistics (https://www.similarweb.com/website/codepen.io#ov

erview) , su SimilarWeb. URL consultato il 16 novembre 2019.

Bibliografia

La storia dell'HTML (https://archive.org/details/MC_microcomputer-177/page/n315?view=

theater) (JPG), in MCmicrocomputer, n. 177, Roma, Technimedia, ottobre 1997, pp. 316-
320, ISSN 1123-2714.

Voci correlate

Applicazione HTML

CSS

Document Type Definition

Elemento HTML

HTML5

HTML Tidy

Linguaggio di markup

XHTML

MHTML

Altri progetti

Wikibooks contiene testi o manuali su HTML

 Wikizionario contiene il lemma di dizionario «HTML»

Wikiversità contiene risorse su HTML

Wikimedia Commons (https://commons.wikimedia.org/wiki/?uselang=it) contiene

immagini o altri file su HTML (https://commons.wikimedia.org/wiki/Category:HTML?usel
ang=it)

Collegamenti esterni

Sito ufficiale (https://www.w3.org/html/) , su w3.org.

Sito ufficiale (https://html.spec.whatwg.org/multipage/) , su html.spec.whatwg.org.

Sito ufficiale (https://w3c.github.io/html/) , su w3c.github.io.

(EN) HTML (https://www.britannica.com/technology/HTML) , su Enciclopedia Britannica,

Encyclopædia Britannica, Inc.

(EN) Opere riguardanti HTML (https://openlibrary.org/subjects/html) , su Open Library,

Internet Archive.

Repository sorgenti di HTML (https://github.com/whatwg/html) , su github.com.

Repository sorgenti di HTML (https://github.com/w3c/html) , su github.com.

Sito di segnalazione bug (https://github.com/whatwg/html/issues) , su github.com.

(EN) Specifiche ufficiali di HTML, versione 4 del W3C (https://www.w3.org/TR/html4/) , su

w3.org.

(EN) Specifiche ufficiali di HTML, versione 5 del W3C (https://html.spec.whatwg.org/multip

age/) , su html.spec.whatwg.org.

Guida HTML (https://www.html.it/guide/guida-html/) , su html.it.

LCCN (EN) sh95002791 (http://id.loc.gov/authorities/subjects/sh95002791)  ·
GND (DE) 4373477-7 (https://d-nb.info/gnd/4373477-7)  · BNF
(FR) cb12493600c (https://catalogue.bnf.fr/ark:/12148/cb12493600c) (data) (h
Controllo di autorità
ttps://data.bnf.fr/ark:/12148/cb12493600c)  · BNE (ES) XX539726 (http://catalo
go.bne.es/uhtbin/authoritybrowse.cgi?action=display&authority_id=XX539726)
(data) (http://datos.bne.es/resource/XX539726)

Portale Internet   Portale Telematica

Estratto da "https://it.wikipedia.org/w/index.php?
title=HTML&oldid=124776231"

Ultima modifica 14 giorni fa di Torque