Skip to content

Il linguaggio HTML

HTML (HyperText Markup Language) è il linguaggio di markup utilizzato per costruire le pagine web. Un linguaggio di markup consente di definire la struttura, o impaginazione, di un documento, ovvero gli elementi contenuti nel documento e la loro disposizione. HTML, nello specifico, consente di inserire all'interno di una pagina testi, immagini, tabelle, link, elementi multimediali e altro. HTML quindi non cura l'aspetto estetico di una pagina (di cui si occupa CSS), ma cura quello strutturale. Oltre ad HTML esistono anche altri linguaggi di markup come TeX, XML, SGML eccetera.

Inizio di una pagina web

<!DOCTYPE html>

La prima riga in assoluto in una pagina web indica il tipo di linguaggio utilizzato all'interno del file. È detto DOM (Document Object Model) e in questo caso la dicitura “html” dopo DOCTYPE indica che si sta utilizzando lo standard HTML5. La pagina html è salvata con un'estensione .html

I tag di HTML

Tutto il codice scritto dopo la riga <!DOCTYPE html> deve essere racchiuso da una coppia di tag. Un tag è un elemento fondamentale in una pagina web, che costituisce parte della sua struttura. Un tag può per esempio rappresentare un paragrafo, un titolo o anche delle informazioni sulla pagina web. I tag vanno sempre in coppia (a parte casi specifici che verranno indicati):

  • Tag di apertura: <nomeTag> (da notare le parentesi angolari "<" e ">")
  • Tag di chiusura: </nomeTag> (da notare la presenza di "/")

Ogni tag di apertura quindi andrà sempre accompagnato da un tag di chiusura, a parte specifici casi.

Il primo tag da inserire nella pagina web che racchiude tutto il codice della pagina è il tag <html>:

<!DOCTYPE html>
<html>

</html>

Il tag <html> conterrà qualsiasi codice scritto all'interno della pagina. Quindi, dovrà essere il primo tag di apertura e l'ultimo tag di chiusura presente all'interno della pagina. All'interno del tag <html> vanno inserite sempre due sezioni, una di head e una di body.

<!DOCTYPE html>
<html>
    <head>
    ....
    </head>
    <body>
    ....
    </body>
</html>

Il tag head

Il tag <head> contiene i cosiddetti metadati, ovvero “dati” che riguardano altri dati. Nel caso di una pagina web, i metadati specificano informazioni sulla struttura della pagina e il suo contenuto, come, ad esempio, il titolo della pagina (che appare come nome della tab nel browser), la lingua ed eventuali fogli di stile incorporati nella pagina (embedded) o collegati ad essa, così come il riferimento ad altri file o script. Questi dati non sono mostrati direttamente all'utente, ad eccezione del titolo della pagina web.

I tag che si possono inserire nel tag <head> sono:

  • <title>: racchiude il titolo della pagina web ed è obbligatorio;
  • <style>: specifica un foglio di stile embedded. Questo argomento è tratto più nel dettaglio nella parte di CSS;
  • <base>: specifica un URL base a cui portano tutti i link della pagina. Ogni link o immagine avrà un percorso relativo che indica dove si trova la risorsa a partirà dall'indirizzo base;
  • <link>: collega un foglio di stile esterno alla pagina web. Il suo uso è trattato nella parte di CSS;
  • <meta>: definisce i metadati sulla pagina web;
  • <script>: permette di inserire del codice Javascript embedded, ovvero direttamente nella pagina HTML;
  • <noscript>: comprende del testo da mostrare all'utente nel caso in cui abbia disabilitato l'esecuzione degli script Javascript.

Esempio di un <head>:

<head>
    <meta charset="UTF-8" />
    <title>Il mio sito web</title>
    <script>alert("Hello world in Javascript!")</script>
    <noscript>You have Javascript disabled :(</noscript>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <base href="https://www.ilmiositoweb.it/" />
</head>

In questo caso, se all'interno della pagina troveremo una immagine: <img src="img/mia_imm.jpg" /> a quel punto “mia_imm.jpg” sarà cercata all'indirizzo: https://www.ilmiositoweb.it/img/mia_imm.jpg, in quanto si concatena l'indirizzo relativo in src all'indirizzo specificato in <base>.

Il tag meta

All'interno del tag <meta> possono essere descritti dei metadati sulla pagina web grazie agli attributi, tra cui:

  • charset: specifica il set di caratteri utilizzati nella pagina web. Comunemente si usa lo standard UTF-8 (Unicode Transformation Format a 8 bit) che codifica i simboli Unicode su sequenze da 1 a 4 byte. Questo tipo di formato permette di risparmiare spazio nella definizione dei caratteri che si usano più spesso, ovvero nei caratteri facenti parti della codifica ASCII. Questi, infatti, a differenza di altre codifiche, tipo UTF-16, con UTF-8 occupano solo 1 byte;
  • name: Specifica il nome per un metadato;
  • content: definisce il contenuto del metadato riferito con il nome in name;
  • http-equiv: include delle direttive a livello di header della risposta della pagina web. Ad esempio, può contenere il tempo oltre il quale la pagina web si può considerare scaduta, oppure ogni quanto la pagina deve essere ricaricata, o ancora se la pagina deve essere salvata in cache oppure no. Come accade per name, deve essere associato ad un content.

Esempi di utilizzo del tag <meta>:

<head>
    <!-- Definisce la codifica di caratteri a UTF-8 -->
    <meta charset="UTF-8" />
    <!-- Definisce le parole-chiave per i motori di ricerca -->
    <meta name="keywords" content="HTML, guide" />
    <!-- Dà una descrizione del contenuto della pagina web -->
    <meta name="description" content="Guida base di HTML in italiano, tratta dal sito di W3C" />
    <!-- Definisce il nome dell'autore della pagina web -->
    <meta name="author" content="Erica Ceriotti" />
    <!-- Indica la porzione visibile della pagina web sullo schermo di un dispositivo. width=device-width dice che la pagina deve assumere la larghezza dello schermo su cui è mostrata, initial-scale indica il livello iniziale di zoom applicato alla pagina-->
    <meta name="view-port" width="width=device-width, initial-scale=1.0" />
</head>

Per saperne di più sulla parte di viewport, visitare la pagina del W3C dedicata

Il tag <body>

L'ultima sezione della struttura base di una pagina web riguarda il “body”, ovvero il corpo della pagina, che costituisce la parte visibile della pagina web con titoli, paragrafi, immagini, link eccetera. Tutti i tag che saranno formattati dal browser per essere mostrati all'utente finale, dovranno essere contenuti tra l'apertura e la chiusura del tag <body>.

Ad esempio:

<body>
    <h1>Questa &egrave; la mia pagina web</h1>
    <p>Hello world da un paragrafo scritto in HTML!</p>
</body>

Il codice scritto sar' interpretato dal browser e mostrato all'utente differenziando il titolo dal paragrafo:

Questa è la mia pagina web

Hello world da un paragrafo scritto in HTML!

I tag descritti in questa guida riguarderanno l'inserimento di paragrafi, titoli e immagini nella parte di HTML di base e figure, link, elenchi e tabelle nella parte di HTML avanzato.