Share
Che tu sia un webmaster o un web designer, c'è una domanda che probabilmente hai chiesto o risposto molte volte nel corso degli anni. Quella domanda è: "Quanti? i tag posso usare per pagina e come esattamente dovrei implementarli? "
Ci sono generalmente due ragioni per cui questa domanda viene posta. Il primo e più comune è per scopi SEO; garantire che il contenuto sia formattato nel modo migliore possibile per facilitare l'indicizzazione del motore di ricerca. Il secondo è la correttezza tecnica; assicurando che il markup sia scritto in accordo con le specifiche W3C appropriate.
Con l'avvento di HTML5 la risposta a questa domanda è notevolmente cambiata sia in termini di SEO che di aspetti tecnici. Ora non è solo possibile avere più persone intestazioni di livello per pagina web che avranno senso per i motori di ricerca, ma nella maggior parte dei casi è in realtà il corso consigliato.
Tuttavia, poiché le specifiche HTML5 non sono ancora completamente comprese, ci sono ancora molti consigli in giro, alcuni anche scritti di recente, basati sulle regole del web design pre-HTML5.
In questo tutorial chiariremo alcuni equivoci. Daremo un'occhiata approfondita a cosa significa HTML5 tag l'utilizzo, così come come sfruttare i miglioramenti ora disponibili per creare pagine web che sono più semanticamente ricche e ben strutturate che mai.
Per molto tempo è stata considerata una delle regole cardine di HTML e SEO che ogni singola pagina di un sito dovrebbe avere titolo di livello e uno solo. Inoltre, la regola prevedeva che questo singolare l'intestazione dovrebbe indicare l'oggetto principale della pagina.
Questa regola è stata generalmente seguita con l'obiettivo di aiutare i motori di ricerca a comprendere meglio l'argomento principale di ogni pagina, in modo che potessero determinare la loro pertinenza a varie frasi di ricerca, migliorare l'accuratezza del motore di ricerca e quindi migliorare le classifiche per i siti ben predisposti.
Consideriamo un esempio di sito Web aziendale pre-HTML5. In questo sito di esempio, il nome dell'attività viene visualizzato nella sezione dell'intestazione su tutte le pagine, la homepage contiene una descrizione dell'attività e in un'altra area del sito vengono pubblicati gli articoli degli esperti.
Nel seguire il "Single" Tag "regola, la homepage di questo sito ha i tag applicati al nome dell'attività nella sezione dell'intestazione, a indicare che l'attività commerciale è l'oggetto principale di tale pagina.
Tuttavia, in un articolo pubblicato altrove su quello stesso sito web, i tag vengono rimossi dal nome dell'attività nell'intestazione e vengono invece applicati al titolo dell'articolo. Ciò avviene perché il titolo dell'articolo fornisce un'etichetta più rappresentativa per l'oggetto principale della pagina, che ora è il contenuto dell'articolo anziché la descrizione dell'azienda che si trovava nella home page.
Una versione pre-HTML5 di questo sito Web verrebbe quindi contrassegnata come segue:
Nonostante la lunga attenzione di sempre tag, non sono mai stati un elemento che operava in isolamento, indipendentemente dal resto del documento. C'è una ragione dietro l'importanza di un posizionamento accurato dei tag di intestazione sia nelle ere HTML5 sia in quelle pre-HTML5, e questa è la generazione di profili del documento.
I contorni dei documenti sono qualcosa di simile a un sommario di un sito web. Sono generati automaticamente dal markup su qualsiasi pagina web.
Prima di HTML5, i profili del documento sono stati generati dall'uso dei tag di intestazione attraverso . Ogni uso di un titolo implicherebbe l'inizio di una nuova sezione di contenuti.
Prendiamo ad esempio il seguente html, notando il posizionamento di , e tag, che determineranno il profilo del documento:
Esempio di markup pre-HTML5 L'uso corretto di arachidi
Come mangiare le arachidi
Le arachidi possono essere mangiate con sale.
Questo è un uso accettabile di arachidi.
Metodi di mangiare arachidi superiori
Le arachidi sono infinitamente migliori se combinate con il cioccolato.
Raccomandiamo questo approccio per i migliori risultati
Applicazione errata di arachidi
Le arachidi non dovrebbero essere usate per riempire i parchimetri.
Non saranno efficaci in questa capacità.
Pre-HTML5, il markup sopra genererebbe un profilo del documento come segue:
Il primo elemento è considerato l'etichetta per l'intero documento. Le intestazioni successive sono considerate le etichette per le sezioni di contenuto all'interno di quel documento, formando un albero al di sotto di esso.
L'esempio sopra è abbastanza semplice, ma nelle pagine Web wild sono raramente così semplici. Quando abbiamo bisogno di una presentazione dei contenuti più complessa, ci imbattiamo nel grosso problema con il markup pre-HTML5 e il motivo per cui in precedenza era necessario utilizzarne solo uno titolo di livello per pagina.
Nell'esempio sopra abbiamo un singolo argomento in discussione: "L'uso corretto delle arachidi". Ma cosa succede se questo argomento viene discusso su una pagina con più articoli di uguale importanza, come si potrebbe vedere su un blog per esempio?
Prendi questo html con un secondo articolo visualizzato, (ogni articolo è incluso Le arachidi possono essere mangiate con sale. Questo è un uso accettabile di arachidi. Le arachidi sono infinitamente migliori se combinate con il cioccolato. Raccomandiamo questo approccio per i migliori risultati Le arachidi non dovrebbero essere usate per riempire i parchimetri. Non saranno efficaci in questa capacità. Siamo onesti, ci vogliono secoli. Consigliamo solo l'acquisto di fagioli in scatola. Pre-HTML5, questo markup avrebbe generato il seguente schema del documento: Ora, anche se ci sono due articoli di uguale importanza sulla pagina, il titolo dell'articolo "L'uso corretto delle arachidi" è ancora interpretato come l'etichetta che rappresenta l'intero documento semplicemente perché è il primo incontrato. Ciò indicherebbe quindi che l'intero argomento della pagina è "L'uso corretto delle arachidi" anche se il secondo articolo riguarda un argomento completamente diverso. Il modo tipico per combattere questo è stato quello di creare un intestazione tutto-con Le arachidi possono essere mangiate con sale. Questo è un uso accettabile di arachidi. Le arachidi sono infinitamente migliori se combinate con il cioccolato. Raccomandiamo questo approccio per i migliori risultati Le arachidi non dovrebbero essere usate per riempire i parchimetri. Non saranno efficaci in questa capacità. Siamo onesti, ci vogliono secoli. Consigliamo solo l'acquisto di fagioli in scatola. Nota l'aggiunta del generalizzato Il seguente schema del documento verrebbe ora generato: Questo schema del documento, sebbene sia il migliore che si possa fare pre-HTML5, presenta alcuni problemi significativi: È qui che arriva HTML5 per salvare la giornata e risolvere ciascuno di questi problemi. Se consideri ognuno dei problemi appena descritti, tutti hanno una radice comune e piuttosto semplice: L'assunto che ogni pagina web sia un documento singolare con un argomento singolare che richiede solo un'etichetta singolare. La soluzione altrettanto semplice a questi problemi deriverebbe dalla capacità di indicare se una pagina web avesse sezioni discrete, potenzialmente con più argomenti ciascuno con la propria etichetta significativa. Se fosse possibile specificare che ciascun articolo su una pagina fosse separato, ciò renderebbe possibile etichettarli con titoli significativi che rappresentassero accuratamente il loro contenuto e dare a ognuno lo stesso peso di importanza. Se fosse possibile chiarire quando un titolo del sito non fosse rappresentativo del contenuto della pagina, il problema della diluizione della pertinenza sarebbe risolto. Con un'indicazione chiara al posto della differenza tra titolo del sito, articoli e titoli degli articoli, non sarebbe più necessario modificare il markup da un'area all'altra. UN E poiché sarebbe chiaro se il titolo del sito non rappresentasse il contenuto dell'articolo sulla pagina, sarebbe possibile impostarlo su qualsiasi cosa, non importa quanto sia astratto. HTML5 rende possibili tutte queste cose attraverso l'introduzione dei suoi elementi semantici e dell'algoritmo del documento HTML5. Sebbene la struttura del documento pre-HTML5 sia stata ricavata esclusivamente dai tag di intestazione, l'algoritmo del profilo del documento HTML5 utilizza i seguenti aspetti chiave: Capire in che modo questi aspetti di HTML5 sono usati è relativamente semplice, e il processo in genere è molto simile a questo: Ci sono molti altri aspetti dell'algoritmo di struttura del documento HTML5. Informazioni complete su questi sono disponibili su W3C. Tuttavia, con solo gli aspetti sopra elencati, siamo in grado di risolvere tutti i problemi descritti nella sezione precedente di questo tutorial. Diamo un'altra occhiata al nostro "Blog di letteratura sui legumi", in quanto potrebbe essere contrassegnato usando HTML5. Sono state apportate le seguenti semplici modifiche: Le arachidi possono essere mangiate con sale. Questo è un uso accettabile di arachidi. Le arachidi sono infinitamente migliori se combinate con il cioccolato. Raccomandiamo questo approccio per i migliori risultati Le arachidi non dovrebbero essere usate per riempire i parchimetri. Non saranno efficaci in questa capacità. Siamo onesti, ci vogliono secoli. Consigliamo solo l'acquisto di fagioli in scatola. Ora l'algoritmo del documento HTML5 ci fornisce quanto segue: La prima cosa che potresti notare è l'aspetto del Si noti che in HTML5, L'aspetto del Ciò significa che tutti i problemi descritti in precedenza in questo tutorial sono stati risolti immediatamente: Ora puoi anche vedere dal profilo del documento HTML5 generato dal nostro markup che è perfettamente appropriato utilizzarne altrettante Puoi anche vedere da questo esempio come sarebbe meno corretto usare solo un set di Se avevi ancora Questo perché segnando i titoli degli articoli con A sua volta, i sottotitoli di secondo livello dei tuoi articoli verrebbero necessariamente contrassegnati con È consentito dalle specifiche HTML5 utilizzare i titoli di livello inferiore di La cosa migliore da fare in tutti i casi è considerare attentamente il contenuto a portata di mano e determinare il modo migliore per separarlo e etichettarlo in base a ciò che ora conosci del documento HTML5 che descrive l'algoritmo. Si è vero. Ora puoi usare tanti set di Proprio come c'erano le regole di Eccoli a colpo d'occhio: Come ho detto sopra, le etichette di sezione non sono assolutamente avere essere Ma se decidi di usare un tag diverso da Ci sono solo quattro serie di tag di elementi che puoi usare per denotare le sezioni di contenuto all'interno della tua pagina web, ma possono essere un po 'complicate per avvolgere la tua mente in un primo momento. Loro sono: I due che probabilmente userete di più sono Per esempi dettagliati su come usare ognuno di questi tag, prenditi un momento per controllare queste pagine del W3C: Per maggiori informazioni su Ora sappiamo che in HTML5 possiamo usare felicemente W3C ha questo da dire: Gli elementi h1-h6 non devono essere utilizzati per contrassegnare sottotitoli, sottotitoli, titoli alternativi e tagline a meno che non siano intesi come intestazione di una nuova sezione o sottosezione. La ragione di ciò è che il profilo del documento HTML5 interpreta sempre un tag di intestazione iniziando una nuova sezione di contenuto, indipendentemente dal fatto che i tag di contenuto delle sezioni siano avvolti attorno a loro o meno. Per un po 'ci fu un work-around per questo Quindi ora il modo migliore per gestire le tagline è solo da usare In questo tutorial ci siamo concentrati su Tuttavia, sarei negligente se non ti avessi indicato nella giusta direzione su alcuni dei più importanti tag HTML5 che puoi utilizzare nel tuo markup per renderlo ancora più semanticamente ricco. Il Se visualizzi un gruppo di articoli, si avvolgerebbe in tutti quegli articoli. Per esempio: Le arachidi possono essere mangiate con sale. Questo è un uso accettabile di arachidi. Le arachidi sono infinitamente migliori se combinate con il cioccolato. Raccomandiamo questo approccio per i migliori risultati Le arachidi non dovrebbero essere usate per riempire i parchimetri. Non saranno efficaci in questa capacità. Siamo onesti, ci vogliono secoli. Consigliamo solo l'acquisto di fagioli in scatola. Ulteriori informazioni: l'elemento principale Il Potresti usarlo per avvolgere il titolo del tuo sito e lo slogan, o il titolo di un articolo e la categoria del blog. Per esempio: Siamo stati dei luvin bean Categoria: fagioli medi Siamo onesti, ci vogliono secoli. Consigliamo solo l'acquisto di fagioli in scatola. Ulteriori informazioni: l'elemento di intestazione Il W3C consiglia il suo utilizzo per articoli come informazioni sull'autore, collegamenti, messaggi di copyright e così via. Per esempio: Siamo stati dei luvin bean tag):
L'uso corretto di arachidi
Come mangiare le arachidi
Metodi di mangiare arachidi superiori
Applicazione errata di arachidi
Fagioli bollenti
I fagioli bollenti ne valgono davvero la pena?
tag ovunque fossero visualizzate più sezioni di contenuto di uguale importanza, nel tentativo di rappresentarle tutte nella massima misura possibile. Per esempio:
Blog di letteratura sui legumi
L'uso corretto di arachidi
Come mangiare le arachidi
Metodi di mangiare arachidi superiori
Applicazione errata di arachidi
Fagioli bollenti
I fagioli bollenti ne valgono davvero la pena?
titolo etichettato, e la retrocessione di ogni successiva voce verso il basso di un livello.
Problemi causati da Profili documento pre-HTML5
Abbiamo il taggato "Legume Literature Blog" titolo che funge da etichetta per l'intera pagina, eppure il testo di questa intestazione dà solo una rappresentazione generalizzata del contenuto. Ciò diluisce la capacità dei motori di ricerca di interpretare l'argomento reale della pagina e, a sua volta, la sua rilevanza per le frasi di ricerca.
Non c'è modo di distinguere i due articoli sulla stessa pagina come entità ugualmente importanti e autonome. Entrambi sono visti come parte di un singolo contenuto globale, anche se non lo sono.
Se un visitatore visualizza uno degli articoli da solo, come si può fare su un tipico blog, il markup dovrebbe essere rielaborato in modo che il i tag vengono applicati al titolo dell'articolo invece del titolo del sito, come ho dimostrato con il mio sito web aziendale di esempio nella sezione precedente.
In molti casi il titolo di un sito, (che tende a svolgere il ruolo di etichetta del documento anche in HTML5), potrebbe non riguardare il contenuto di una pagina in alcun modo significativo. Ad esempio, potrei pubblicare un blog con il titolo del sito "Kezz Says" e potrebbe visualizzare un articolo sulla codifica HTML e un altro su simpatici cuccioli. In questo caso non avrebbe senso interpretare il titolo del sito come rappresentante di uno di questi articoli, quindi dovrei cambiare il nome del mio blog. Questo può essere un problema, in particolare se un sito desidera identificarsi con un nome che può essere memorabile, ma non necessariamente significativo.
L'algoritmo del documento HTML5
titolo del sito taggato potrebbe mantenere il suo tag in tutto il sito.Aspetti chiave dell'algoritmo delineamento di documenti HTML5
tag, quindi c'è sempre un profilo generato per qualsiasi pagina web, a partire dal tag e lavorando attraverso le sezioni in cui è suddiviso.
, , , ,
, , ,
, , , , ,
tag. tag.Risolvere i problemi relativi ai vecchi documenti
aggiunto per richiamare HTML5 i tag sono stati aggiunti avvolgendo ogni articolo, sostituendo il generico tag
fino a tag
Whackamoon Legumes!
L'uso corretto di arachidi
Come mangiare le arachidi
Metodi di mangiare arachidi superiori
Applicazione errata di arachidi
Fagioli bollenti
I fagioli bollenti ne valgono davvero la pena?
(articolo) elemento nella struttura e accanto a quelli le intestazioni per ciascuno dei nostri articoli. i tag sono specificatamente utilizzati per indicare "una composizione completa, o autocontenuta, in un documento, pagina, applicazione o sito e, in linea di principio, distribuibile o riutilizzabile in modo indipendente, ad esempio in syndication. articolo di una rivista o di un giornale, un post di blog, un commento inviato dall'utente, un widget o un gadget interattivo o qualsiasi altro elemento indipendente di contenuto. " (fonte: W3C)(articolo) elemento accanto alle intestazioni dei nostri articoli, piuttosto che i tag delle intestazioni come abbiamo visto prima, ci dice che queste cose stanno ora accadendo nella struttura:
Non abbiamo più alcuna diluizione di rilevanza rispetto alle etichette generalizzate, poiché l'etichetta di ciascun articolo è chiaramente associata ad essa.
La pagina non è più vista come un singolo pezzo di contenuto, perché la presenza dei tag dell'articolo indica dove la pagina è suddivisa in sezioni indipendenti.
Perché tutto il i tag usati nel markup ora sono interpretati correttamente e non dobbiamo più preoccuparci delle etichette che diluiscono la pertinenza, non abbiamo più bisogno di applicare tag diversi al titolo del sito - può rimanere taggato a livello in tutto.
Poiché il titolo del sito non è più interpretato come un'etichetta per il contenuto dell'articolo, siamo liberi di impostarlo su qualsiasi cosa ci piaccia. Non deve più rappresentare un rappresentante "catch-all" per tutti i contenuti della pagina, quindi può essere un titolo astratto o di marca che non si riferisce al contenuto dell'articolo.
Perché multiplo
I tag sono corretti
tag come richiesto dal documento; questo è uno per sezione sezione o sezione del contenuto. tag in questo esempio e più insiemi di i tag rappresentano più accuratamente il contenuto. tag applicati solo al titolo del sito e i tag applicati ai titoli dei tuoi articoli, la struttura dei tuoi articoli sarebbe stata eliminata. i tag in realtà dicono che sono di livello due, anche se in realtà sono di livello uno all'interno dello scopo di sezione. tag erroneamente impostandoli al livello tre, i titoli di terzo livello contrassegnati con tag e così via. per etichettare una sezione, ea volte potresti volere per motivi di presentazione, come visualizzare un'intestazione di dimensioni più piccole in una sezione del blogroll della barra laterale. Tuttavia, consiglierei di farlo solo nel caso di sezioni secondarie, non di articoli / contenuti del sito in cui non è una priorità per i livelli di intestazione produrre un profilo del documento che formi effettivamente un sommario.
Nuovo HTML5
Regole d'uso
tag richiesti, tramite HTML5. Ma ciò non significa che dovrebbero essere liberamente aggiunti in posizioni arbitrarie. tag l'uso che proviene da vecchi documenti, così ci sono anche nuove regole basate sull'algoritmo del documento HTML5.
tag per sezione principale o sezione del contenuto. livello di voce tra l'apertura tag e la prima sezione di contenuto, per etichettare il documento generale. l'intestazione di livello deve essere utilizzata per etichettare una sezione di contenuto, dovrebbe essere la prima intestazione che appare nella sezione, poiché la prima intestazione viene sempre interpretata come l'etichetta della sezione. l'intestazione di livello è usata per etichettare una sezione di contenuto, qualsiasi altra intestazione usata in quella sezione dovrebbe essere H2 o inferiore per creare un contorno preciso del documento. tag. La specifica HTML5 consente a qualsiasi tag di titolo di fungere da etichetta per una sezione, da attraverso . Tuttavia, comunque, consiglio sempre di usare livelli di tag per il markup del contenuto dell'articolo. per un'etichetta di sezione, assicurati di seguire le stesse regole elencate sopra, in sostituzione in ogni regola con il tag scelto.
Informazioni sulla sezione dei tag degli elementi del contenuto
e tag. Sono simili l'uno all'altro, ma con un'importante distinzione. i tag dovrebbero essere usati dove un pezzo di contenuto può essere estratto da una pagina completamente e ha ancora senso da solo senza alcun contenuto circostante. i tag, d'altra parte, dovrebbero essere usati per contenuti raggruppati secondo un tema, ma ha senso solo nel contesto del contenuto che lo circonda.
i tag sono progettati per indicare i principali blocchi di navigazione su una pagina Web, come una barra dei menu o l'impaginazione. Non dovrebbero essere applicati a collegamenti regolari, ma solo a sezioni significative interamente dedicate alla navigazione. i tag potrebbero essere efficacemente descritti come l'elemento "tutto il resto" per i contenuti che non sono né articolo, sezione né navigazione. W3C prescrive questo tag per l'uso quando qualcosa è tangenzialmente correlato al contenuto che lo circonda, ma è separato dal contenuto principale della pagina, come barre laterali, blogroll e così via. e tag visita:
Suggerimento rapido: gestione delle tagline
etichette sui titoli dei nostri siti in ogni area dei nostri siti. Tuttavia, nonostante sia una pratica comune, tecnicamente parlando i tag non devono essere utilizzati per sottotitoli o tagline autonomi.
i tag potrebbero essere usati per una tagline se fossero raggruppati con l'intestazione principale all'interno di un set di tag. comunque, il è stato rimosso dalle specifiche HTML5 e il suo uso causerà il fallimento dei controlli di convalida del codice. o
tag e applica CSS per renderli simili a taglines, raggiungendo il tuo obiettivo di presentazione senza influire negativamente sulla struttura del documento.
Ulteriori elementi HTML5 da utilizzare
tag in HTML5 e come funziona il nuovo algoritmo delineamento del documento. Per questo motivo non ho toccato alcun elemento HTML5 non valutato dal documento che descrive l'algoritmo.Il
l'elemento dovrebbe essere usato una volta per pagina per indicare l'area del contenuto principale di quella pagina.
Whackamoon Legumes!
L'uso corretto di arachidi
Come mangiare le arachidi
Metodi di mangiare arachidi superiori
Applicazione errata di arachidi
Fagioli bollenti
I fagioli bollenti ne valgono davvero la pena?
Il Elemento
l'elemento può essere utilizzato all'inizio di qualsiasi radice di sezione o sezione di contenuto per raggruppare il contenuto introduttivo per quella sezione.
Whackamoon Legumes!
Fagioli bollenti
I fagioli bollenti ne valgono davvero la pena?
Il
l'elemento è fondamentalmente l'inverso del elemento, in quanto può essere usato al fine di qualsiasi sezione principale o sezione del contenuto, per raggruppare i contenuti supplementari per quella sezione.
Whackamoon Legumes!
Accentsconagua