Tag in Html

Che cos’è un tag HTML

HTML è un linguaggio di markup. Utilizza particolari istruzioni chiamate tag per descrivere la struttura e il significato dei contenuti di una pagina Web.

HTML è un linguaggio di markup. Utilizza particolari istruzioni chiamate tag per descrivere la struttura e il significato dei contenuti di una pagina Web.

Un tag HTML è riconoscibile perché il suo nome viene scritto tra i simboli < e >.

Per esempio:

<p>

Il tag  indica l’inizio di un paragrafo.

Altri esempi di tag HTML sono:

<h1>
<p>
<a>
<img>
<ul>
<table>

Concetto fondamentale

I tag permettono al browser di comprendere che cosa rappresenta un contenuto. Un testo può essere, per esempio, un titolo, un paragrafo, una voce di una lista o il testo di un collegamento.

Come si scrive un tag

La sintassi di base di un tag HTML è:

<nome-tag>

Il nome del tag viene inserito tra due parentesi angolari:

<        p        >
 |        |        |
 |        |        +-- parentesi angolare destra
 |        |
 |        +----------- nome del tag
 |
 +-------------------- parentesi angolare sinistra

Per esempio:

<h1>

indica un titolo principale, mentre:

<p>

indica un paragrafo.

Attenzione alla sintassi

Le parentesi angolari fanno parte della sintassi HTML. Scrivere semplicemente p non crea un tag HTML.

Tag di apertura e tag di chiusura

Molti elementi HTML sono delimitati da due tag:

Molti elementi HTML sono delimitati da due tag:

un tag di apertura;
un tag di chiusura.

Consideriamo un paragrafo:

<p>Questo è un paragrafo.</p>

Il tag di apertura è:

<p>

Il tag di chiusura è:

</p>

Il tag di chiusura contiene il carattere / prima del nome del tag.

Schema

<p>     Questo è un paragrafo.     </p>
 ↑                 ↑                 ↑
 |                 |                 |
apertura        contenuto          chiusura

Tag ed elemento HTML

Nel linguaggio comune si utilizza spesso la parola tag per indicare l’intera istruzione HTML. Tecnicamente è utile distinguere tra tag ed elemento HTML.

Nel linguaggio comune si utilizza spesso la parola tag per indicare l’intera istruzione HTML. Tecnicamente è utile distinguere tra tag ed elemento HTML.

Consideriamo:

<p>Benvenuto nel sito</p>

In questo esempio:

 è il tag di apertura;
Benvenuto nel sito è il contenuto;
 è il tag di chiusura;
l’intera struttura costituisce un elemento HTML.

Tag ed elemento non sono esattamente sinonimi

TAG DI APERTURA
      |
      v
     <p> Benvenuto nel sito </p>
          |                 |
          |                 +-- TAG DI CHIUSURA
          |
          +-- CONTENUTO

<----------- ELEMENTO HTML ----------->

Tag diversi per contenuti diversi

HTML mette a disposizione tag differenti perché i contenuti di una pagina possono avere funzioni differenti.

Tag	Significato	Esempio
<h1>	Titolo principale	`<h1>Il mio sito</h1>`
<h2>	Titolo di secondo livello	`<h2>Servizi</h2>`
<p>	Paragrafo	`<p>Testo del paragrafo</p>`
<ul>	Lista non ordinata	`<ul>...</ul>`
<li>	Elemento di una lista	`<li>HTML</li>`
<a>	Collegamento ipertestuale	`<a>Visita la pagina</a>`

HTML descrive il significato

La scelta del tag non dovrebbe dipendere soltanto dall’aspetto grafico desiderato. Il tag dovrebbe rappresentare correttamente il significato del contenuto.

Elementi annidati

Un elemento HTML può essere inserito all’interno di un altro elemento. Questa operazione prende il nome di annidamento.

Un elemento HTML può essere inserito all’interno di un altro elemento. Questa operazione prende il nome di annidamento.

Per esempio:

<p>
    Questo testo contiene una parola <b>importante</b>.
</p>

L’elemento  è contenuto all’interno dell’elemento .

Possiamo rappresentare la struttura così:

p
|
+-- testo
|
+-- b
|   |
|   +-- importante
|
+-- testo

Elemento padre ed elemento figlio

Quando un elemento contiene un altro elemento, possiamo descrivere il primo come elemento padre e quello contenuto come elemento figlio.

Ordine di chiusura dei tag

