HTML-rubriker: den kompletta guiden för att lägga till rubriker för dokumentstruktur
Innehållsrubriker
de sex rubriktaggarna är en viktig del av HTML-innehållsskrivningen. Förutom det något uppenbara behovet de fyller (människor vill ibland lägga rubriker ovanpå saker) har rubriktaggarna också SEO-värde, hjälper dig att vara en mer organiserad författare och göra sidor mer användarvänliga.,
rubriktaggar och SEO
det finns två saker som en sökmotor försöker lista ut om din sida:
- vad handlar det om?
- hur bra är det?
i allmänhet används länkar till en sida som ett mått på kvalitet (hur bra Det är) och analys på sidan används för att ta reda på vad sidan handlar om. (Det finns viss överlappning här förstås: Google gör några bedömningar om kvaliteten på en sida genom att titta på sidan och försöker också ta reda på vad sidan handlar om genom att titta på vilka andra sidor som säger när de länkar till den.,) En av de (många) saker som Google och andra sökmotorer tittar på bestämma innehållet på en sida är de ord som visas inuti rubriktaggar. Det är därför, om du försöker rangordna för vissa ord eller fraser, Det är en riktigt idé att inkludera dessa ord och fraser i din rubrik taggar.
mer organiserad skrivning
När människor skriver utan att använda rubriktaggar (säg, när du skriver för hand eller i visuell redaktör som MS Word), skriver de ofta bara i långa, obrutna strömmar av text som går för länge., Eller ännu värre kan de lägga till visuella rubriker (med djärva, alla kepsar, större text eller något annat. Detta är mycket vanligt, eftersom människor instinktivt vet att de ska bryta upp text i mindre bitar. Problemet med det är att det inte är så klart hur de olika sektionerna relaterade till varandra. Är avsnittet med 15pt-teckensnitt tänkt att vara ett underavsnitt av delrubrikerna med 14pt fet typsnitt? Ofta vet inte ens författaren eftersom de inte riktigt tänkte på det.,
rubriktaggar skapar en innehållshierarki
på en sida med ett enda innehåll (vilket borde vara de flesta sidor) bör huvudtiteln för det innehållet vara en<h1>
– tagg. Större avsnitt inom det innehållet ska vara rubricerade med <h2>
. Underavsnitt inom dessa avsnitt ska ledas med <h3>
, och så vidare. Det bör vara möjligt att extrahera en kontur från dina rubriktaggar. (I själva verket gör vi detta-titta på innehållet widget längst upp på sidan.,) Denna struktur gör skrivandet mer organiserat, vilket (minst 99% av tiden) också gör skrivandet bättre.
rubriker är bra för användare
Här är en smutsig liten hemlighet om online-innehåll: läsare skumma. Nästan ingen läser varje ord i en online-artikel., Och det finns väldigt lite du kan göra åt det. Du kan verkligen inte stoppa det. Men du kan göra det så att skimmers kommer att ha något att låsa på när deras ögon rör sig ner på sidan. Rubriker, om de är väl fördelade och relevanta för deras innehåll, ge skimmers en massa små sätt tillbaka i texten i artikeln. De bryter också upp artikeln i till synes smältbara bitstora bitar, så att en antsy skimmer inte blir orolig av en lång solumn av oavbruten text.,
och glöm inte att länka
från och med HTML5 kan du länka till något element på en sida genom att lägga till ett hash-tecken (#
) och elementetid
. (Tidigare kunde du bara länka till förankringselement.) Genom att lägga till en id
till varje rubrik på din sida kan du tillåta personer att länka till vilken plats som helst i dokumentet. (Se igen hur innehållet länkar högst upp på sidan fungerar.,) Dessa i-dokument länkar kan vara oerhört hjälpsam, särskilt om du ger referensinnehåll av något slag, eller om dina artiklar är särskilt långa.
använda rubriktaggar för att strukturera ditt innehåll
generellt sett finns det två typer av innehållssidor: enstaka innehållssidor (som presenterar ett enda innehåll) och indexsidor (som listar ett gäng innehåll). Indexsidor inkluderar huvudbloggsidan på en webbplats, kategori och tagg arkiv, författare sidor som listar alla artiklar skrivna av författaren, och så vidare., Sedan finns det också innehåll (sidofält, widgets, sidfot) som visas på nästan varje sida och som inte är riktigt ”innehåll.”Hur du använder rubriktaggar i dessa situationer kan påverka SEO och användbarhet.
<h1> och <h2> element
på enstaka innehållssidor på din webbplats bör titeln på det specifika innehållet nästan alltid vara i <h1>
– taggen nära toppen av <body>
., Sedan, som nämnts ovan, dina avsnitt i artikeln kan använda <h2>
taggar.
<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main>
på en indexsida är det vanligtvis meningsfullt att sätta antingen webbplatstiteln i en<h1>
– tagg, eller att sätta indexnamnet där: kategorinamnet, författarens namn eller vad det än är som definierar den sidan. Då bör titlarna på alla enskilda bitar som listas där ha ETT<h2>
– element för sina titlar.,
tidigare har det varit vanligt att använda en <h2>
-tagg för webbplatstiteln när den visas på sidor med enstaka innehåll.
<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main>
åsikter blandas om detta, men trenden är mindre och mindre av det. Fler människor placerar helt enkelt titeln (och mer sannolikt en logotyp img) i rubriken och sparar rubriktaggarna för specifikt innehåll på sidan. En del av din egen hänsyn till om att göra detta kommer sannolikt att ha att göra med hur viktigt är din egen webbplats titel i förhållande till dina SEP mål.,
Widgets och andra ”icke-innehåll”
det har också varit vanligt tills nyligen att använda<h3>
eller<h4>
element för widgettitlar i sidofält. Många Content Management System helt enkelt göra detta automatiskt, så det kanske inte spelar någon roll för dig. Men det är något du kanske vill tänka på om du designar hela sidans uppmärkning från början. Vill du att dina rubrikelement ska föreslå att den verkliga meningen med din sida är” Logga in ”eller”registrera dig för sändlistan”?, (Detta undviks naturligtvis delvis genom att placera sidofältet i ett <aside>
– element.div>