HTML: cos'è, come funziona e a cosa serve

pubblicato in Programmazione web
Pubblicato da Boolean
· 14/06/2021 · 13 minutes read

È praticamente impossibile parlare di web, della sua storia e del suo sviluppo senza citare HTML. Questo linguaggio, nato a fine anni '80, è quello che permette ancora oggi di costruire pagine web - le stesse che quotidianamente visitiamo dai nostri dispositivi. HTML è il linguaggio con cui possiamo "spiegare" ai nostri dispositivi cosa vogliamo visualizzare: testi, immagini, link... tutto ciò che compone una pagina web. In combinazione con altri linguaggi - come CSS - è possibile scrivere pagine semplici o complesse, interattive, che rispondono in maniera attiva alle interazioni dell'utente e che si adattano alla dimensione dello schermo del dispositivo dal quale le stiamo guardando.

Per capire HTML e tutti i suoi aspetti, bisogna rispondere a delle domande: cos'è HTML? Come funziona HTML? Come è stato pensato e come si è evoluto nel tempo? Ma anche come lo si può imparare, e quali sono le sue caratteristiche che lo rendono un linguaggio da conoscere ancora oggi, a trent'anni dalla sua nascita? Scopriamolo insieme in questo articolo.

Cos'è HTML: la sua origine

HTML è un acronimo che significa letteralmente "Hyper Text Markup Language", ovvero "Linguaggio a marcatori per ipertesti". Si può spiegare in maniera più semplice: HTML è un linguaggio che permette di impaginare e formattare pagine collegate fra di loro attraverso link - ovvero, i siti web. Ipertesto è un termine ormai datato (ma ancora valido) per definire l'albero di navigazione che collega le pagine web: un flusso infinito di pagine collegate fra di loro attraverso dei link che permettono di spostarsi da un contenuto all'altro.

A oggi, non è sufficiente usare solo HTML per realizzare contenuti web: le esigenze sono cambiate, ai siti web serve qualcosa di più dei soli contenuti testuali e quindi entrano in gioco altri linguaggi - come CSS, Javascript e tanti altri - che consentono di scrivere pagine ricche e complete sotto ogni punto di vista. Ma perché ancora usiamo HTML e perché è insostituibile? Perché ancora risponde all'esigenza di riuscire a "tradurre" e condividere del testo mantenendo la formattazione e di conseguenza il significato delle sue parti. Pensate ad una pagina di enciclopedia e a come è costruita: c'è un titolo, dei paragrafi, magari delle liste o elenchi puntati, degli elementi sottolineati o evidenziati. Questi stessi criteri permettono di scrivere pagine che contenessero elementi simili fra di loro, utilizzando i marcatori (la M di HTML sta per quello), e quei marcatori sono i <tag>!

L'esempio dell'enciclopedia è particolarmente adatto per spiegare l'idea dietro le prime pagine web anche per un altro motivo: il creatore di HTML intendeva proprio creare questo linguaggio per costruire delle enciclopedie di facile lettura, visto che sarebbe stato finalmente possibile saltare da una voce all'altra proprio utilizzando i link ipertestuali. Erano appunto arrivati quasi gli anni '90, e Tim Berners-Lee stava per scrivere la storia di Internet.

HTML la storia

Nel 1980, un fisico del CERN di Ginevra propose la costruzione di un sistema unico per raccogliere la documentazione di tutti gli strumenti hardware e software in uso presso il centro di ricerca, in modo tale da avere un luogo centralizzato dove trovare informazioni collegate fra di loro. Quel ricercatore era Tim Berners-Lee, e il sistema da lui proposto si chiamava ENQUIRE: esso era concettualmente simile al World Wide Web come lo intendiamo oggi, ma aveva un limite. Il suo funzionamento era più simile a quello di Wikipedia che al web stesso: le informazioni erano centralizzate su un unico computer, ed era possibile scrivere nuove pagine a patto che esse fossero collegate a schede pre-esistenti. Era quindi possibile espandere la documentazione, ma a patto che ci fosse un link diretto fra contenuti che già erano stati scritti.

