I titoli sono comuni nella maggior parte delle pagine web. In effetti, praticamente qualsiasi documento di testo tende ad avere almeno un titolo in modo che tu conosca il titolo di ciò che stai leggendo. Questi titoli sono codificati utilizzando il HTML elementi di intestazione — h1, h2, h3, h4, h5 e h6.
Su alcuni siti, potresti scoprire che i titoli sono codificati senza utilizzare questi elementi. Invece, i titoli possono utilizzare paragrafi con attributi di classe specifici aggiunti o divisioni con elementi di classe. Il motivo per cui sentiamo spesso parlare di questa pratica scorretta è che al designer "non piace l'aspetto delle intestazioni". Per impostazione predefinita, le intestazioni vengono visualizzate in grassetto e sono di dimensioni maggiori, in particolare gli elementi h1 e h2 che vengono visualizzati con dimensioni del carattere molto più grandi rispetto al resto del testo di una pagina. Tieni presente che questo è solo l'aspetto predefinito di questi elementi! Con CSS
, puoi far apparire l'intestazione come vuoi! Puoi modificare la dimensione del carattere, rimuovere il grassetto e molto altro ancora. I titoli sono il modo corretto per codificare i titoli di una pagina. Ecco alcuni motivi.Perché utilizzare i tag di intestazione anziché le divisioni?
Questa è la ragione migliore per usare i titoli e usarli nell'ordine corretto (es. h1, poi h2, poi h3, ecc.). Motori di ricerca dare il peso più alto al testo incluso nei tag di intestazione perché c'è un valore semantico a quel testo. In altre parole, etichettando il titolo della tua pagina con H1, dici allo spider del motore di ricerca che quello è il focus n. 1 della pagina. Le intestazioni H2 hanno l'enfasi n. 2 e così via.
Non devi ricordare quali classi hai usato per definire i tuoi titoli
Quando sai che tutte le tue pagine Web avranno un H1 che è grassetto, 2em e giallo, puoi definirlo una volta nel tuo foglio di stile e fatto. 6 mesi dopo, quando aggiungi un'altra pagina, aggiungi semplicemente un tag H1 nella parte superiore della tua pagina, non hai per tornare ad altre pagine per scoprire quale ID di stile o classe hai usato per definire il titolo principale e i sottotitoli.
Fornisci un forte contorno della pagina
I contorni facilitano la lettura del testo. Ecco perché la maggior parte delle scuole degli Stati Uniti ha insegnato agli studenti a scrivere uno schema prima di scrivere il documento. Quando utilizzi i tag di intestazione in un formato strutturato, il tuo testo ha una struttura chiara che diventa evidente molto rapidamente. Inoltre, ci sono strumenti che possono rivedere la struttura della pagina per fornire una sinossi e questi si basano sui tag di intestazione per la struttura del profilo.
La tua pagina avrà senso anche con gli stili disattivati
Non tutti possono visualizzare o utilizzare i fogli di stile (e questo torna al punto 1: i motori di ricerca visualizzano il contenuto (testo) della tua pagina, non i fogli di stile). Se utilizzi i tag di intestazione, rendi le tue pagine più accessibili perché i titoli forniscono informazioni che a tag DIV non lo farebbe.
È utile per i lettori dello schermo e l'accessibilità dei siti Web
L'uso corretto delle intestazioni crea una struttura logica per un documento. Questo è ciò che gli screen reader utilizzeranno per "leggere" un sito a un utente con problemi di vista, rendendo il tuo sito accessibile alle persone con disabilità.
Dai uno stile al testo e al carattere dei tuoi titoli
Il modo più semplice per allontanarsi dal problema "grande, audace e brutto" dei tag di intestazione è quello di modellare il testo nel modo in cui si desidera che appaiano. In effetti, quando si lavora su un nuovo sito Web, è meglio scrivere per prima cosa gli stili di paragrafo, h1, h2 e h3. Attieniti solo alla famiglia di caratteri e alle dimensioni/peso. Ad esempio, questo potrebbe essere un foglio di stile preliminare per un nuovo sito (questi sono solo alcuni stili di esempio che potrebbero essere utilizzati):
Puoi modificare il caratteri del titolo o modificare lo stile del testo o anche il colore del testo. Tutti questi trasformeranno il tuo titolo "brutto" in qualcosa di più vibrante e in linea con il tuo design.
I confini possono vestire i titoli
I bordi sono un ottimo modo per migliorare i titoli e sono facili da aggiungere. Ma non dimenticare di sperimentare con i bordi: non è necessario un bordo su ciascun lato del titolo. E puoi usare più di semplici bordi noiosi.
Abbiamo aggiunto un bordo superiore e inferiore al titolo di esempio per introdurre alcuni stili visivi interessanti. Puoi aggiungere bordi in qualsiasi modo desideri per ottenere lo stile di design che desideri.
Aggiungi immagini di sfondo ai tuoi titoli per avere ancora più Pizazz
Molti siti Web hanno una sezione di intestazione nella parte superiore della pagina che include un titolo, in genere il titolo del sito e un'immagine. La maggior parte dei designer pensa a questo come a due elementi separati, ma non è necessario. Se la grafica è lì solo per decorare il titolo, perché non aggiungerla agli stili di intestazione?
Il trucco di questo titolo è che sappiamo che la nostra immagine è alta 90 pixel. Quindi abbiamo aggiunto il padding nella parte inferiore del titolo di 90px (padding: 0,5 0 90 px 0p;). Puoi giocare con i margini, l'altezza della linea e il riempimento per visualizzare il testo del titolo esattamente dove lo desideri.
Una cosa da ricordare quando si utilizzano le immagini è che se si dispone di un sito web reattivo (cosa che dovresti) con un layout che cambia in base alle dimensioni dello schermo e ai dispositivi, il titolo non sarà sempre della stessa dimensione. Se hai bisogno che il tuo titolo abbia una dimensione esatta, questo può causare problemi. È uno dei motivi per cui generalmente evitiamo le immagini di sfondo in un titolo, per quanto interessanti possano sembrare a volte.
Sostituzione dell'immagine nei titoli
Questa è un'altra tecnica popolare per i web designer perché consente di creare un titolo grafico e sostituire il testo del tag di intestazione con quell'immagine. Questa è davvero una pratica anticata dai web designer, che avevano accesso a pochissimi caratteri e volevano usare caratteri più esotici nel loro lavoro. L'ascesa dei caratteri web ha davvero cambiato il modo in cui i designer si avvicinano ai siti. I titoli ora possono essere impostati in un'ampia varietà di caratteri e le immagini con quei caratteri incorporati non sono più necessarie. Pertanto, troverai solo immagini CSS sostitutive per i titoli su siti più vecchi che non sono stati ancora aggiornati a pratiche più moderne.
A cura di Jeremy Girard