Riassunto tag HTML
Tempo di lettura: 9 min
Introduzione
Aiuto i ragazzi a studiare Informatica da ormai 3 anni e ho notato che gli studenti di quarta spesso fanno fatica a trovare un riassunto chiaro dei tag HTML più usati dai loro professori nelle verifiche. Infatti, i riassunti che si trovano online o sono a pagamento, oppure sono pensati per l’università e contengono quindi molte più informazioni del necessario.
Per questo motivo, ho deciso di elencare in questo articolo i tag più utilizzati a scuola, uno per uno. Poi, alla fine, ho inserito anche un PDF scaricabile con una tabella riassuntiva. So infatti che alcuni professori permettono di portare questo tipo di appunti alle verifiche perché sanno che i tag da ricordare sono davvero tanti.
I tag HTML
Iniziamo subito col dire che la maggior parte dei tag HTML va aperto e poi chiuso.
Mi spiego meglio: se per esempio abbiamo un tag che si chiama ciao (a caso, non esiste il tag ciao ahaha), e dico che va aperto e chiuso, intendo che bisogna scrivere:
1<ciao> <!-- qui lo apro -->
2
3</ciao> <!-- qui lo chiudo -->Un consiglio che sento di dare è quello di aprire il tag e chiuderlo immediatamente, per evitare di dimenticarselo. Solo dopo si pensa a cosa scriverci dentro.
Robe iniziali necessarie
Allora, per prima cosa apriamo un file sul nostro computer (ad esempio tramite il Blocco Note) e salviamolo chiamandolo esercizio.html.
A questo punto, partiamo da quelle che io chiamo le "robe iniziali necessarie".
Si tratta di alcuni tag che servono a far capire al browser (come Chrome) che il file che stiamo scrivendo è di tipo HTML, e quindi deve essere interpretato come tale.
Quello che andiamo a scrivere è:
1<!DOCTYPE html>
2<html>
3 <head>
4 </head>
5
6 <body>
7 </body>
8</html>È praticamente da imparare a memoria, e possiamo notare che contiene i seguenti tag:
<!DOCTYPE html>: va solo aperto, non si chiude. Serve per dire che stiamo usando HTML5.<html>: è il primo tag che va aperto e chiuso, e al suo interno conterrà tutti gli altri tag.<head>: anche questo va aperto e chiuso. In inglese significa "testa", ed è la parte dove si inseriscono informazioni sulla pagina: ad esempio che è in italiano, oppure il titolo che comparirà in alto nella scheda del browser.<body>: va aperto e chiuso sotto il tag precedente, perché rappresenta un'altra parte della struttura. Qui ci riferiamo al "corpo" della pagina, cioè alla ciccia del nostro sito. È qui infatti che andremo a mettere paragrafi, immagini, titoli e tutto ciò che si vede davvero nella pagina.
Titolo della pagina
Ora che abbiamo scritto le robe iniziali necessarie, apriamo il file in un browser come Chrome e vedremo... nulla, una pagina completamente bianca.
Questo succede perché nei tag <head> e <body> non c'è ancora nulla. Quindi iniziamo a riempirli.
Partiamo col dare un titolo alla pagina, titolo che verrà visualizzato in alto nella scheda del browser.
Per farlo si usa il tag <title>, che va aperto, chiuso e, al suo interno, ci si può scrivere ciò che si vuole.
Ecco un esempio:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 </body>
9</html>Se ora aggiornate la pagina premendo sulla rotellina del browser, vedrete il titolo comparire nella scheda in alto.
Titoli
Ora iniziamo a riempire il <body>. Tutto ciò che si trova dentro il <body> si vedrà direttamente nella nostra pagina web.
La prima cosa che si inserisce di solito è un titolo, ma attenzione: non è lo stesso titolo che abbiamo inserito sopra con il tag <title>.
Questo nuovo titolo verrà visualizzato all’interno della pagina, e non nella scheda del browser.
Molti, a prima vista, potrebbero pensare che anche questo titolo si scriva con il tag <title>, ma non è così. Secondo me, a una certa si sono accorti che il tag <title> era già usato per l'altro titolo, e quindi hanno dovuto ripiegare su un altro nome.
Infatti, in inglese, "titolo" si dice anche "heading", da cui hanno ricavato la lettera h.
Volevano anche permettere titoli di diverse grandezze, quindi hanno deciso di usare dei numeri: da 1 (il più grande) a 6 (il più piccolo).
Quindi il tag per un titolo grande è <h1> e va (come al solito) aperto e chiuso:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <h1>Titolo grande</h1>
9 <h2>Titolo leggermente più piccolo</h2>
10 <h3>Titolo ancora più piccolo</h3>
11 <h4>Ecc.. insomma hai capito ahahah</h4>
12 </body>
13</html>Paragrafo
Questo è facile: come si dice "paragrafo" in inglese? Beh, "paragraph". Quindi il tag come sarà mai? Esatto: <p>.
Anche questo va aperto, chiuso, e al suo interno ci scriviamo il testo del nostro paragrafo.
Ecco un esempio completo:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <h1>Titolo grande</h1>
9 <p>Questo è un paragrafo</p>
10 </body>
11</html>Come potete vedere, i tag nel <body> potete metterli uno sotto l’altro e verranno visualizzati nell’ordine in cui li scrivete.
Liste
Di liste ne esistono due tipologie:
- Liste numerate
- Liste puntate
Ormai avete imparato il giochino: come si traducono in inglese? Eccole:
- Ordered List
- Unordered List
Quindi i rispettivi tag saranno <ol> e <ul>.
Questi due servono per creare la lista in sé, mentre per inserire un elemento all’interno della lista si usa il tag <li>, che sta per List Item, ovvero in italiano: Elemento della Lista.
Capiamolo meglio con un esempio:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <ol>
9
10 </ol>
11
12 <ul>
13
14 </ul>
15 </body>
16</html>In questo momento abbiamo solo dichiarato che ci sono due liste: prima una Ordered List <ol> (e quindi numerata), e poi una Unordered List <ul> (cioè puntata).
Per inserirci degli elementi, dobbiamo usare il tag <li>, così:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <ol>
9 <li>Cane</li>
10 <li>Gatto</li>
11 </ol>
12
13 <ul>
14 <li>Coniglio</li>
15 <li>Pappagallo</li>
16 </ul>
17 </body>
18</html>Ecco fatto! Il risultato sarà questo:
- Cane
- Gatto
- Coniglio
- Pappagallo
Tabella
Qui, intuitivamente, possiamo immaginare che ci sia un tag <table> che serve per dire: "Ehi, qui c'è una tabella!"
Le tabelle in HTML vanno pensate come un insieme di righe composte da del contenuto.
Ad esempio, la seguente tabella:
| Animale | Peso | Altezza |
|---|---|---|
| Cane | 10kg | 40cm |
| Gatto | 4kg | 30cm |
| Pappagallo | 3kg | 10cm |
Ha 4 righe e 3 colonne.
I tag che ci servono per costruirla sono:
<tr>: sta per Table Row ovvero riga della tabella, va aperto e chiuso.<td>: sta per Table Data, cioè il contenuto all’interno della riga, anche questo va aperto e chiuso.
Per rappresentare la struttura della tabella sopra, partiamo così:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <table> <!-- Dico che c'è una tabella -->
9 <tr> <!-- Riga 1, quella dell'intestazione -->
10 </tr>
11
12 <tr> <!-- Riga 2, quella del cane -->
13 </tr>
14
15 <tr> <!-- Riga 3, quella del gatto -->
16 </tr>
17
18 <tr> <!-- Riga 4, quella del pappagallo -->
19 </tr>
20 </table>
21 </body>
22</html>In questo momento ho solo dichiarato che c’è una tabella e che ha 4 righe.
Sono però vuote. Per riempirle, ci serve il tag <td> in questo modo:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <table>
9 <tr> <!-- Riga 1, quella dell'intestazione -->
10 <td>Animale</td> <!-- Inserisco i dati di questa riga -->
11 <td>Peso</td>
12 <td>Altezza</td>
13 </tr>
14
15 <tr> <!-- Riga 2, quella del cane -->
16 <td>Cane</td>
17 <td>10kg</td>
18 <td>40cm</td>
19 </tr>
20
21 <tr> <!-- Riga 3, quella del gatto -->
22 <td>Gatto</td>
23 <td>4kg</td>
24 <td>30cm</td>
25 </tr>
26
27 <tr> <!-- Riga 4, quella del pappagallo -->
28 <td>Pappagallo</td>
29 <td>3kg</td>
30 <td>10cm</td>
31 </tr>
32 </table>
33 </body>
34</html>Ed ecco che ho riprodotto la tabella che abbiamo visto sopra!
Unica cosa, se visualizziamo questa tabella vedremo che non ha i bordi, quindi di base sembra tutto tranne che una tabella ahahah.
Per aggiungerli, basta aggiungere l'attributo border="1" all’interno del tag table, in questo modo:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <table border="1"> <!-- Metto il bordo alla tabella -->
9 <tr>
10 <td>Animale</td>
11 <td>Peso</td>
12 <td>Altezza</td>
13 </tr>
14
15 <tr>
16 <td>Cane</td>
17 <td>10kg</td>
18 <td>40cm</td>
19 </tr>
20
21 <tr>
22 <td>Gatto</td>
23 <td>4kg</td>
24 <td>30cm</td>
25 </tr>
26
27 <tr>
28 <td>Pappagallo</td>
29 <td>3kg</td>
30 <td>10cm</td>
31 </tr>
32 </table>
33 </body>
34</html>Immagine
Il tag per inserire un'immagine è <img> (sono stati un po’ taccagni, potevano chiamarlo image dico io ahaha).
Questo tag si apre soltanto, non ha chiusura.
Ne scrivo uno completo, e poi ve lo commento:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <img src="foto.jpg" alt="Foto di un gatto">
9 </body>
10</html>Allora, osserviamo subito che questo tag ha della roba al suo interno, prima del simbolo di chiusura >, che non avevamo ancora visto.
Infatti, quando si tratta di un’immagine, bisogna specificare degli attributi:
- La sorgente: si usa l’attributo
src(source) per indicare il file dell’immagine, che si trova nella stessa cartella del nostro fileesercizio.html. È come dire: “L’immagine che voglio visualizzare è questa qui!”, e quindi scriviamo il nome del file con la sua estensione (di solito.jpgo.png). - Il testo alternativo: abbreviato
alt(alternative text), è il testo che verrà visualizzato al posto dell’immagine se per qualche motivo non dovesse caricarsi. Inoltre, questo testo è importante per le persone non vedenti, infatti, i loro dispositivi leggono ad alta voce proprio quello che scriviamo qui.
Una volta riempiti questi due attributi, l’immagine verrà visualizzata nella pagina.
Se l’immagine dovesse essere troppo grande, si possono regolare le dimensioni aggiungendo gli attributi width e height (larghezza e altezza in inglese):
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <img src="foto.jpg" alt="Foto di un gatto" width="300px" height="300px">
9 </body>
10</html>⚠️ Attenzione alle H di queste due parole!
Io in primis mi confondono spesso ahahah: "width" ha l'H finale, mentre "height" ce l'ha prima della T. Mi raccomando fateci attenzione che è un peccato sbagliarlo nella verifica ahahah.
Ancora
L'ancora serve per creare un collegamento a un’altra pagina a partire da quella in cui ci troviamo. Ad esempio se dalla pagina "Home" voglio passare alla pagina "Profilo", userò un'ancora.
Quindi, per prima cosa, creiamo un altro file nella stessa cartella del file precedente, e chiamiamolo ad esempio seconda_pagina.html.
Quello che vogliamo è poter raggiungere questa nuova pagina cliccando su un punto preciso nella prima.
Per fare ciò si usa il tag <a>, che sta per anchor (ancora in inglese, non ho idea del perché lo abbiano chiamato così onesta ahaha).
Lo scrivo e poi lo commento:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <a href="seconda_pagina.html">
9 Clicca Qui per raggiungere la seconda pagina
10 </a>
11 </body>
12</html>Questo tag si apre e si chiude, e tra i due possiamo scrivere quel testo che, passandoci sopra col mouse, apparirà cliccabile. Nel tag di apertura inseriamo l'attributo:
href: abbreviazione di Hypertext REFerence, serve per dire “questa è la pagina che voglio raggiungere”, infatti ci scriviamo il nome del file della seconda pagina.
Una cosa che piace molto ai professori è aprire la nuova pagina in un’altra scheda, invece che nella stessa.
Farlo è semplicissimo: basta aggiungere l’attributo target="_blank" così:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <a href="seconda_pagina.html" target="_blank">
9 Clicca Qui per raggiungere la seconda pagina
10 </a>
11 </body>
12</html>Ora, cliccando su quel link, la seconda pagina si aprirà in una nuova scheda del browser.
Divisore
Ultimo, ma non meno importante, abbiamo il divisore, ovvero il tag <div>, che si apre e si chiude.
Questo tag è un po’ particolare perché “non si vede”: non ha un risultato visivo come gli altri, ma serve per raggruppare un insieme di elementi.
Può essere pensato come una sorta di box invisibile, all’interno del quale possiamo mettere altri tag (e volendo anche altri <div>).
È molto utile soprattutto quando parleremo di stile (CSS), perché permette di applicare uno stile grafico a un box e uno completamente diverso ad un altro.
Visto in azione è così:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Il mio primo esercizio HTML</title>
5 </head>
6
7 <body>
8 <div>
9 <h2>Sezione Animali</h2>
10 <p>Qui parliamo di animali domestici.</p>
11 <ul>
12 <li>Cane</li>
13 <li>Gatto</li>
14 <li>Coniglio</li>
15 </ul>
16 </div>
17
18 <div>
19 <h2>Sezione Piante</h2>
20 <p>Qui invece parliamo di piante da appartamento.</p>
21 <ul>
22 <li>Ficus</li>
23 <li>Sansevieria</li>
24 <li>Aloe</li>
25 </ul>
26 </div>
27 </body>
28</html>Come puoi vedere, abbiamo 2 <div> che raggruppano due sezioni diverse della pagina: una sugli animali e una sulle piante.
Per ora non cambia nulla a livello grafico, ma più avanti potremo dire cose tipo: “Voglio che solo questo <div> abbia gli elementi col testo rosso”, ed è lì che il <div> diventa davvero potente.
Conclusione
Per concludere, mi sento di dare alcuni consigli pratici:
- Quando aprite un tag, chiudetelo subito, sennò palese che ve lo dimenticate ahaha.
- Per aiutarvi a ricordarvi i tag a memoria, provate a tradurli dall’inglese: vedrete che dopo un po’ verrà tutto molto naturale.
- Se trovate dei tag che non ho spiegato in questo articolo, cercateli su questo sito: W3Schools - HTML, è davvero fatto bene!
Qui trovate il PDF scaricabile con tutti i tag: ne ho inseriti anche alcuni che non ho spiegato in questa guida, sperando che vi siano utili alle verifiche.
Scarica il PDF
Se avete dubbi o domande, contattatemi pure aprendo il menù e cliccando su “Contattami”. Sarò felice di aiutarvi e spiegarvi tutto ciò che non vi è chiaro!