Il World Wide Web di oggi nasce come evoluzione di questo sistema, per andare oltre ai limiti imposti da ENQUIRE e nel tentativo di usare l'intera rete Internet per collegare documenti, che a quel punto potevano essere indipendenti fra di loro. Fu necessario quindi sia costruire un browser web per navigare fra queste pagine, ma soprattutto un linguaggio che permettesse di costruirle: nel 1990 nasce HTML. La prima versione comprendeva 18 tag - di cui 11 tutt'ora in uso - e la sua struttura era piuttosto semplice e lineare. Il browser web leggeva il codice: i tag comunicavano in che modo formattare (e quindi mostrare a schermo) quello che era contenuto all'interno del tag stesso.

Per esempio, il codice <h1>Ciao mondo!</h1> permette di far comparire un titolo (h sta per heading, 1 per la sua dimensione - la più grande e più importante nella lettura della pagina). Il browser legge quindi il tag e il suo contenuto, e traduce a schermo il codice usando i criteri specificati dall'HTML. Questo ha permesso di costruire pagine con una struttura simile fra di loro e soprattutto replicabile seguendo uno standard, e nel giro di pochi anni furono aggiunti via via sempre più tag ed elementi per consentire la creazione di pagine contenenti immagini, elementi interattivi, form, pulsanti, tabelle e tanto altro. HTML si è quindi trasformato in un linguaggio molto completo ma in continuo mutamento, che oggi viene mantenuto dal World Wide Web Consortium (W3C), una associazione non governativa che si occupa di implementare nuove funzioni per rendere il web sempre più libero e accessibile.

HTML come funziona

Abbiamo visto che alla base dell'HTML ci sono i cosiddetti tag, che corrispondono a determinati tipi di contenuto. Ogni tag può avere degli attributi specifici, cosa che permette di costruire pagine diverse fra di loro e che rispondano alle necessità di chi le scrive. Le pagine in HTML vanno pensate come la struttura di un albero: via via che si ramifica, si possono trovare più o meno elementi che costruiscono la pagina stessa seguendo una gerarchia ben precisa.

Prendiamo un pezzo di codice come esempio:

<html>
    <head>
        <title>Esempio di codice</title>
    </head>
    <body>
        <p>Ciao mondo!</p>
    </body>
</html>

Seguiamo la struttura tag dopo tag:

<html> indica l'inizio della parte di codice che verrà espressa usando il linguaggio HTML. Nel caso di questo esempio è tutto scritto in HTML, quindi il tag viene chiuso proprio alla fine usando la voce </html>.

<head> indica l'header della pagina, che racchiude delle informazioni importanti per il funzionamento della pagina ma che noi non possiamo vedere dal dispositivo. L'header a sua volta contiene un <title>, un titolo, che è quello rappresentativo della pagina stessa e di quello che è il suo contenuto.

Una volta chiusa l'intestazione, si passa al corpo della pagina, cioè il <body>. Al suo interno troviamo il tag <p> per scrivere paragrafi di testo, con all'interno il contenuto di quello che vogliamo scrivere. Il risultato di tutto questo sarebbe una pagina bianca con scritto "Ciao mondo!", e intitolata "Esempio di codice". Questa è una semplice dimostrazione di come il linguaggio HTML permetta in maniera piuttosto schematica di scrivere pagine che verranno mostrate a tutti nella stessa maniera, visto che i vari browser web sono pensati per interpretare i tag più o meno ugualmente ogni volta. Il solo HTML però non basta: se si vogliono scrivere pagine più complesse, è necessario combinarlo ad altri linguaggi di markup, come ad esempio il CSS.

HTML e CSS cosa sono

Cosa succede se vogliamo costruire un sito web complesso? Che abbia elementi interattivi, animati, magari un database per raccogliere dati, o che possa "parlare" con l'hardware del dispositivo dal quale ci colleghiamo - tipo la fotocamera dello smartphone? In questi casi, il solo HTML non basta, ed è necessario utilizzare altri linguaggi pensati per il web. Per poter migliorare la resa visiva dei tag HTML, è possibile usare CSS: i "fogli di stile a cascata" sono stati una delle immediate evoluzioni per i siti web, che hanno permesso di cominciare a costruire pagine molto più ricche e complesse rispetto a quelle ottenibili con il solo HTML.