Quando gli elementi sono annidati, devono essere chiusi rispettando la loro struttura.

Esempio corretto:

<p>
    Testo <b>importante</b>
</p>

L’elemento  è stato aperto dopo , quindi deve essere chiuso prima di .

Annidamento errato

Questa struttura non è corretta:

<p>
    Testo <b>importante
</p>
</b>

I tag si incrociano. L’elemento aperto per ultimo deve essere chiuso per primo.

Regola pratica

<p>
    <b>
        contenuto
    </b>
</p>

La struttura può essere letta come una serie di contenitori: il contenitore più interno viene chiuso prima di quello esterno.

Elementi vuoti

Non tutti gli elementi HTML sono formati da un tag di apertura, un contenuto e un tag di chiusura.

Esistono alcuni elementi chiamati elementi vuoti. Questi elementi non contengono altri contenuti e non prevedono un tag di chiusura.

Un esempio è  :

Prima riga<br>
Seconda riga

Un altro esempio importante è <img>:

<img src="foto.jpg" alt="Descrizione della foto">

Tipo	Esempio	Tag di chiusura
Elemento con contenuto	`<p>Testo</p>`	Sì
Elemento con contenuto	`<h1>Titolo</h1>`	Sì
Elemento vuoto	`<br>`	No
Elemento vuoto	`<img src="foto.jpg" alt="Foto">`	No

Non inventare tag di chiusura

Un elemento vuoto come img non deve essere scritto utilizzando un inesistente </img>.

L’importanza dell’indentazione

Quando gli elementi sono annidati, è buona pratica utilizzare l’indentazione per rendere evidente la struttura del documento.

Quando gli elementi sono annidati, è buona pratica utilizzare l’indentazione per rendere evidente la struttura del documento.

Confrontiamo:

<ul><li>HTML</li><li>CSS</li></ul>

con:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

Il browser può interpretare entrambe le versioni, ma la seconda rende immediatamente visibile la relazione tra gli elementi.

Il browser non è l’unico lettore del codice

Un documento HTML deve essere facilmente comprensibile anche da chi lo sviluppa, lo corregge o lo modifica. Una buona indentazione riduce gli errori e rende più semplice individuare l’inizio e la fine degli elementi.

I tag nella struttura di una pagina HTML

Anche la struttura fondamentale di una pagina HTML è composta da elementi annidati.

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>La mia pagina</title>
</head>

<body>

    <h1>Benvenuto</h1>

    <p>
        Questa è la mia prima pagina HTML.
    </p>

</body>

</html>

Possiamo rappresentare la struttura principale come un albero:

html
|
+-- head
|   |
|   +-- meta
|   |
|   +-- title
|
+-- body
    |
    +-- h1
    |
    +-- p

Struttura gerarchica

Una pagina HTML non è semplicemente una sequenza di tag. Gli elementi formano una struttura gerarchica nella quale alcuni elementi ne contengono altri.

Tag HTML e DOCTYPE

All’inizio di un documento HTML troviamo normalmente:

<!DOCTYPE html>

Anche se utilizza le parentesi angolari, DOCTYPE non è un normale tag HTML.

È una dichiarazione che comunica al browser il tipo di documento che sta interpretando. In HTML5 viene utilizzata la forma:

<!DOCTYPE html>

Distinzione importante

Non tutto ciò che compare tra parentesi angolari rappresenta necessariamente un elemento HTML. <!DOCTYPE html> è una dichiarazione, mentre <html>, <body> e  sono tag di elementi HTML.

LABORATORIO

Costruire una pagina utilizzando i tag

L’obiettivo dell’attività è costruire una semplice pagina HTML prestando particolare attenzione alla corretta apertura, chiusura e disposizione dei tag.

Software: editor di testo e browser

L’obiettivo dell’attività è costruire una semplice pagina HTML prestando particolare attenzione alla corretta apertura, chiusura e disposizione dei tag.

Passo 1 - Creare il file

Creare un nuovo file denominato:

index.html

Passo 2 - Inserire la struttura fondamentale

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>I miei interessi</title>
</head>

<body>

</body>

</html>

Passo 3 - Inserire un titolo

All’interno di body inserire:

<h1>I miei interessi</h1>

Individuare nel codice:

il tag di apertura;
il contenuto;
il tag di chiusura;
l’intero elemento HTML.

Passo 4 - Inserire un paragrafo

