Primi passi con il linguaggio HTML

Tag, self-closing tag e commenti

creativecode avatar Giulio Tiseo

19 Lug, 2019

~10min.

Muoverai i primi passi con il linguaggio HTML e inizierai a scrivere le prime righe di codice per creare un nuova pagina web.

Requisiti

In questo articolo verranno trattati gli elementi sui quali è basato il linguaggio HTML. Prima di cominciare questa lettura accertati di avere tutte le nozioni teoriche sulla composizione di un sito, approfondendo l’articolo che spiega da cosa è composta una pagina web

HTML sta per Hypertext Markup Language, ovvero un linguaggio che fa uso di marcatori per descrivere gli elementi strutturali di una pagina.

Il termine markup o marcatura  era utilizzato in ambiente tipografico per marcare delle parti di testo su cui apportare correzioni e migliorie. La tecnica di marcatura di un documento scritto in HTML è piuttosto simile a quella praticata dai dattilografi e consiste nel contrassegnare gli elementi della pagina con dei marcatori che attribuiscono delle informazioni ai contenuti.

Il browser è in grado di leggere questi marcatori, traducendo ogni singola linea di codice in un preciso elemento strutturale della pagina.

Se chiedessimo al browser di leggere il seguente codice (non preoccuparti di comprendere tutta la sintassi, ci torneremo più avanti) sarebbe in grado di generarne un pagina web:

<!DOCTYPE html>
<html>
  <head> 
    <title>Pagina Saluto</title> 
  </head> 
  <body> 
    <p>Ciao Mondo!</p> 
  </body> 
</html>

Questo esempio può essere utile per permetterti di prendere visivamente confidenza  con una struttura HTML molto minimal!

Hai trovato le frasi “Pagina Saluto” e “Ciao Mondo” nel codice?

Ciò che ho scritto nell’esempio è interpretato dal browser come una pagina intitolata Pagina Saluto, con all’interno un paragrafo che dice:”Ciao Mondo!“.

Nel corso della Guida base all’HTML, vedrai come ottenere gradualmente un risultato simile comprendendo esattamente il significato di ciascun elemento. È molto importante che tu sappia (ri)conoscere il senso e il ruolo che ha ciascun elemento. Questo approccio è il miglior modo per iniziare a gestire la struttura di una pagina web con le tue sole forze.

# I tag del linguaggio HTML

Osservando il codice in alto con maggiore attenzione puoi notare la presenza di parole speciali circondate da parentesi angolari (es. <body>). Questo tipo di sintassi serve a definire gli elementi HTML attraverso l’utilizzo di speciali marcatori chiamati tag.

I tag hanno lo scopo di descrivere la funzione strutturale e semantica dei contenuti, di modo che il browser possa capire se mostrare un paragrafo, un titolo, una lista, ecc…

Un elemento HTML è composto in genere da:

  1. tag di apertura
  2. contenuto del tag
  3. tag di chiusura

Un esempio di tag HTML che mostra un testo in formato titolo è:

<h1>Titolo di un paragrafo</h1>

Allo stesso modo possiamo specificare un tag che contenga del testo da inserire in un paragrafo in questo modo:

<p>Testo contenuto nel paragrafo</p>

Ogni tag può specificare come proprio contenuto, altri tag. Come vedrai anche più avanti, questa tecnica di scrittura è molto intuitiva e garantisce un’ottima leggibilità anche in caso di gerarchie complesse.

<hgroup>
  <h1>Titolo</h1>
  <h2>Sottotitolo</h2>
</hgroup>

Quello che vedi nell’esempio è un tag HTML usato per la creazione di un gruppo di intestazioni (hgroup sta per heading group). Puoi notare che l’elemento <hgroup> ha al suo interno una coppia di tag che definiscono due titoli di formato diverso (il primo più grande, il secondo più piccolo).

Per il momento è bene non entrate troppo nel merito dei singoli tag, l’importante è che tu abbia chiara l’idea di come si compone un elemento HTML. Prima di iniziare a prendere dimestichezza  con la sintassi…

Ricapitoliamo:

I contenuti di una pagina web sono espressi attraverso una serie di elementi standard contrassegnati da tag. Ciascun elemento mostra un certo contenuto o raggruppa una serie di altri elementi specificando un tag  di <apertura> e un tag di  </chiusura>.