Il CSS permette di separare il contenuto dalla sua rappresentazione. Pensiamo ai libri: il loro contenuto tendenzialmente non cambia, ma ogni ristampa magari ha un formato diverso, un font differente, un numero di caratteri per pagina maggiore o minore. Lo stesso parallelismo si può usare anche per questo linguaggio: CSS non detta il contenuto, ma soltanto come esso viene rappresentato. È grazie a CSS ad esempio se i siti web possono adattarsi in maniera dinamica passando da un computer allo schermo dello smartphone, ad esempio: sebbene i due display abbiano dimensioni totalmente diverse, è possibile scrivere una sola pagina pensata per entrambi i dispositivi, ma che semplicemente si adatta in base al contesto - seguendo delle regole.

Le regole del CSS possono essere specificate direttamente all'interno della pagina HTML stessa, racchiudendole con un tag <style> nell'intestazione, oppure collegando dei file esterni contenente un elenco di tutte le personalizzazioni. HTML e CSS convivono quindi perché il primo si occupa di settare la struttura della pagina, mentre il secondo di come essa verrà visualizzata dall'utente finale. La sola combinazione di questi due linguaggi di markup permette oggi di costruire pagine incredibilmente complesse e ricche, ed è per questo che sono due delle tecnologie chiave per la scrittura di pagine web.

HTML cosa sono i div

Nel momento in cui viene introdotto CSS per stilizzare le pagine HTML, si rende necessario introdurre un altro tag fondamentale per permettere al browser di capire quando applicare una certa personalizzazione grafica all'interno della pagina. Parliamo del tag <div>, che serve appunto a delimitare delle specifiche porzioni di codice (creando dei veri e propri contenitori di tag che successivamente possono essere stilizzate attraverso delle regole CSS.

Ipotizziamo di costruire una pagina con due paragrafi di testo: con il solo HTML non avremmo praticamente modo rendere questi blocchi diversi fra di loro da un punto di vista grafico. Qui entra in gioco il tag <div>: andando a delimitare i due paragrafi e dando loro un attributo è possibile anche definire le regole con le quali devono essere mostrati a schermo. Proviamo a fare un esempio:

<html>
    <head>
        <style>
            .rosso {
                color: white;
                background-color: red;
                text-align: left;
            }
            .azzurro{
                color: black;
                background-color: lightblue;
                text-align: right;
            }
        </style>
    </head>
    <body>

        <div class="rosso">
            <p>Primo blocco di testo</p>
        </div>

        <div class="azzurro">
            <p>Secondo blocco di testo</p>
        </div>

    </body>
</html>

Non fatevi spaventare da questo codice: per capirlo basta seguirlo riga per riga, e porre attenzione ai vari elementi. In questo caso, all'interno del tag <style> vengono definite le regole CSS: .rosso significa che i paragrafi con classe "rosso" avranno lo sfondo rosso e il testo bianco a sinistra, mentre .azzurro analogamente avrà sfondo azzurro e testo nero a destra. Il parametro background-color determina letteralmente il colore di sfondo, mentre il parametro text-align si occupa di impostare l'allineamento del testo (a sinistra, al centro oppure a destra).

Definite le regole, a questo punto incontriamo il contenuto: i due paragrafi di testo sono rispettivamente "recintati" da un tag <div>, la cui funzione è quella di dire al browser quei contenuti sono accorpati e che a loro deve essere applicata una personalizzazione. Il primo paragrafo ha la classe "rosso", quindi gli verrà applicato il primo set di regole che avevamo impostato in precedenza, mentre il secondo paragrafo seguirà lo stile di "azzurro". Il risultato saranno due righe di testo rispettivamente con sfondo rosso e sfondo blu, allineate una a sinistra e una a destra.

È sempre importante chiudere sempre i tag: se non viene correttamente delimitato un pezzo di codice, la sua personalizzazione potrebbe essere applicata al resto della pagina oppure creare problemi visivi. Per questo è molto importante porre attenzione a quello che si apre e a quello che si chiude.

Perché HTML non è un linguaggio di programmazione