<p>
    Questa pagina presenta alcuni argomenti che mi interessano.
</p>

Passo 5 - Inserire un sottotitolo

<h2>Tecnologie Web</h2>

Passo 6 - Creare una lista

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Osservare che gli elementi <li> sono contenuti nell’elemento <ul>.

Passo 7 - Individuare la gerarchia

La struttura creata può essere rappresentata nel seguente modo:

body
|
+-- h1
|
+-- p
|
+-- h2
|
+-- ul
    |
    +-- li
    |
    +-- li
    |
    +-- li

Obiettivo raggiunto

La pagina contiene elementi differenti correttamente annidati. La struttura del codice permette di riconoscere facilmente quali elementi appartengono al body e quali elementi appartengono alla lista.

Codice completo del laboratorio

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>I miei interessi</title>
</head>

<body>

    <h1>I miei interessi</h1>

    <p>
        Questa pagina presenta alcuni argomenti che mi interessano.
    </p>

    <h2>Tecnologie Web</h2>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

</body>

</html>

Errori comuni con i tag

Errore	Esempio	Correzione
Manca il tag di chiusura	`<p>Testo`	`<p>Testo</p>`
Nome diverso nella chiusura	`<p>Testo</h2>`	`<p>Testo</p>`
Tag incrociati	`<p><b>Testo</p></b>`	`<p><b>Testo</b></p>`
Parentesi angolari mancanti	`p Testo /p`	`<p>Testo</p>`
Chiusura di un elemento vuoto	`<img></img>`	Utilizzare correttamente il solo elemento img.

Esercizio: trova gli errori

Osservare il seguente codice e individuare gli errori prima di eseguirlo:

<body>

    <h1>La mia pagina</h2>

    <p>
        Sto imparando <b>HTML.
    </p>
    </b>

    <ul>
        <li>HTML
        <li>CSS</li>
    </ul>

</body>

Correggere il codice rispettando l’apertura, la chiusura e l’annidamento degli elementi.

Una possibile soluzione

<body>

    <h1>La mia pagina</h1>

    <p>
        Sto imparando <b>HTML</b>.
    </p>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
    </ul>

</body>

Esercizio autonomo

Creare una pagina HTML dedicata a una tecnologia informatica a scelta.

La pagina deve contenere:

un titolo principale con h1;
almeno due titoli di secondo livello con h2;
almeno tre paragrafi;
una lista contenente almeno tre elementi;
almeno un elemento annidato all’interno di un altro elemento;
una corretta indentazione del codice.

Criteri di verifica

Ogni elemento che richiede una chiusura deve possedere il relativo tag di chiusura.
I tag di apertura e chiusura devono avere lo stesso nome.
Gli elementi annidati devono essere chiusi nell’ordine corretto.
Gli elementi figli devono essere indentati rispetto all’elemento padre.
La struttura del documento deve risultare facilmente leggibile.

Verifica rapida

Domande di controllo

Che cos’è un tag HTML?
Quali caratteri delimitano normalmente un tag?
Come si riconosce un tag di chiusura?
Qual è la differenza tra tag ed elemento HTML?
Che cosa rappresenta il contenuto di un elemento?
Che cosa significa annidare due elementi?
In quale ordine devono essere chiusi gli elementi annidati?
Che cos’è un elemento vuoto?
Il tag img possiede un tag di chiusura?
Perché è importante indentare il codice HTML?

Sviluppo Web

Tag

Introduzione ai tag HTML, alla loro sintassi, agli elementi con apertura e chiusura, agli elementi vuoti e alle regole fondamentali di annidamento.

Che cos’è un tag HTML

Come si scrive un tag

Tag di apertura e tag di chiusura

Tag ed elemento HTML

Tag diversi per contenuti diversi

Elementi annidati

Ordine di chiusura dei tag

Elementi vuoti

L’importanza dell’indentazione

I tag nella struttura di una pagina HTML

Tag HTML e DOCTYPE

Costruire una pagina utilizzando i tag

Passo 1 - Creare il file

Passo 2 - Inserire la struttura fondamentale

Passo 3 - Inserire un titolo

Passo 4 - Inserire un paragrafo

Passo 5 - Inserire un sottotitolo

Passo 6 - Creare una lista

Passo 7 - Individuare la gerarchia

Codice completo del laboratorio

Errori comuni con i tag

Esercizio: trova gli errori

Esercizio autonomo

Verifica rapida

Html