Il tag <SPAN> in Html
In questa lezione del corso Html di StemKB ti parlo del tag <span>
<span> </span>
Il tag <span> ti permette di selezionare una parte di un testo in linea. Il testo che vuoi selezionare deve essere compreso tra il tag di apertura <span> e quello di chiusura </span>
Ecco <span>un esempio</span> di utilizzo.
A cosa serve?
Ti permette di applicare una formattazione specifica o uno stile CSS al testo selezionato, senza modificare quella del testo che lo contiene.
Ti faccio un esempio pratico.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Titolo della pagina</title>
- <style>
- .rosso { color:red; }
- </style>
- </head>
- <body>
- <p>Ecco <span class=rosso>un esempio</span> di utilizzo</p>
- ...
- </body>
- </html>
In questo codice viene definita la classe "rosso" in CSS che attribuisce il colore rosso al testo.
Il tag <span> applica la classe al testo selezionato tramite l'attributo class=rosso.
Quando il browser incontra il tag <span> applica lo stile solo al testo selezionato, piuttosto che a tutto il paragrafo.
Ecco un esempio di utilizzo.
Il tag <span> è uno degli elementi inline del linguaggio HTML perché puoi utilizzarlo all'interno di altri elementi, come paragrafi, intestazioni o liste.
Puoi usarlo soltanto all'interno della sezione <body> del documento.
La sua funzione principale è applicare stili specifici a parti di testo, come colore, carattere, dimensione del testo e altro ancora, senza modificare lo stile del testo che lo contiene e degli elementi circostanti.
La differenza tra <span> e <div>. Entrambi i tag applicano uno stile Css agli elementi della pagina web. Tuttavia, il tag span si utilizza per brevi parti di testo in linea, perché non aggiunge un ritorno a capo su un nuova linea. Il tag <div>, invece, si usa prevalentemente per selezionare un intero blocco di testi o più blocchi all'interno della pagina.
Il tag <span> ti permette anche di applicare un javascript al testo selezionato
Ecco <span onclick="highlightText()">un esempio</span> di utilizzo.
In questo modo puoi realizzare degli effetti dinamici su singole parole o parti del testo e associarle ad azioni specifiche quando vengono cliccate.
