Attributi in Html

Che cos’è un attributo HTML

Un elemento HTML può essere descritto o configurato mediante informazioni aggiuntive chiamate attributi.

Un elemento HTML può essere descritto o configurato mediante informazioni aggiuntive chiamate attributi.

Gli attributi vengono scritti all’interno del tag di apertura dell’elemento.

Consideriamo questo esempio:

<p title="Informazione aggiuntiva">
    Questo è un paragrafo.
</p>

In questo caso:

p è il nome del tag;
title è un attributo;
Informazione aggiuntiva è il valore dell’attributo.

Concetto fondamentale

Il tag indica quale elemento stiamo creando. Un attributo aggiunge informazioni o configurazioni relative a quell’elemento.

La sintassi di un attributo

Un attributo è normalmente formato da un nome e da un valore.

Un attributo è normalmente formato da un nome e da un valore.

La struttura generale è:

nome="valore"

Per esempio:

title="Informazioni"

Inserito in un elemento HTML:

<p title="Informazioni">Testo del paragrafo</p>

Anatomia dell’attributo

<p title="Informazioni">
   |     |
   |     +---------------- valore
   |
   +---------------------- nome dell’attributo

Il simbolo = associa il nome dell’attributo al relativo valore.

Dove si scrivono gli attributi

Gli attributi vengono inseriti nel tag di apertura, dopo il nome dell’elemento.

Gli attributi vengono inseriti nel tag di apertura, dopo il nome dell’elemento.

Esempio corretto:

<p title="Presentazione">
    Benvenuto nel sito.
</p>

L’attributo non viene inserito nel tag di chiusura.

Posizione errata

Questa sintassi non è corretta:

<p>
    Benvenuto nel sito.
</p title="Presentazione">

La forma corretta è:

<p title="Presentazione">
    Benvenuto nel sito.
</p>

Il valore dell’attributo

È buona pratica racchiudere il valore di un attributo tra virgolette.

È buona pratica racchiudere il valore di un attributo tra virgolette.

<p title="Informazioni sul corso">
    Informatica
</p>

Le virgolette permettono di identificare chiaramente l’inizio e la fine del valore.

Convenzione consigliata

In HTML alcuni valori semplici possono essere validi anche senza virgolette, ma utilizzare sempre le virgolette rende il codice più uniforme, leggibile e meno soggetto a errori.

Più attributi nello stesso elemento

Uno stesso elemento può possedere più attributi.

Uno stesso elemento può possedere più attributi.

Gli attributi vengono separati da uno spazio.

<p id="introduzione" class="testo" title="Introduzione al sito">
    Benvenuto nel sito.
</p>

L’elemento possiede tre attributi:

id="introduzione";
class="testo";
title="Introduzione al sito".

Struttura

<p id="introduzione" class="testo" title="Introduzione al sito">
   |                  |             |
   |                  |             +-- attributo 3
   |                  |
   |                  +---------------- attributo 2
   |
   +----------------------------------- attributo 1

L’attributo id

L’attributo id permette di assegnare un identificatore a un elemento HTML.

<h2 id="contatti">Contatti</h2>

Il valore dell’id identifica quello specifico elemento all’interno della pagina.

Un altro esempio:

<p id="introduzione">
    Questo è il paragrafo introduttivo.
</p>

Un identificatore deve individuare un elemento

All’interno dello stesso documento, il valore di id deve essere unico. Non è corretto utilizzare lo stesso identificatore per più elementi.

Esempio da evitare:

<p id="descrizione">Primo paragrafo</p>

<p id="descrizione">Secondo paragrafo</p>

Una possibile correzione è:

<p id="descrizione-principale">Primo paragrafo</p>

<p id="descrizione-secondaria">Secondo paragrafo</p>

L’attributo class

L’attributo class permette di associare uno o più elementi a una stessa classe.

L’attributo class permette di associare uno o più elementi a una stessa classe.

<p class="evidenza">Primo paragrafo</p>

<p class="evidenza">Secondo paragrafo</p>

A differenza di id, lo stesso valore di class può essere utilizzato su più elementi.

Attributo	Scopo	Può essere ripetuto su più elementi?
id	Identificare uno specifico elemento.	No, lo stesso valore non deve identificare più elementi.
class	Associare più elementi allo stesso gruppo o categoria.	Sì.

Utilizzo futuro

Gli attributi id e class diventeranno particolarmente importanti quando verrà introdotto CSS, perché permetteranno di selezionare gli elementi ai quali applicare determinate regole grafiche.

L’attributo title

L’attributo title permette di associare un’informazione aggiuntiva a un elemento.

L’attributo title permette di associare un’informazione aggiuntiva a un elemento.

<p title="Informazioni sul linguaggio HTML">
    HTML è un linguaggio di markup.
</p>

In molti browser il contenuto di title può essere visualizzato quando il puntatore rimane sull’elemento.

Non affidare informazioni essenziali a title

