HTML - Attributi

Abbiamo visto pochi tag HTML e il loro utilizzo come i tag di intestazione <h1>, <h2>, tag paragrafo <p>e altri tag. Finora li abbiamo usati nella loro forma più semplice, ma la maggior parte dei tag HTML possono anche avere attributi, che sono bit di informazioni extra.

Un attributo viene utilizzato per definire le caratteristiche di un elemento HTML e viene inserito all'interno del tag di apertura dell'elemento. Tutti gli attributi sono costituiti da due parti: aname e a value

Il nameè la proprietà che desideri impostare. Ad esempio, il paragrafo<p> elemento nell'esempio porta un attributo il cui nome è align, che puoi utilizzare per indicare l'allineamento del paragrafo sulla pagina.
Il valueè quello che vuoi che il valore della proprietà sia impostato e inserito sempre tra virgolette. L'esempio seguente mostra tre possibili valori dell'attributo align: left, center e right.

I nomi degli attributi ei valori degli attributi non fanno distinzione tra maiuscole e minuscole. Tuttavia, il World Wide Web Consortium (W3C) raccomanda attributi / valori di attributo in minuscolo nella loro raccomandazione HTML 4.

Esempio

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Questo mostrerà il seguente risultato:

Attributi fondamentali

I quattro attributi principali che possono essere utilizzati sulla maggior parte degli elementi HTML (anche se non tutti) sono:

Id
Title
Class
Style

L'attributo Id

Il idl'attributo di un tag HTML può essere utilizzato per identificare in modo univoco qualsiasi elemento all'interno di una pagina HTML. Ci sono due ragioni principali per cui potresti voler utilizzare un attributo id su un elemento:

Se un elemento porta un attributo id come identificatore univoco, è possibile identificare solo quell'elemento e il suo contenuto.
Se hai due elementi con lo stesso nome all'interno di una pagina Web (o foglio di stile), puoi usare l'attributo id per distinguere tra gli elementi che hanno lo stesso nome.

Discuteremo il foglio di stile in un tutorial separato. Per ora, usiamo l'attributo id per distinguere tra due elementi di paragrafo come mostrato di seguito.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

L'attributo del titolo

Il titleattributo fornisce un titolo suggerito per l'elemento. Hanno sintassi per iltitle l'attributo è simile a quanto spiegato per id attributo -

Il comportamento di questo attributo dipenderà dall'elemento che lo trasporta, sebbene venga spesso visualizzato come un suggerimento quando il cursore passa sopra l'elemento o durante il caricamento dell'elemento.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Questo produrrà il seguente risultato:

Ora prova a portare il cursore su "Esempio di tag di intestazione con titolo" e vedrai che qualunque titolo tu abbia usato nel tuo codice viene fuori come un suggerimento del cursore.

L'attributo di classe

Il classl'attributo viene utilizzato per associare un elemento a un foglio di stile e specifica la classe dell'elemento. Imparerai di più sull'uso dell'attributo class quando imparerai Cascading Style Sheet (CSS). Quindi per ora puoi evitarlo.

Il valore dell'attributo può anche essere un elenco di nomi di classi separati da spazi. Ad esempio:

class = "className1 className2 className3"

L'attributo di stile

L'attributo style consente di specificare le regole CSS (Cascading Style Sheet) all'interno dell'elemento.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Questo produrrà il seguente risultato:

A questo punto, non stiamo imparando i CSS, quindi procediamo senza preoccuparci troppo dei CSS. Qui, è necessario capire cosa sono gli attributi HTML e come possono essere utilizzati durante la formattazione del contenuto.

Attributi di internazionalizzazione

Ci sono tre attributi di internazionalizzazione, che sono disponibili per la maggior parte (anche se non tutti) gli elementi XHTML.

dir
lang
xml:lang

L'attributo dir

Il dirl'attributo consente di indicare al browser la direzione in cui il testo deve scorrere. L'attributo dir può assumere uno dei due valori, come puoi vedere nella tabella che segue:

Valore	Senso
ltr	Da sinistra a destra (il valore predefinito)
rtl	Da destra a sinistra (per lingue come l'ebraico o l'arabo che vengono lette da destra a sinistra)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Questo produrrà il seguente risultato:

Quando l' attributo dir viene utilizzato all'interno del tag <html>, determina come il testo verrà presentato all'interno dell'intero documento. Quando viene utilizzato all'interno di un altro tag, controlla la direzione del testo solo per il contenuto di quel tag.

L'attributo lang

Il langl'attributo ti consente di indicare la lingua principale utilizzata in un documento, ma questo attributo è stato mantenuto in HTML solo per compatibilità con le versioni precedenti di HTML. Questo attributo è stato sostituito dalxml:lang attributo nei nuovi documenti XHTML.

I valori dell'attributo lang sono codici di lingua a due caratteri standard ISO-639. Dai un'occhiataHTML Language Codes: ISO 639 per un elenco completo dei codici di lingua.

Example

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

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Questo produrrà il seguente risultato:

L'attributo xml: lang

L' attributo xml: lang è la sostituzione XHTML dell'attributo lang . Il valore dell'attributo xml: lang dovrebbe essere un codice paese ISO-639 come menzionato nella sezione precedente.

Attributi generici

Ecco una tabella di alcuni altri attributi che sono facilmente utilizzabili con molti dei tag HTML.

Attributo	Opzioni	Funzione
allineare	destra, sinistra, centro	Allinea orizzontalmente i tag
valign	in alto, al centro, in basso	Allinea verticalmente i tag all'interno di un elemento HTML.
bgcolor	valori numerici, esadecimali, RGB	Posiziona un colore di sfondo dietro un elemento
sfondo	URL	Posiziona un'immagine di sfondo dietro un elemento
id	Definito dall'utente	Denomina un elemento da utilizzare con Cascading Style Sheets.
classe	Definito dall'utente	Classifica un elemento da utilizzare con Cascading Style Sheets.
larghezza	Valore numerico	Specifica la larghezza di tabelle, immagini o celle di tabella.
altezza	Valore numerico	Specifica l'altezza di tabelle, immagini o celle di tabella.
titolo	Definito dall'utente	Titolo "pop-up" degli elementi.

Vedremo esempi correlati man mano che procederemo allo studio di altri tag HTML. Per un elenco completo dei tag HTML e degli attributi correlati, consultare il riferimento all'elenco dei tag HTML .