Per impostazione predefinita, contenuto di testo che è collegato all'HTML l'uso dell'elemento o "anchor" ha uno stile con una sottolineatura. Spesso, i web designer scelgono di rimuovere questo stile predefinito rimuovendo la sottolineatura.
Ragioni a favore e contro la sottolineatura
A molti designer non interessa l'aspetto del testo sottolineato, specialmente in blocchi densi di contenuto con molti collegamenti. Tutte quelle parole sottolineate possono davvero interrompere il flusso di lettura di un documento. Molti hanno sostenuto che quelle sottolineature in realtà rendono le parole più difficili da distinguere e leggere rapidamente a causa del modo in cui la sottolineatura cambia le forme naturali delle lettere.
Tuttavia, ci sono vantaggi legittimi nel mantenere queste sottolineature sui collegamenti di testo. Ad esempio, quando si sfogliano grandi blocchi di testo, i collegamenti sottolineati abbinati a un contrasto di colore adeguato consentono ai lettori di scansionare immediatamente una pagina e vedere dove si trovano i collegamenti.
Se decidi di rimuovere i collegamenti dal testo (un processo semplice che tratteremo a breve), assicurati di trovare modi per modellare quel testo per differenziare ancora ciò che è un collegamento da ciò che è testo normale. Questo è più spesso fatto con contrasto di colore, ma il colore da solo può rappresentare un problema per i visitatori con disabilità visive come il daltonismo. A seconda della loro particolare forma di daltonismo, il contrasto può essere totalmente perso su di loro, impedendo loro di vedere la differenza tra testo collegato e non collegato. Questo è il motivo per cui il testo sottolineato è ancora considerato il modo migliore per mostrare i collegamenti.
Quindi, come si disattiva una sottolineatura se si vuole ancora farlo? Poiché questa è una caratteristica visiva di cui ci occupiamo, ci occuperemo della parte del nostro sito Web che gestisce tutto ciò che è visivo: i CSS.
Usa i fogli di stile a cascata per disattivare le sottolineature sui collegamenti
Nella maggior parte dei casi, non stai cercando di disattivare la sottolineatura su un solo link di testo. Invece, il tuo stile di design probabilmente richiede di rimuovere le sottolineature da tutti i collegamenti. Lo faresti aggiungendo stili al tuo foglio di stile esterno.
un {
decorazione del testo: nessuna;
}
Questo è tutto! Quella semplice linea di CSS disattiverebbe la sottolineatura (che in realtà utilizza la proprietà CSS per la "decorazione del testo") su tutti i collegamenti.
Potresti anche essere più specifico con questo stile. Ad esempio, se volessi solo disattivare la sottolineatura o i collegamenti all'interno dell'elemento "nav", potresti scrivere:
navigazione a {
decorazione del testo: nessuna;
}
Ora, i collegamenti di testo sulla pagina otterrebbero la sottolineatura predefinita, ma quelli nel navigatore l'avrebbero rimossa.
Una cosa che molti web designer scelgono di fare è riattivare il collegamento quando qualcuno passa sopra il testo. Questo dovrebbe essere fatto usando :hover pseudo-classe CSS, come questo:
un {
decorazione del testo: nessuna;
}
a: hover {
decorazione del testo: sottolineatura;
}
Utilizzo di CSS in linea
In alternativa alle modifiche a un foglio di stile esterno, puoi anche aggiungere gli stili direttamente all'elemento stesso in HTML.
Il problema con questo metodo è che inserisce le informazioni di stile all'interno della struttura HTML, il che non è una best practice. Stile (CSS) e struttura (HTML) dovrebbero essere mantenuti separati.
Se desideri rimuovere la sottolineatura da tutti i collegamenti di testo di un sito, aggiungi queste informazioni di stile a ogni collegamento su base individuale significherebbe aggiungere una discreta quantità di markup extra a quello del tuo sito codice. Questa pagina gonfia può rallentare il tempo di caricamento di un sito e rendere la gestione complessiva della pagina molto più impegnativa. Per questi motivi, è preferibile ricorrere sempre a un foglio di stile esterno per tutte le esigenze di stile della pagina.
In chiusura
Per quanto sia facile rimuovere la sottolineatura dai collegamenti di testo di una pagina Web, dovresti anche essere consapevole delle conseguenze di ciò. Sebbene possa effettivamente ripulire l'aspetto di una pagina, può farlo a spese dell'usabilità complessiva. Tienilo in considerazione la prossima volta che prendi in considerazione la modifica delle proprietà di "decorazione del testo" di una pagina.