Il codice HTML costituisce la struttura di qualsiasi pagina web.
Ne avete sentito parlare, vi ci siete imbattuti qualche volta, avete allora tentato un approccio o avete desistito considerandola “roba da tecnici”. Stiamo parlando del codice HTML, questo sconosciuto. Per quanto sia innegabile che la maggior parte del lavoro che comprende i codici di scrittura del web possa essere automatizzato tramite appositi software che rendono la nostra vita più facile o comunque delegato a sviluppatori e altri professionisti competenti in materia, è sempre consigliabile conoscere - anche a un livello basico - i meccanismi del linguaggio su cui poggia la comunicazione online.
Che cos’è l’HTML?
Cominciamo con l’abc: la sigla HTML sta per Hyper-Text Markup Language (letteralmente, linguaggio a marcatori per ipertesti). Ovvero il codice che molti tra i vostri colleghi utilizzano per strutturare l’architettura del vostro sito web, landing page e email.
Detto più semplicemente, l’HTML rappresenta l’ossatura delle pagine web, mentre il CSS ne è l’abbigliamento: se il CSS (Cascading Style Sheets) definisce lo stile (colori, aspetto, ecc.), l’HTML stabilisce la struttura, dal titolo e sottotitolo, passando per l’elenco puntato, giù fino al piè di pagina (footer).
Questo tipo di linguaggio si esprime mediante una serie di elementi, i quali si compongono di tag (etichette di identificazione) racchiuse tra due caporali. Una delle regole basiche è che ogni elemento, generalmente, deve avere una tag di apertura e una di chiusura. Questo perché la struttura sia appropriatamente disposta nel suo complesso e, più importante, il browser sia in grado di interpretare il linguaggio e sapere in che formato mostrare i contenuti.
I fondamentali
Come mostrato nell’esempio qui sotto, la struttura inizia sempre con <!DOCTYPE html>, in modo che il browser capisca che ciò che sta leggendo è in codice HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Il nostro titolo</h1>
<p>Il nostro primo paragrafo</p>
</body>
</html>
La tag <body> segna l’inizio del corpo della pagina, dove inseriremo i nostri contenuti. Questi potranno essere organizzati in diverse sezioni mediante l’uso della tag header, disponibile in sei misure: dal titolo più grande <h1> al sottotitolo più minuto <h6>.
Via via, si uniscono i pezzi: alcune delle tag sono abbastanza intuitive, come la tag <p> che, come avrete intuito, apre e chiude un paragrafo. Apre e chiude, perché ogni elemento deve essere chiuso dalla stessa tag a cui si antepone uno slash “/”.
Proviamo a riprendere il nostro esempio e aggiungiamo un’altra parte al documento: l’intestazione:
<!DOCTYPE html>
<html>
<head>
<title>
Il titolo della nostra pagina
</title>
</head>
<body>
<h1>Il nostro titolo principale</h1>
<p>Il nostro <strong>primo</strong> paragrafo</p>
<h3>Il nostro sottotitolo</h3>
<p>Altri punti esposti</p>
</body>
</html>
Nella continuazione dell’esempio precedente si nota subito quanto rapidamente possa evolversi la struttura di una pagina. Alla base è stata aggiunta una sezione <head>, grazie alla quale è stato possibile dare un nome alla pagina; inoltre, la tag <strong> aggiunge l’effetto grassetto alla parola “primo”.
Facile, no?
Esistono moltissime altre tag e modifiche alla struttura di base del vostro HTML, come l’aggiunta di link, ancoraggi, immagini, ma come inizio ci siamo.
Uno degli aspetti interessanti dell’HTML, così come per l’inbound marketing, è che esiste una mole incredibile di contenuti e risorse messi a disposizione in rete da utenti e aziende a cui ricorrere, in caso voleste accrescere le vostre competenze.