Il contenuto principale della pagina deve rimanere disponibile direttamente nel documento. L’attributo title può fornire informazioni aggiuntive, ma non dovrebbe essere l’unico modo per comunicare un’informazione importante.

L’attributo lang

L’attributo lang indica la lingua utilizzata nel contenuto di un elemento.

L’attributo lang indica la lingua utilizzata nel contenuto di un elemento.

Nella struttura fondamentale di una pagina HTML viene normalmente utilizzato nell’elemento html:

<html lang="it">

Il valore it indica che la lingua principale del documento è l’italiano.

Per una pagina principalmente in inglese potremmo utilizzare:

<html lang="en">

Perché specificare la lingua

Indicare correttamente la lingua aiuta browser, motori di ricerca e tecnologie assistive a interpretare il contenuto del documento.

Attributi globali

Alcuni attributi possono essere utilizzati su molti elementi HTML e vengono chiamati attributi globali.

Alcuni attributi possono essere utilizzati su molti elementi HTML e vengono chiamati attributi globali.

Tra gli attributi globali più comuni troviamo:

Attributo	Funzione	Esempio
id	Identifica un elemento.	`id="introduzione"`
class	Associa l’elemento a una o più classi.	`class="evidenza"`
title	Fornisce informazioni aggiuntive.	`title="Informazioni"`
lang	Indica la lingua del contenuto.	`lang="it"`

Attributo globale

Un attributo globale non è legato esclusivamente a un singolo tipo di elemento. Può essere utilizzato, quando appropriato, su numerosi elementi HTML.

Attributi specifici

Altri attributi sono strettamente collegati alla funzione di determinati elementi HTML.

Per esempio, l’elemento <a> utilizza l’attributo href per indicare la destinazione di un collegamento:

<a href="contatti.html">Contatti</a>

L’elemento <img> utilizza invece attributi come src e alt:

<img src="img/logo.jpg" alt="Logo del sito">

Un campo di un form può utilizzare l’attributo type:

<input type="text">

Elemento	Attributo	Funzione
`<a>`	href	Indica la destinazione del collegamento.
`<img>`	src	Indica la risorsa immagine.
`<img>`	alt	Fornisce un testo alternativo per l’immagine.
`<input>`	type	Specifica il tipo di controllo.

Non tutti gli attributi appartengono a tutti gli elementi

Per utilizzare correttamente un attributo è necessario conoscere la funzione dell’elemento al quale viene applicato. Alcuni attributi sono globali, mentre altri hanno significato soltanto per determinati elementi.

Analizziamo un elemento img

Consideriamo:

<img src="img/computer.jpg" alt="Computer portatile">

Possiamo scomporre l’elemento nel seguente modo:

<img src="img/computer.jpg" alt="Computer portatile">
 |      |                     |
 |      |                     +-- attributo alt
 |      |
 |      +------------------------ attributo src
 |
 +------------------------------- nome del tag

In particolare:

img indica il tipo di elemento;
src indica dove si trova l’immagine;
alt contiene il testo alternativo.

Tag e attributi lavorano insieme

Il tag stabilisce che l’elemento rappresenta un’immagine. Gli attributi specificano quale immagine utilizzare e forniscono ulteriori informazioni sull’elemento.

Analizziamo un collegamento

Consideriamo un collegamento:

<a href="contatti.html" title="Vai alla pagina dei contatti">
    Contatti
</a>

L’elemento contiene:

il tag a;
l’attributo specifico href;
l’attributo globale title;
il contenuto testuale Contatti;
il tag di chiusura </a>.

Un elemento può combinare attributi differenti

Lo stesso tag può contenere contemporaneamente attributi specifici e attributi globali.

Attributi booleani

Non tutti gli attributi HTML richiedono la forma nome="valore".

Non tutti gli attributi HTML richiedono la forma nome="valore".

Alcuni attributi sono booleani: la loro presenza indica che una determinata caratteristica è attiva.

Un esempio è required nei form:

<input type="text" required>

In questo caso la presenza dell’attributo required indica che il campo è obbligatorio.

Due categorie da ricordare

Molti attributi hanno una coppia nome-valore, come id="titolo". Alcuni attributi booleani possono invece essere indicati semplicemente attraverso la loro presenza, come required.

LABORATORIO

Aggiungere attributi a una pagina

L’obiettivo è partire da una semplice pagina HTML e aggiungere progressivamente alcuni attributi, osservandone posizione e funzione.

Software: editor di testo e browser

L’obiettivo è partire da una semplice pagina HTML e aggiungere progressivamente alcuni attributi, osservandone posizione e funzione.

Passo 1 - Creare il file

Creare un nuovo file denominato:

attributi.html

Passo 2 - Inserire la struttura della pagina

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

<head>
    <meta charset="UTF-8">
    <title>Gli attributi HTML</title>
</head>

<body>

    <h1>Tecnologie Web</h1>

    <p>
        HTML permette di definire la struttura di una pagina Web.
    </p>

</body>

</html>

Passo 3 - Aggiungere un id al titolo

Modificare il titolo principale:

