Lezione 7 - Corso Avanzato Html

La Lingua del Documento in Html


Lingua del Documento

In questa lezione vedremo come si può indicare, all'interno della nostra pagina web, la lingua che stiamo utilizzando. Questo riguarda sia la pagina intera, che porzioni di essa, come ad esempio dei blocchi di testo che noi inseriamo nella pagina.

E' utili indicara la lingua anche perché viene meglio indicizzata dai motori di ricerca.

E' ancora utili indicara la lingua perché rendiamo più accessibile, ad alcuni programmi alternativi ai browser ad esempio i sintetizzatori vocali (screen reader - lettore dello schermo), la comprensione e quindi la lettura di un blocco di testo di cui ne abbiamo indicato la lingua.

Per specificare che tipo di lingua stiamo usando si inserisce l'attributo lang.

Si puo inserire sia in <html> e indica che la lingua usata è per tutta la pagina, o in dei singoli elementi di blocco.

Possimo trovare tutte le sigle su Wikipedia alla voce List of ISO 639-1 codes

Esempio di come si può inserire l'attributo lang:

<html lang="it">


<p lang="it">
Paragrafo in lingua italiana</p>

<p lang="en">
Paragraph in english language</p>

Così siamo sicuri che questi paragrafi verranno letti in maniera corretta, uno in lingua italiana, l'altro in lingua inglese, mentre il resto della pagina, come abbiamo specificato, tutto in lingua italiana.


Ora passiamo al foglio di stile.

Usiamo, per la prima volta, una pseudo-classe
Una pseudo-classe indica un particolare stato dell'elemento a cui vengono applicate.
In questo caso gli diciamo di colorare di rosso il paragrafo di lingua italiana e di giallo il paragrafo di lingua inglese.

Prendete per buono quello che ho detto sulla pseudo-classe sarà un argomento che affronteremo e approfondiremo nel corso dei Fogli di Stile Css.

Il codice sarà:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Lingua del Documento</title>
  <meta charset="utf-8">
  <style>
	p:lang(it){
		color: green;
	}
	p:lang(en){
		color: red;
	}
  </style>
 </head>
 <body>			    
	<h3>Paragrafi con lingue differenti</h3>
	<p lang="it">Paragrafo in lingua italiana</p>
	<p lang="en">Paragraph in english language</p>
 </body>                
</html>