Abbiamo finora parlato di HTML (e CSS) come di linguaggi di markup. Perché HTML non è un linguaggio di programmazione come tanti altri che si conoscono? Perché appunto HTML descrive al browser com'è fatta la struttura di una pagina, e niente più. Un linguaggio di programmazione ha invece un ruolo funzionale: esso risolve cicli di codice seguendo una logica fatta di if e else, può svolgere calcoli matematici, può manipolare dati e variabili. È il browser web che è programmato per capire la struttura delle pagine scritte in HTML, ma il codice in sé va soltanto a descrivere la struttura della pagina e del suo contenuto. Per questo motivo non si può definire HTML un linguaggio di programmazione - come ad esempio lo sono JavaScript o C++.

Dove scrivere testo HTML

Per scrivere una pagina in HTML, è necessario utilizzare un software (un ambiente di sviluppo, noto anche come IDE) che permetta di andare effettivamente poi a salvare il codice scritto nel formato di pagina giusto (che convenientemente si chiama anch'esso HTML). HTML è uno standard aperto e gratuito e non serve spendere soldi per iniziare a costruire pagine, anzi: su vostro computer avete già preinstallato un programma che vi consente di iniziare a familiarizzare con il codice.

Su Windows, lo stesso Blocco Note permette di scrivere pagine HTML e di salvarle in questo formato. Non è il software più comodo per farlo perché la sintassi non verrà evidenziata e in generale l'interfaccia è un po' troppo semplice, ma potete usarlo per un primo tentativo. Il suo equivalente su Mac si chiama TextEdit, e permette più o meno di fare la stessa cosa. Una volta scritto il codice, ricordetevi di salvarlo in formato .HTML e di aprire il file ottenuto con un qualsiasi browser web - potete usare Mozilla Firefox, Google Chrome, Safari, Microsoft Edge... insomma, vanno bene tutti!

Se poi volete passare a qualcosa di più completo ma senza spendere un centesimo potete scaricare Visual Studio Code, un software realizzato da Microsoft che funziona sia su Windows che su Mac (e anche Linux!). La comodità di questo software è che è pensato per scrivere codice in una moltitudine di linguaggi: la sintassi dei tag verrà correttamente evidenziata con dei colori, cosa che permette ad esempio di capire se si è chiuso correttamente un tag o meno. Potrete anche usarlo per scrivere file CSS e tanto altro, per costruire le vostre prime pagine web scritte interamente da zero.

Come imparare HTML

Essendo uno standard aperto e conosciuto, è possibile imparare HTML grazie alla miriade di risorse online gratuite e a pagamento, ma anche con libri, tutorial su YouTube e tanto altro. Un modo intelligente per farlo è in combinazione con il CSS, e soprattutto seguendo un corso completo che vada oltre le semplici basi affrontate all'interno di questo articolo - e che possa portare, nel giro di poco, alla realizzazione di pagine complesse e belle da vedere. Se siete quindi alla ricerca di un corso completo e gratuito, vi consigliamo il FundamentalsCamp di Boolean: attraverso 15 ore di corso strutturate in 35 lezioni, è possibile apprendere le basi di HTML e CSS, per capire anche se il mondo della programmazione può fare per te.

FundamentalsCamp è propedeutico al corso completo Boolean, che attraverso 700 ore di lezioni in diretta - affiancati da professori e tutor - permette di diventare Full Stack Web Developer: ovvero sviluppatori web in grado di costruire pagine web ma anche il motore che le alimenta. Pensate a servizi complessi come i siti di streaming o i social network: oltre ad avere una "facciata" - fatta di tante pagine web che si adattano ai dispositivi che usiamo - hanno dei database e dei meccanismi invisibili all'utente ma che permettono al sito web stesso di funzionare. Il corso per Full Stack Web Developer di Boolean dura sei mesi, durante le quali alla teoria viene affiancata tanta pratica su esercizi reali, utili poi ad affacciarsi al mondo del lavoro e trovare una professione come sviluppatore web.

Read next

Sofia, la teacher Boolean con la passione per l'insegnamento

Tenacia, intraprendenza e voglia di mettersi in gioco: quando la programmazione è donna.

Qui in Boolean pensiamo che la nostra storia sia l'insieme...

Boolean #booleanpeople 12/06/2020 · 3 minutes read