<h1 id="titolo-principale">Tecnologie Web</h1>

L’elemento h1 possiede ora un identificatore.

Passo 4 - Aggiungere una class al paragrafo

<p class="introduzione">
    HTML permette di definire la struttura di una pagina Web.
</p>

Passo 5 - Aggiungere title

Aggiungere un’informazione supplementare allo stesso paragrafo:

<p
    class="introduzione"
    title="Introduzione al linguaggio HTML"
>
    HTML permette di definire la struttura di una pagina Web.
</p>

Lo stesso elemento contiene ora due attributi.

Passo 6 - Inserire un secondo paragrafo con la stessa class

<p class="introduzione">
    CSS permette di definire la presentazione grafica della pagina.
</p>

La stessa class può essere associata a entrambi i paragrafi.

Passo 7 - Inserire identificatori differenti

<h2 id="html">HTML</h2>

<p>
    HTML descrive la struttura dei contenuti.
</p>

<h2 id="css">CSS</h2>

<p>
    CSS definisce la presentazione dei contenuti.
</p>

Controllo

Gli elementi h2 hanno identificatori differenti, mentre più elementi possono condividere lo stesso valore di class.

Codice completo del laboratorio

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

<head>
    <meta charset="UTF-8">
    <title>Gli attributi HTML</title>
</head>

<body>

    <h1 id="titolo-principale">
        Tecnologie Web
    </h1>

    <p
        class="introduzione"
        title="Introduzione al linguaggio HTML"
    >
        HTML permette di definire la struttura di una pagina Web.
    </p>

    <p class="introduzione">
        CSS permette di definire la presentazione grafica della pagina.
    </p>

    <h2 id="html">HTML</h2>

    <p>
        HTML descrive la struttura dei contenuti.
    </p>

    <h2 id="css">CSS</h2>

    <p>
        CSS definisce la presentazione dei contenuti.
    </p>

</body>

</html>

Errori comuni

Errore	Esempio	Correzione
Attributo fuori dal tag di apertura	`<p> id="testo"`	`<p id="testo">`
Manca il simbolo =	`id"titolo"`	`id="titolo"`
Virgolette non chiuse	`title="Informazioni`	`title="Informazioni"`
Attributi non separati	`id="titolo"class="principale"`	`id="titolo" class="principale"`
id duplicato	Due elementi hanno `id="titolo"`	Assegnare identificatori differenti.

Esempio con più errori

<p> id="intro" class="testo"
    Introduzione ad HTML
</p>

Gli attributi sono stati scritti dopo la chiusura del tag di apertura.

La forma corretta è:

<p id="intro" class="testo">
    Introduzione ad HTML
</p>

Esercizio: riconosci tag e attributi

Analizzare i seguenti elementi e individuare:

il nome del tag;
gli attributi presenti;
il nome di ogni attributo;
il valore di ogni attributo.

<h1 id="titolo">Il mio sito</h1>

<p class="descrizione" title="Presentazione">
    Benvenuto nel sito.
</p>

<a href="contatti.html" title="Apri i contatti">
    Contatti
</a>

<img src="img/logo.jpg" alt="Logo del sito">

Esempio di analisi

Per:

<h1 id="titolo">Il mio sito</h1>

tag: h1;
attributo: id;
valore dell’attributo: titolo;
contenuto dell’elemento: Il mio sito.

Esercizio autonomo

Creare una pagina denominata profilo.html dedicata a un argomento informatico a scelta.

Creare una pagina denominata profilo.html dedicata a un argomento informatico a scelta.

La pagina deve contenere:

un h1 con un attributo id;
almeno due h2 con id differenti;
almeno tre paragrafi;
due paragrafi appartenenti alla stessa class;
almeno un elemento con attributo title;
l’attributo lang nell’elemento html;
almeno un elemento che possieda contemporaneamente due attributi.

Criteri di verifica

Gli attributi devono essere inseriti nel tag di apertura.
La sintassi nome="valore" deve essere corretta.
Attributi differenti devono essere separati da uno spazio.
I valori degli id devono essere univoci nel documento.
La stessa class può essere assegnata a più elementi.
Il codice deve essere correttamente indentato.

Verifica rapida

Domande di controllo

Che cos’è un attributo HTML?
Dove vengono inseriti gli attributi?
Qual è la struttura generale di un attributo con valore?
A cosa serve il simbolo =?
Come si inseriscono più attributi nello stesso elemento?
Qual è la differenza tra id e class?
A cosa serve l’attributo title?
A cosa serve l’attributo lang?
Che cosa si intende per attributo globale?
Qual è la differenza tra un attributo globale e un attributo specifico?
Quale attributo indica la destinazione di un collegamento?
Quali attributi abbiamo osservato nell’elemento img?
Che cosa caratterizza un attributo booleano?

Sviluppo Web

Attributi

Introduzione agli attributi HTML, alla sintassi nome-valore e al loro utilizzo per aggiungere informazioni e configurare il comportamento degli elementi.