C’era una volta l’HTML. Negli anni ’90, ho iniziato la mia esperienza con il web creando le prime pagine utilizzando il codice HTML. HTML, acronimo di Hypertext Markup Language, è lo standard utilizzato per strutturare i documenti del World Wide Web (www). Nel corso degli anni, ho assistito all’evoluzione dell’HTML, dalla sua prima versione, chiamata HTML1, fino all’attuale HTML5. Ogni nuova versione ha introdotto caratteristiche sempre più potenti e un numero crescente di tag per la progettazione delle pagine, deprecando alcuni tag che sono stati sostituiti da nuove soluzioni.
Struttura gerarchica e semantica dell’HTML
HTML è un linguaggio di markup strutturato ad albero, con collegamenti gerarchici tra gli elementi. Questo linguaggio ci permette di descrivere semanticamente la struttura di un documento web, utilizzando tag che identificano le diverse sezioni di testo come intestazioni, paragrafi, elenchi, collegamenti, citazioni e altri elementi.
Esempi di tag HTML
Ecco alcuni esempi dei tag HTML menzionati:
<head>: Contenitore dei metadati del documento
<body>: Contenitore di ciò che viene visualizzato nel browser
<title>: Contiene il titolo del sito web
<h1>: Contiene un titolo
<p>: Paragrafo
<ul>: Contiene un elenco puntato
<li>: Riga dell’elenco puntato
<br>: Interruzione di riga
La corretta struttura dell’HTML
Tuttavia, scrivere questi tag in un elenco non avrebbe senso, poiché l’HTML richiede una struttura gerarchica ben definita. Di seguito, riportiamo un esempio corretto che rispetta la struttura dell’HTML:
<head>
<title>Contiene il titolo del sito web</title>
</head>
<body>
<h1>Contiene un titolo</h1>
<p>Paragrafo</p>
<ul>
<li>Prima riga dell'elenco puntato</li>
<li>Seconda riga dell'elenco puntato</li>
</ul>
</body>Gli editor di codice e l’importanza della correttezza
Gli editor di codice, come Adobe Dreamweaver, sono strumenti molto utili per scrivere codice HTML in modo corretto, in quanto segnalano eventuali errori di mancata chiusura dei tag. Anche se esistono molti altri editor disponibili, ho menzionato Adobe Dreamweaver perché, sebbene oggi sia noto con questo nome, negli anni ’90 faceva parte della suite di Macromedia. Tuttavia, è possibile utilizzare tranquillamente anche semplici editor di testo, una volta che si conoscono i tag più comuni.
L’arrivo dei CSS
Se l’HTML ci consente di definire la struttura e il contenuto di una pagina web, un prossimo articolo tratterà l’introduzione del CSS (Cascading Style Sheets), che tutt’oggi supporta il design e l’estetica delle pagine web.
In conclusione
I primi siti Internet erano sgraziati, con contenuti statici e una visualizzazione limitata ai desktop. Ogni modifica richiedeva un intervento su molte pagine, spesso utilizzando la funzione “Sostituisci” degli editor di testo. Non si teneva in considerazione la visualizzazione multidevice, poiché lo sviluppo era principalmente incentrato sui computer desktop, con gli standard di risoluzione video che cambiavano nel corso degli anni. C’era una volta l’HTML e c’è ancora.
Un riferimento importante in termini di contenuti è ancora oggi W3Schools