# Facciamo pratica con i tag HTML

Puoi provare a creare i primi tag HTML andando su codepen.io, un sito molto comodo che ti permetterà di effettuare dei rapidi test sul codice. Dimentica per un attimo la struttura che hai visto all’inizio della lezione e cerca di concentrarti solo sulla parte visibile della pagina, ovvero quella che normalmente  è racchiusa nell’elemento <body>.

Seleziona dal menu la voce create e crea un nuovo pen. Questa schermata è l’equivalente di una pagina web vuota. I tre riquadri in alto fanno riferimento ai tre linguaggi che il browser legge ed interpreta per creare una pagina web (HTML, CSS, Javascript), mentre la schermata bianca in basso mostra un’anteprima della pagina che si aggiornerà ad ogni tua modifica.

Metti da parte le schermate CSS e Javascript e focalizzati sull’area di lavoro del codice HTML. Non ti resta a questo punto che provare a scrivere subito qualcosa!

Primi passi HTML - Hello World

codice scritto su codepen.io

Come vedi, codepen è piuttosto reattivo e mostra nella preview la copia di ciò che hai digitato nel riquadro dell’HTML. Tutto sembra funzionare correttamente e il browser interpreta il testo come contenuto puro, ovvero una serie di caratteri completamente privi di formattazione. Prova ora ad andare a capo e aggiungere altro testo.

Primi passi HTML - Hello Creative Code

codice scritto su codepen.io

Puoi notare che in questo caso la risposta del browser nella preview non corrisponde esattamente a quanto scritto nell’HTML, tant’è che la frase “Hello Creative Code!” è rimasta sulla stessa riga di “Hello World!“. Questo accade perché ciò che hai specificato nell’HTML oltre ad essere un contenuto senza formattazione, è anche privo di qualsiasi indicazione circa il layout della pagina. In questo caso abbiamo bisogno di un elemento che dica al browser di interrompere la riga e andare a capo. Il tag che svolge questo compito è il <br /> (break row).

Prova ad aggiungere l’interruzione di riga fra “Hello World!” e “Hello Creative Code“.

Primi passi HTML - Hello World + Hello Creative Code

codice scritto su codepen.io

In questo caso il browser interpreta correttamente la marcatura e stampa “Hello Creative Code” al rigo successivo.

# Linguaggio HTML: Self-Closing Tag

Come puoi notare, il <br /> viene specificato con un solo tag e non attraverso un’apertura e una chiusura come abbiamo visto nella prima parte della lezione per <hgroup>, <h1> e <p>. Questo accade perché nel linguaggio HTML esistono degli elementi che non necessitano di alcun contenuto e che da soli hanno un valore  e un significato strutturale. I tag privi di contenuto prendono il nome di self-closing e sono scritti in questa forma: <tag />, oppure più semplicemente <tag>. Un altro esempio di self-closing tag è l’hr, un elemento che consente di tracciare una linea orizzontale per separare visivamente un testo da un altro.

# Come commentare il codice HTML

Una pagina web piuttosto ricca può essere lunga diverse centinaia di righe. Questa lunghezza può portare confusione e non permette una corretta gestione della pagina nel corso del tempo.

Immagina di dover riprendere dopo diverso tempo una pagina HTML di 1000 righe per correggere il percorso di un’immagine. Solitamente i web developer inseriscono i commenti per tenere traccia delle modifiche o dei punti più importanti del documento. 

Qui in basso di riporto un esempio che mostra come scrivere un commento nel linguaggio HTML:

<!-- Titolo del mio sito web -->
<h1>creativecode.it</h1>

<!-- Paragrafo principale -->
<p>Affina le tue capacità creative attraverso l’apprendimento delle tecnologie per il web.</p>

<!-- Paragrafo secondario -->
<p>Impara a progettare applicazioni interattive seguendo un approccio lineare, incentrato sul tuo reale apprendimento.</p>

Come puoi osservare dall’esempio in alto, ho commentato il mio codice descrivendo la funzione dei singoli elementi HTML. Per scrivere un commento nel codice viene utilizzata questa sintassi: <!-- qui va il commento -->

I commenti sono gli unici elementi che non vanno ad incidere in alcun modo sul lato di visualizzazione della pagina web.