MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

HTML (Hypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.

Ma cos'è veramente l'HTML?

HTML non è un linguaggio di programmazione; è un linguaggio basato sui markup, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di elementi, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei tags può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:

My cat is very grumpy

Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:

<p>My cat is very grumpy</p>

Anatomia di un elemento HTML

Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.


Le parti principali dell'elemento sono:

  1. Il tag di apertura: è il nome dell'elemento (in questo caso, p), incluso tra il segno di minore e il segno di maggiore. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.
  2. Il tag di chiusura: ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.
  3. Il contenuto: Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.
  4. L'elemento: Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.

Gli elementi possono anche avere attributi, come nell'esempio che segue:

Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, class è il nome dell'attributo, e editor-note è il valore dell'attributo. L'attributo class permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.

Un attributo dovrebbe sempre avere:

  1. Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)
  2. Il nome dell'attributo, seguito dal segno di uguale
  3. Il valore dell'attributo incluso tra doppi apici.        

Elementi annidati

E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata nesting (annidamento). Se volessimo affermare che "The cat is very grumpy", potremmo racchiudere la parola "very" in un elemento <strong>, che indica che la parola deve essere fortemente enfatizzata:

<p>My cat is <strong>very</strong> grumpy.</p>

Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento <p>, poi l'elemento <strong>, perciò dobbiamo chiudere l'elemento <strong> per primo, poi l'elemento <p>. L'esempio che segue non è corretto:

<p>My cat is <strong>very grumpy.</p></strong>

Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!

Elementi vuoti

Alcuni elementi non hanno contenuto, e sono chiamati elementi vuoti. Prendiamo l'elemento <img> che abbiamo nel nostro HTML:

<img src="images/firefox-icon.png" alt="My test image">

Contiene due attributi, ma non c'è il tag di chiusura </img> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.

Anatomia di un documento HTML

Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio index.html (che abbiamo incontrato per la prima volta nell'articolo Dealing with files):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Abbiamo:

  • <!DOCTYPE html> — Il doctype. Nella notte dei tempi, quando l'HTML era giovane (circa nel 1991/2), doctypes avevano lo scopo di raggruppare un insieme di regole che la pagina HTML doveva seguire per essere considerata buon HTML, come poteva essere il controllo automatico degli errori e altre cose utili. Tuttavia oggi nessuno se ne interessa e sono ormai solo un artefatto storico che necessitano di essere inclusi perchè tutto funzioni correttamente. Per ora, questo è tutto ciò che occorre sapere.
  • <html></html> — l'elemento <html>. Questo elemento racchiude tutti i contenuti dell'intera pagina, ed è talvolta noto come elemento radice.
  • <head></head> — l'elemento <head>. Questo elemento fà da contenitore per tutte le cose che si vuole includere nella pagina HTML che non siano il contenuto che si vuole mostrare ai visitatori della pagina. Tra queste ci sono cose come keywords e una descrizione della pagina che si vuole appaia nei risultati di ricerca, CSS per lo stile dei contenuti, dichiarazione del set di caratteri e altro.
  • <meta charset="utf-8"> — questo elemento imposta il set di caratteri che il documento deve usare su UTF-8, che include la maggior parte dei caratteri della stragrande maggioranza delle lingue umane scritte. Essenzialmente può gestire qualsiasi contenuto testuale che può essere inserito. Non c'è motivo per non impostarlo, e può evitare di incorrere in problemi in seguito.
  • <title></title> — l'elemento <title>. Imposta il titolo della pagina, che è il titolo che appare nella scheda del browser in cui è caricata la pagina. E' anche usato per descrivere la pagina quando viene aggiunta ai preferiti.
  • <body></body> — l'elemento <body>. Contiene tutto il contenuto che si vuole mostrare agli utenti web quando visitano la pagina, che si tratti di testo, immagini, video, giochi, tracce audio riproducibili o qualsiasi altra cosa.

Immagini

Rivolgiamo ancora la nostra attenzione all'elemento <img>:

<img src="images/firefox-icon.png" alt="My test image">

Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo src (source) che fa questo, contenendo il percorso del file immagine.

Abbiamo anche incluso l'attributo alt (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:

  1. Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt
  2. Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo src per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:

Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."

Prova subito a trovare un testo adatto per l'alt delle tua immagine.

Nota: Scopri di più sull'accessibilità al link MDN's Accessibility landing page.

Marcatura del testo

Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.

Intestazioni

Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, <h1><h6> sebbene in genere se ne usino da 3 a 4 al massimo:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento <img>.

Paragrafi

Come spiegato sopra, gli elementi <p> sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:

<p>This is a single paragraph</p>

Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo What should your website look like?) in uno o più paragrafi, direttamente sotto l'elemento <img>.

Liste

Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:

  1. Le liste non ordinate sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento <ul>.

  2. Le liste ordinate sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento <ol>.

Ogni articolo all'interno delle liste è inserito all'interno di un elemento <li> (list item).

Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Potremmo modificare la marcatura così:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.

I collegamenti

I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — <a> — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:

  1. Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".
  2. Includere il testo in un elemento <a>, come segue:
    <a>Mozilla Manifesto</a>
  3. Dare all'elemento <a> un attributo href, come segue:
    <a href="">Mozilla Manifesto</a>
  4. Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Si potrebbero ottenere risultati imprevisti se si omettono https:// o http://, che sono chiamati protocollo, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.

href potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per hypertext reference.

Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.

Conclusione

Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link view it here):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio finished example code che trovi su GitHub.

Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link HTML Learning topic.

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, KetiJ, jwhitlock
Ultima modifica di: mdnwebdocs-bot,