Evidenziare il testo su una pagina web aiuta a portare immediatamente le informazioni importanti all’attenzione del lettore. Per esempio, questo testo è evidenziato in giallo e probabilmente ha attirato la tua attenzione per primo. Ci sono diversi metodi per evidenziare il testo. Per procedere, seleziona un metodo dalla lista qui sotto e segui le istruzioni.
Evidenziazione usando il tag HTML5 <mark>
Se stai lavorando su una pagina HTML5, il tag <mark> può evidenziare rapidamente il testo. Qui sotto c’è un esempio di come usare il tag mark e il suo risultato. Se il tuo browser supporta il tag <mark>, il “testo evidenziato” dovrebbe avere uno sfondo giallo.
Codice d’esempio
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Esempio di risultato
Ecco un esempio di testo evidenziato usando il tag <mark>.
Evidenzia il testo solo con codice HTML
Per evidenziare il testo con codice HTML e supporto per tutti i browser, imposta lo stile background-color, come mostrato nell’esempio qui sotto, usando il tag <span> HTML.
Codice d’esempio
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Esempio di risultato
Questo testo è evidenziato in giallo.
Nell’esempio sopra, il tag HTML <span> ha un codice di colore di sfondo #FFFF00, che è giallo. In questo caso, la parola “yellow” potrebbe essere usata al posto del codice del colore, o qualsiasi altro nome di colore.
Con lo stesso codice, si potrebbe anche evidenziare una o più parole all’interno di un paragrafo per attirare l’attenzione su una sezione specifica del testo.
Evidenzia il testo con i CSS & HTML
Puoi anche creare una classe CSS e impostare l’attributo “background-color”, come mostrato nell’esempio qui sotto.
Codice di esempio
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
Nel codice CSS qui sopra, ci sono tre elementi definiti. In primo luogo, il colore di sfondo del corpo è impostato su blu, in secondo luogo, una nuova classe chiamata “highlightme” con uno sfondo giallo, e infine, il tag paragrafo ha uno sfondo bianco.
Se volete usare la classe “highlightme” per evidenziare il vostro testo, potete creare un tag <span> nel vostro HTML che faccia riferimento alla classe CSS.
Codice di esempio
<span class="highlightme">test</span>
Come evidenziare un paragrafo completo
La classe CSS o classe di stile menzionata sopra potrebbe anche essere applicata ad un tag paragrafo se si volesse evidenziare un paragrafo completo come mostrato qui sotto.
Codice d’esempio
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Esempio di risultato
Questo intero paragrafo di testo è evidenziato in giallo.
Informazioni aggiuntive
- Vedi i nostri CSS, evidenziazione e definizione HTML per ulteriori informazioni relative alle pagine.
- Aiuto e supporto sui colori CSS e HTML.