Cos’è HTML?

Cos'è? - Miniatura della rubrica di marcogarosi.it

Se sei un incallito Internauta, non puoi non conoscere HTML. Forse non l’hai mai sentito nominare, magari ne hai letto distrattamente il nome. Ad ogni modo, HTML costituisce le fondamenta del Web. Pressoché qualsiasi pagina tu veda navigando in Internet è basata su questo linguaggio. Ecco, quindi, cos’è HTML.

Come ben sai, qualunque utente comune, quando accede alla rete delle reti, si aspetta di potersi spostare tra diverse pagine. Ognuna è solitamente caratterizzata da diversi elementi: un’intestazione, un contenuto, un menù, probabilmente dei pulsanti e delle caselle di testo. In breve, l’utente comune fruisce dei contenuti per via grafica.

A cosa serve HTML?

Ebbene, dal momento che esistono decine – se non di più – di browser differenti, si è rivelata necessaria la creazione di uno standard. Se non ci fosse, infatti, ogni azienda potrebbe sviluppare una soluzione proprietaria, rendendo difficoltosa la fruizione di Internet. Grazie ad HTML – che è l’acronimo di HyperText Markup Language -, questo problema viene (quasi) completamente debellato.

HTML, infatti, è un linguaggio di markup (attenzione: non di programmazione!) che viene sfruttato per formattare e impaginare i documenti presenti sul Web. Tutto il contenuto è racchiuso tra i cosiddetti tag, ossia dei marcatori. Qualsiasi elemento deve essere delineato con l’uso dei tag.

Come si usa HTML?

Potresti chiederti, a questo punto, perché si è scelto – e si sceglie – questo linguaggio. La risposta è che, ad oggi, è semplicemente la soluzione migliore per realizzare pressoché qualsiasi cosa in rete.

HTML, infatti, è di pubblico dominio e ha una sintassi standardizzata (sebbene non completamente supportata da tutti i browser); più precisamente, l’ente che si occupa di stabilirne i tag, il funzionamento e il comportamento, si chiama World Wide Web Consortium (abbreviato in W3C).

Ecco quindi che puoi capire come si usa HTML. Per scriverne codice è sufficiente un comune editor di testo, purché permetta di salvare i file con l’estensione .htm o .html. La maggior parte dei tag sono caratterizzati da un’apertura e da una chiusura e, al loro interno, contengono testo, immagini, video o altri tag; altri, invece, non devono essere necessariamente chiusi.

<p>Io sono un semplice paragrafo. Ciao!</p>
<br>

Tuttavia, come forse hai già intuito, HTML non si esaurisce qui. Dal momento che la stragrande maggioranza del Web che vedi quotidianamente si basa su di lui, è fondamentale la presenza di elementi nascosti. Mi spiego meglio: pensa, ad esempio, a Google. Quando esegui una ricerca vedi un elenco di tutte le pagine che, secondo gli algoritmi sviluppati a Mountain View, corrispondono a quanto stai cercando. Ecco, i motori di ricerca si avvalgono sia del contenuto della pagina (in altre parole, del testo) che di altri componenti “invisibili”. Questi ultimi, per esempio, forniscono una descrizione della pagina, dell’autore, del programma utilizzato per crearla, ecc.

Come? Ebbene, ogni pagina è solitamente divisa in due macro-sezioni: la prima è detta head e la seconda body. Come forse hai già capito, nell’head viene inserito tutto ciò che non riguarda la user experience; al contrario, nel body è presente il vero e proprio contenuto.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, world!</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Ciao! Io sono un paragrafo!</p>
    </body>
</html>

Come funziona HTML (e come si integra con CSS e JS)?

HTML, in passato, veniva usato per creare pagine Web complete: questo significa che tutto, dal contenuto alla grafica, era realizzato con il linguaggio a marcatori. Con la sua evoluzione, però, la tendenza è divenuta quella di disaccoppiare il più possibile la grafica dall’interattività e dal testo (e dagli elementi multimediali).

Per farlo, ad oggi, si sfruttano almeno altre due tecnologie: CSS e JavaScript. La prima, acronimo di Cascading Style Sheets, ha l’unico – ma fondamentale – compito di descrivere l’aspetto grafico; i colori, la posizione e le dimensioni degli elementi (e altro ancora) sono racchiusi nei CSS. JavaScript, come puoi leggere nell’articolo dedicato, si occupa di aggiungere interattività alla pagina: gestisce i pulsanti, le animazioni, le richieste al server effettuate in background, ecc. HTML, quindi, si “riduce” alla pura descrizione del contenuto: questo aumenta notevolmente la manutenibilità e la leggibilità del codice.

CSS e JavaScript esterni

Ora, forse, ti starai chiedendo come mettere insieme tutti questi tasselli. Dunque, è molto più semplice di quanto tu possa credere: è sufficiente inserire all’interno del tag head i riferimenti ai file CSS (.css) e JavaScript (.js). Il browser dell’utente, al caricamento della pagina, provvederà autonomamente a scaricarli dal server, per poi collegare il tutto.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS e JavaScript esterni</title>
        <script src="https://www.marcogarosi.it/fileJavascript.js"></script>
        <link rel="stylesheet" href="https://www.marcogarosi.it/fileCss.css"/>
    </head>
    <body>
        <p>Ciao! Questa pagina HTML integra file CSS e JavaScript esterni!</p>
    </body>
</html>

CSS e JavaScript interni

Non sempre, però, gli sviluppatori vogliono creare dei file separati. Ecco perché, grazie ad HTML, possono inserire sia codice CSS che JavaScript direttamente all’interno del loro documento. Come? Utilizzando i tag appositi!

<!DOCTYPE html>
<html>
    <head>
        <title>CSS e JavaScript esterni</title>
        <script>
            alert("Ciao! Io sono un alert contenuto in uno script interno!");
        </script>
        <style>
            p {
                color: red;
            } 
        </style>
    </head>
    <body>
        <p>Ciao! Questa pagina HTML integra file CSS e JavaScript esterni!</p>
    </body>
</html>

Perché HTML è così diffuso?

Nelle precedenti righe ho provato a spiegarti cosa sia HTML in modo conciso, senza però rinunciare a descriverti i suoi tratti salienti. In conclusione, quindi, posso affermare che è così popolare poiché è semplice, veloce, intuitivo, standardizzato e riconosciuto ormai universalmente. Non richiede l’installazione di nessun software per poter essere fruito, ad eccezione del preinstallato browser di sistema. Permette di dar vita a progetti complessi con una certa facilità e, soprattutto, fornisce un immediato feedback visivo: basta caricare una pagina per vederla rappresentata, disegnata, sullo schermo del proprio dispositivo.