I titoli sono comuni nella maggior parte delle pagine web. In effetti, quasi tutti i documenti di testo tendono ad avere almeno un titolo in modo da conoscere il titolo di ciò che stai leggendo. Questi titoli sono codificati usando gli elementi di intestazione HTML: h1, h2, h3, h4, h5 e h6.
Su alcuni siti, è possibile che i titoli siano codificati senza utilizzare questi elementi. Invece, i titoli possono usare paragrafi con attributi di classe specifici aggiunti a loro, o divisioni con elementi di classe. La ragione per cui sento spesso parlare di questa pratica scorretta è che il designer "non ama il modo in cui i titoli appaiono". Per impostazione predefinita, le intestazioni sono visualizzate in grassetto e hanno dimensioni maggiori, in particolare gli elementi h1 e h2 che mostrano dimensioni di carattere molto più grandi rispetto al resto del testo di una pagina. Tieni presente che questo è solo l'aspetto predefinito di questi elementi! Con i CSS, puoi rendere l'intestazione come vuoi! Puoi cambiare 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é i DIV e lo stile
Motori di ricerca come tag di intestazione
Questa è la ragione migliore per usare le intestazioni e usarle nell'ordine corretto (cioè h1, quindi h2, poi h3, ecc.). I motori di ricerca attribuiscono la massima ponderazione al testo incluso nei tag di intestazione perché esiste un valore semantico per quel testo. In altre parole, etichettando il titolo della tua pagina H1, dici allo spider del motore di ricerca che quello è il focus n. 1 della pagina. Le intestazioni H2 hanno enfasi # 2 e così via.
Non devi ricordare quali lezioni hai utilizzato per definire i titoli
Quando sai che tutte le tue pagine Web avranno un H1 che è in grassetto, 2em e giallo, puoi definirlo una volta nel tuo foglio di stile ed essere fatto. 6 mesi dopo, quando aggiungi un'altra pagina, aggiungi semplicemente un tag H1 alla parte superiore della pagina, non devi tornare alle altre pagine per scoprire quale ID di stile o classe hai usato per definire la principale titolo e sottotitoli.
Forniscono una forte struttura della pagina
I contorni rendono il testo più facile da leggere. Ecco perché la maggior parte delle scuole degli Stati Uniti ha insegnato agli studenti a scrivere una bozza prima di scrivere il giornale. Quando si utilizzano i tag di intestazione in un formato di struttura, il testo ha una struttura chiara che diventa evidente molto rapidamente. Inoltre, ci sono strumenti in grado di rivedere il contorno della pagina per fornire una sinossi, e questi si basano sui tag di intestazione per la struttura del profilo.
La tua pagina avrà un senso anche con gli stili disattivati
Non tutti possono visualizzare o utilizzare i fogli di stile (e questo torna al n. 1 - i motori di ricerca visualizzano il contenuto (testo) della tua pagina, non i fogli di stile). Se utilizzi i tag di intestazione, stai rendendo le tue pagine più accessibili perché i titoli forniscono informazioni che un tag DIV non avrebbe.
È utile per i lettori di schermate e l'accessibilità ai siti web
L'uso corretto dei titoli crea una struttura logica per un documento. Questo è ciò che gli screen reader useranno per "leggere" un sito per un utente con problemi di vista, rendendo il tuo sito accessibile alle persone con disabilità.
Stile il testo e il carattere dei titoli
Il modo più semplice per allontanarsi dal problema "grande, audace e brutto" dei tag di intestazione è quello di dare uno stile al testo nel modo in cui si desidera visualizzarli. In effetti, quando si lavora su un nuovo sito Web, è preferibile scrivere in primo luogo gli stili paragrafo, h1, h2 e h3. Rimani con solo famiglia di font e dimensioni / peso. Ad esempio, questo potrebbe essere un foglio di stile preliminare per un nuovo sito (questi sono solo alcuni esempi di stili che potrebbero essere utilizzati):
È possibile modificare i caratteri del titolo o modificare lo stile del testo o anche il colore del testo. Tutto ciò trasformerà il tuo "brutto" titolo in qualcosa di più vivace 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 confini: non hai bisogno di un bordo su ciascun lato del titolo. E puoi usare più che semplici confini noiosi.
Ho aggiunto un bordo superiore e uno inferiore al titolo del mio esempio per introdurre alcuni stili visivi interessanti. È possibile aggiungere bordi in qualsiasi modo si desideri ottenere lo stile di progettazione desiderato.
Aggiungi immagini di sfondo ai tuoi titoli per 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 elemento grafico. La maggior parte dei designer pensa a questo come a due elementi separati, ma non è necessario. Se il grafico è lì solo per decorare il titolo, perché non aggiungerlo agli stili di titolo?
Il trucco di questo titolo è che so che la mia immagine è alta 90 pixel. Così ho aggiunto padding alla fine del titolo di 90px (padding: 0.5 0 90px 0p;). Puoi giocare con i margini, l'altezza della linea e il riempimento per ottenere il testo del titolo da visualizzare esattamente dove lo vuoi.
Una cosa da ricordare quando si usano le immagini è che se si dispone di un sito Web reattivo (che si dovrebbe) 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 titolo sia di dimensioni esatte, questo può causare problemi. È uno dei motivi per cui in genere evito le immagini di sfondo in un titolo, così bello come a volte possono sembrare.
Sostituzione dell'immagine nei titoli
Questa è un'altra tecnica popolare per i progettisti Web perché consente di creare un titolo grafico e sostituire il testo del tag di intestazione con quell'immagine.Questa è davvero una pratica antiquata dei web designer, che avevano accesso a pochissimi tipi di carattere 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. Le intestazioni ora possono essere impostate in un'ampia varietà di tipi di carattere e immagini con quei caratteri incorporati non più necessari. In quanto tale, troverai solo la sostituzione delle immagini CSS per titoli su siti meno recenti che non sono stati ancora aggiornati a pratiche più moderne.
Modificato da Jeremy Girard il 9/6/17
