Introduzione all'HTML
HTML è un linguaggio di markup per creare siti web. È composto da elementi che strutturano testi, immagini e altri contenuti visualizzati nel browser.
HTML sta per HyperText Markup Language. È il linguaggio di markup standard utilizzato per creare pagine web e applicazioni visualizzabili in un browser. Sviluppato all'inizio degli anni '90, combina l'Hypertext (che definisce i collegamenti tra le pagine web) e il Markup (che descrive la struttura del contenuto tramite tag).
HTML non è un linguaggio di programmazione — non ha logica né calcoli. Al contrario, descrive la struttura: quali parti di una pagina sono intestazioni, paragrafi, elenchi, collegamenti o immagini. In una tipica pagina web, tre tecnologie lavorano insieme:
- HTML fornisce la struttura e il contenuto (questo capitolo).
- CSS controlla la presentazione — colori, layout, caratteri.
- JavaScript aggiunge comportamento e interattività.
I tag HTML vengono utilizzati per definire gli elementi HTML. Un elemento HTML è solitamente composto da un tag di apertura e un tag di chiusura, con il contenuto inserito nel mezzo. I browser leggono i tag per creare documenti HTML e visualizzarne il contenuto sullo schermo. Alcuni dei tag HTML di base includono <html>, <head>, <title>, <body>, da <h1> a <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> e molti altri.
Il Tuo Primo Documento HTML
Ecco una pagina HTML completa e minimale. Digitala in qualsiasi editor HTML per testo semplice, salvala come file con estensione .html e aprila in qualsiasi browser — vedrai un'intestazione e un paragrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Quando apri questo file, il browser analizza il markup (legge i tag e costruisce un albero di elementi) e poi lo renderizza (disegna il risultato sullo schermo). Il tag <h1> diventa un'intestazione grande e il tag <p> diventa un normale paragrafo — non vedi mai le parentesi angolari stesse, solo il loro effetto. Aggiungi CSS e JavaScript in seguito per stilizzare e animare lo stesso contenuto.
Versioni di HTML
HTML fu sviluppato per la prima volta dal fisico britannico Tim Berners-Lee nel 1990. Da allora, sono esistite molte versioni di HTML.
| Versione | Anno |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
Alcune note per facilitare la lettura della tabella. HTML 4.01 (1999) è rimasta la versione dominante per circa un decennio, quindi gran parte del web è stata costruita su di essa per anni. XHTML 1.0 (2000) ha riformulato HTML utilizzando regole XML più rigide — ad esempio, ogni tag doveva essere chiuso e in minuscolo — ma la sua rigidità non ha mai preso piede completamente nella scrittura quotidiana. HTML5 è stato pubblicato come Raccomandazione stabile del W3C nel 2014 (una prima milestone del 2012 era solo una bozza) ed è la versione che usi oggi.
Dal 2014, HTML non viene più rilasciato in versioni numerate discrete. Viene invece mantenuto come HTML Living Standard di WHATWG — una singola specifica aggiornata continuamente man mano che vengono adottate nuove funzionalità. In pratica, questo è ciò che oggi si intende con "HTML": non c'è nessun "HTML6" in arrivo, solo uno standard in continua evoluzione. Quando le persone dicono "HTML5" oggi, di solito intendono questa versione moderna e vivente del linguaggio.
Concetti Base: Elementi, Tag e Attributi
I tre mattoni fondamentali di HTML sono elementi, tag e attributi. Un elemento è l'unità strutturale principale di una pagina web. I tag segnano dove un elemento inizia e finisce, mentre gli attributi forniscono informazioni aggiuntive su un elemento. Le prossime due sezioni esaminano in dettaglio tag e attributi.
Tag HTML
I tag HTML vengono utilizzati per strutturare il contenuto di un sito web (testo, collegamenti ipertestuali, immagini, media, ecc.). I tag non vengono visualizzati nei browser, "istruiscono" soltanto il browser su come mostrare il contenuto della pagina web.
Esistono oltre 100 tag in HTML, che puoi trovare nel nostro tutorial HTML.
I tag HTML sono scritti tra parentesi angolari (es. <html>).
La maggior parte dei tag HTML viene in coppia, come i tag <p> </p>. Il primo tag di una coppia è detto tag di apertura (o iniziale), e il secondo è il tag di chiusura (o finale). Le informazioni vengono scritte tra i tag di apertura e di chiusura.
Tuttavia, esistono tag non accoppiati, o vuoti, che hanno solo un tag di apertura (ad esempio, <img>).
Consideriamo un esempio.
Se hai bisogno di definire un paragrafo (che è un elemento) devi usare il tag <p>. Il contenuto del paragrafo viene scritto tra i tag di apertura (<p>) e di chiusura (</p>).
Esempio
Il markup seguente inserisce un singolo paragrafo all'interno di una pagina minimale:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paragraph example</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>Il browser nasconde i tag <p> e </p> stessi e visualizza solo il testo tra di essi — "This is a paragraph." — come blocco di testo.
Attributi HTML
Gli attributi HTML vengono aggiunti a un elemento per fornire informazioni aggiuntive su di esso. Gli attributi vengono scritti all'interno del tag di apertura e seguono la sintassi name="value": il nome indica cosa si sta impostando, e il valore (tra virgolette) indica a cosa impostarlo.
Ad esempio, il tag <img> usa l'attributo src per puntare a un file immagine, width e height per dimensionarla, e alt per fornire testo alternativo per gli screen reader e per i casi in cui l'immagine non si carica:
<img src="logo.png" width="200" height="100" alt="Company logo">Qui quattro attributi sono impostati su un unico elemento. Un singolo elemento può avere tutti gli attributi di cui ha bisogno, separati da spazi. Puoi saperne di più nel capitolo sugli Attributi HTML.
Struttura di un Documento HTML
La dichiarazione <!DOCTYPE html> specifica la versione HTML utilizzata nel documento. Ogni documento HTML dovrebbe iniziare con questa dichiarazione affinché i browser possano renderizzare la pagina in conformità con gli standard HTML.
Esistono diversi tipi di <!DOCTYPE> definiti per ciascuna versione HTML.
Tutto il contenuto della pagina web è scritto tra i tag <html> </html>. L'elemento <html> viene usato per informare i browser che si tratta di un documento HTML.
L'elemento <head> contiene metadati (dati relativi al documento HTML), set di caratteri, titolo del documento, stili, ecc. Questi dati non vengono mostrati agli utenti.
All'interno di <head>, il tag più copiato è il meta tag viewport. Aggiungere <meta name="viewport" content="width=device-width, initial-scale=1"> dice ai browser mobili di adattare la larghezza della pagina a quella del dispositivo invece di ridurre un layout desktop — senza di esso, la pagina appare minuscola sugli smartphone.
L'elemento <title> mostra il titolo del sito web nella scheda del browser quando la pagina viene caricata. Il titolo è scritto tra i tag <title> </title>.
L'elemento <body> contiene il contenuto della pagina web (testo, immagini, video, ecc.). Il contenuto è scritto tra i tag <body> e </body>.
Gli elementi di intestazione contengono diversi tipi di intestazioni. Esistono sei livelli di intestazione — da <h1> a <h6>, dove <h1> è il tag più importante e <h6> il meno importante.
L'elemento <p> contiene paragrafi di testo. Il contenuto è scritto tra i tag <p> e </p>.
Esempio
Introduzione all'HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Risultato
Per iniziare a scrivere codice HTML per il tuo sito web avrai bisogno di un editor. Parliamo degli editor HTML nel prossimo capitolo.