Share
Oavsett om du är webbansvarig eller webbdesigner, finns det en fråga du troligen har bett eller svarat många gånger under åren. Den frågan är, "Hur många taggar kan jag använda per sida, och hur exakt ska jag implementera dem? "
Det finns generellt två skäl till att denna fråga ställs. Den första och vanligaste är för SEO-ändamål; se till att innehållet är formaterat så gott som möjligt för att hjälpa sökmotorindexering. Den andra är teknisk korrekthet; se till att markeringen skrivs i enlighet med lämplig W3C-specifikation.
Med tillkomsten av HTML5 har svaret på denna fråga ändrats väsentligt både i SEO och i tekniska frågor. Det är nu inte bara möjligt att ha flera nivårubriker per webbsida som är meningsfullt för sökmotorer, men i de flesta fall är det faktiskt den rekommenderade kursen.
Men eftersom HTML5-specifikationen inte är allt som allmänt förstått än, finns det fortfarande mycket råd att flyta runt, några skrivs även nyligen, baserat på reglerna för pre-HTML5 webbdesign.
I denna handledning kommer vi att rensa upp vissa missuppfattningar. Vi tar en djupgående titt på vad HTML5 betyder för taggförbrukning, samt hur du kan dra nytta av de förbättringar som nu finns tillgängliga för att skapa webbsidor som är mer semantiskt rika och välstrukturerade än någonsin tidigare.
Under lång tid ansågs det vara en av kardinalreglerna för HTML och SEO att varje enskild sida på en webbplats skulle ha en nivå rubrik, och en enda. Dessutom föreskrev regeln att denna singular rubrik ska beteckna det primära ämnet på sidan.
Denna regel har i allmänhet följts för att hjälpa sökmotorer att bättre förstå det primära ämnet för varje sida, så att de kunde bestämma deras relevans för olika sökfraser, förbättra sökmotorns noggrannhet och därmed förbättra rankningar för välgjorda webbplatser.
Låt oss överväga ett exempel på företagswebbplatsen före HTML5. I det här exemplet visas företagsnamnet i rubrikavsnittet på alla sidor, hemsidan innehåller en beskrivning av verksamheten och i ett annat område av webbplatsen visas expertartiklar.
I följande "Single Tag "-regeln, hemsidan för denna webbplats har taggar som tillämpas på företagsnamnet i rubrikavsnittet, vilket anger själva verksamheten är den primära ämnet för den sidan.
Men i en artikel som publiceras någon annanstans på samma webbplats, taggar tas bort från företagsnamnet i rubriken och tillämpas istället på artikelns titel. Detta görs på grund av att artikeltiteln ger en mer representativ etikett för det primära ämnet på sidan, vilket nu är artikelns innehåll i motsats till beskrivningen av verksamheten som fanns på hemsidan.
En pre-HTML5-version av denna webbplats skulle därför märkas på något sätt så här:
Trots det långa fokuset på taggar, de var aldrig ett element som fungerade isolerat oberoende av resten av dokumentet. Det finns en anledning till vikten av noggrann rubrikplacering i både HTML5 och pre-HTML5-eran, och det är generationen av dokument skisser.
Dokumentutskrifter är något liknande en innehållsförteckning för en webbplats. De genereras automatiskt från markupen på en viss webbsida.
Innan HTML5 skapades dokumentrapporter från din användning av rubrikkoder genom att . Varje användning av en rubrik skulle innebära början på en ny del av innehållet.
Ta till exempel följande html och notera placeringen av , och taggar som bestämmer dokumentets översikt:
Exempel på pre-HTML5-märkning Korrekt användning av jordnötter
Hur man äter jordnötter
Jordnötter kan ätas med salt.
Detta är en godtagbar användning av jordnötter.
Överlägsen jordnötätande metoder
Jordnötter är oändligt bättre när de kombineras med choklad.
Vi rekommenderar denna metod för bästa resultat
Felaktig användning av jordnötter
Jordnötter bör inte användas för att fylla parkeringsmätare.
De kommer inte att vara effektiva i den här kapaciteten.
Pre-HTML5, skulle markeringen ovan generera en dokumentbeskrivning enligt följande:
Den första element betraktas som etiketten för hela dokumentet. De efterföljande rubrikerna betraktas som etiketter för delar av innehållet i det dokumentet och bildar ett träd under det.
Ovanstående exempel är enkelt nog, men i de vilda webbsidorna är det sällan så enkelt. När vi behöver mer komplex innehållspresentation, löper vi in i det stora problemet med pre-HTML5-markup, och anledningen till att det tidigare var nödvändigt att bara använda en nivårubrik per sida.
I exemplet ovan har vi ett enda ämne som diskuteras: "Korrekt användning av jordnötter". Men vad händer om det här ämnet diskuteras på en sida med flera artiklar av lika stor betydelse, som du kanske ser på en blogg till exempel?
Ta den här html med en andra artikel som visas (varje artikel är insvept i Jordnötter kan ätas med salt. Detta är en godtagbar användning av jordnötter. Jordnötter är oändligt bättre när de kombineras med choklad. Vi rekommenderar denna metod för bästa resultat Jordnötter bör inte användas för att fylla parkeringsmätare. De kommer inte att vara effektiva i den här kapaciteten. Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Pre-HTML5, skulle denna markering ha genererat följande dokumentbeskrivning: Nu, även om det finns två artiklar av lika stor betydelse på sidan, tolkar den första artikelns rubrik "Korrekt användning av jordnötter" fortfarande som etiketten som representerar hela dokumentet helt enkelt för att det är den första som stöttes. Detta skulle sålunda indikera att hela ämnet på sidan är "Korrekt användning av jordnötter", även om den andra artikeln handlar om ett helt annat ämne. Det typiska sättet att bekämpa detta var att skapa en catch-all-rubrik med Jordnötter kan ätas med salt. Detta är en godtagbar användning av jordnötter. Jordnötter är oändligt bättre när de kombineras med choklad. Vi rekommenderar denna metod för bästa resultat Jordnötter bör inte användas för att fylla parkeringsmätare. De kommer inte att vara effektiva i den här kapaciteten. Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Notera tillsatsen av den generaliserade Följande dokumentbeskrivning skulle nu genereras: Detta dokument beskrivs, även om det är det bästa som kan göras före HTML5, presenterar några betydande problem: Det här är HTML5 som följer med för att spara dagen och lösa alla dessa problem. Om du överväger var och en av problemen som beskrivits ovan har de alla en gemensam och något enkel rot: Antagandet att varje webbsida är ett enstaka dokument med ett enskilt ämne som endast kräver en singelmärkning. Den lika enkla lösningen på dessa problem kommer från förmågan att ange om en webbsida hade diskreta sektioner, eventuellt med flera ämnen, var och en med sin egen meningsfulla etikett. Om det var möjligt att ange att varje artikel på en sida var separat, skulle det göra det möjligt att märka dem med meningsfulla rubriker som exakt representerade deras innehåll och ge var och en samma vikt av betydelse. Om det var möjligt att klargöra när en webbplatstitel inte var representativ för sidans innehåll skulle problemet med utspädning av relevans lösas. Med en tydlig indikering i stället för skillnaden mellan rubrikets titel, artiklar och artikeltitlar skulle det inte längre vara nödvändigt att ändra markeringen från ett område till ett annat. en Och eftersom det skulle klargöras om webbplatsens titel inte representerade artikelinnehållet på sidan skulle det vara möjligt att ställa in det på något sätt, oavsett hur abstrakt. HTML5 gör alla dessa saker möjliga genom introduktionen av dess semantiska element och HTML5-dokumentets översiktsalgoritm. Även om pre-HTML5-dokumentets skiss uteslutande hämtades från rubriktaggar, använder HTML5-dokumentets skissalgoritm följande nyckelaspekter: Förstå hur dessa aspekter av HTML5 används är relativt enkelt, och processen går vanligen mycket så här: Det finns många andra aspekter i HTML5-dokumentets skissalgoritm. Omfattande information om dessa finns på W3C. Men med de ovanstående aspekterna kan vi lösa alla problem som beskrivs i föregående avsnitt i denna handledning. Låt oss ta en titt på vår "Legume Literature Blog", eftersom den kan markeras med HTML5. Följande enkla ändringar har gjorts: Jordnötter kan ätas med salt. Detta är en godtagbar användning av jordnötter. Jordnötter är oändligt bättre när de kombineras med choklad. Vi rekommenderar denna metod för bästa resultat Jordnötter bör inte användas för att fylla parkeringsmätare. De kommer inte att vara effektiva i den här kapaciteten. Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Nu skulle HTML5-dokumentets skissalgoritm ge oss följande: Det första du kanske märker är utseendet på Observera att i HTML5, Utseendet på Det betyder att alla problem som vi skisserade tidigare i denna handledning omedelbart har lösts: Du kan också nu se från HTML5-dokumentet som genereras av vår markering att det är perfekt att använda så många Du kan också se från det här exemplet hur det skulle vara mindre korrekt att bara använda en uppsättning av Om du fortfarande hade Detta beror på att du markerar dina artikelrubriker med I sin tur skulle underrubrikerna på andra nivån av dina artiklar nödvändigtvis vara markerade med Det är tillåtet med HTML5-specifikationen att använda lägre nivårubriker än Det bästa att göra i alla fall är noggrant överväga innehållet till hands och bestäm det bästa sättet att avsnitt och etikettera det baserat på vad du nu vet om HTML5-dokumentet som beskriver algoritmen. Ja det är sant. Du kan nu använda så många uppsättningar av Precis som det fanns regler för Här är de en överblick: Som jag nämnde ovan är avsnittetiketter inte absolut ha att vara Men om du bestämmer dig för att använda en annan tagg än Det finns bara fyra uppsättningar elementetiketter som du kan använda för att ange innehållsavsnitt på din webbsida, men de kan vara lite knepiga för att förstöra ditt sinne först. Dom är: De två du brukar använda mest är För detaljerade exempel på hur du använder var och en av dessa taggar, ta en stund att kolla in dessa W3C-sidor: För mer information om Vi vet nu att i HTML5 kan vi gärna använda W3C har följande att säga: h1-h6-element får inte användas för att märka underrubriker, undertexter, alternativa titlar och tagline, om inte avsedda att vara rubriken till en ny sektion eller underavsnitt. Anledningen till detta är att HTML5-dokumentets översikt alltid tolkar en rubrikkod som börjar en ny sektion av innehåll, huruvida avsnittsinnehållet är inlindat runt dem eller inte. Under ett tag fanns det ett arbete därmed Så nu är det bästa sättet att hantera taglines bara att använda I den här handledningen har vi fokuserat på Men jag skulle vara ombedd om jag inte pekade dig i rätt riktning på några av de mest värdefulla HTML5-taggarna du kan använda i din markering för att göra det ännu mer semantiskt rikt. De Om du visar en grupp av artiklar skulle det gå runt alla artiklarna. Till exempel: Jordnötter kan ätas med salt. Detta är en godtagbar användning av jordnötter. Jordnötter är oändligt bättre när de kombineras med choklad. Vi rekommenderar denna metod för bästa resultat Jordnötter bör inte användas för att fylla parkeringsmätare. De kommer inte att vara effektiva i den här kapaciteten. Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Mer information: Huvudelementet De Du kan använda den för att paketera din webbplatstitel och tagline eller en artikeltitel och bloggkategori. Till exempel: Vi har varit luvinbönor Kategori: Mean Bönor Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Mer information: Header Element De W3C rekommenderar att den används för saker som författarinformation, länkar, upphovsrättsmeddelanden och så vidare. Till exempel: Vi har varit luvinbönor Kategori: Mean Bönor Låt oss vara ärliga, det tar åldrar. Vi rekommenderar att du bara köper konserverade bönor istället. Mer information: Footer Element Sammanfattningsvis, låt oss ta en titt på vårt ursprungliga företagswebbplats exempel och se hur det nu kan markeras med hjälp av det vi har lärt oss: Det här enkla exemplet visar hur lätt det är att använda en förståelse av HTML5-dokumentalgoritmen för att lösa de gamla problemen kring användningen av Om du fortfarande inte är säker på hur du konfigurerar dina sidor korrekt kan du alltid anställa en frilansare på Envato Studio för att göra det för dig. taggar):
Korrekt användning av jordnötter
Hur man äter jordnötter
Överlägsen jordnötätande metoder
Felaktig användning av jordnötter
Kokande bönor
Är kokande bönor verkligen värda det?
taggar där flera sektioner av innehåll av lika stor betydelse visas i ett försök att representera dem alla i största möjliga utsträckning. Till exempel:
Legume Literature Blog
Korrekt användning av jordnötter
Hur man äter jordnötter
Överlägsen jordnötätande metoder
Felaktig användning av jordnötter
Kokande bönor
Är kokande bönor verkligen värda det?
taggade rubriken och nedbrytningen av varje efterföljande rubrik ner en nivå.
Problem som orsakas av Pre-HTML5-dokumentutskrifter
Vi har taggad "Legume Literature Blog" -titel som fungerar som etikett för hela sidan, men texten i denna rubrik ger bara en generaliserad representation av innehållet. Detta sparar sökmotorns förmåga att tolka det aktuella ämnet på sidan och i sin tur relevans för sökfraser.
Det finns inget sätt att skilja de två artiklarna på samma sida som lika viktiga och fristående enheter. De ses båda som en del av en enda övergripande del av innehållet, trots att de inte är det.
Skulle en besökare se en av artiklarna i sig, vilket kan göras på en vanlig blogg, måste markeringen omarbetas så att taggar tillämpas på artikelrubriken i stället för webbplatsens titel, som jag visade på min exemplarbranschs webbplats i föregående avsnitt.
I många fall kan en webbplatstitel (som tenderar att spela rollen som dokumentetikett även i HTML5), inte relatera till sidans innehåll på något meningsfullt sätt. Till exempel kan jag köra en blogg med webbplatsens titel "Kezz Says" och det kan visa en artikel om HTML-kodning och en annan på söta valpar. I det här fallet skulle det inte vara meningsfullt att webbplatsens titel tolkas som att representera någon av dessa artiklar, så jag måste ändra namnet på min blogg. Detta kan vara ett problem, särskilt om en webbplats vill märka sig med ett namn som kan vara minnesvärt men inte nödvändigtvis meningsfullt.
HTML5 Document Outline Algorithm
taggad webbplats titel kunde behålla sin taggar över hela webbplatsen.Huvudaspekter av HTML5-dokumentutformningsalgoritmen
taggar, så det finns alltid en skiss genererad för vilken webbsida som helst, från och med taggar och arbetar igenom de sektioner den är inbruten i.
, , , ,
, , ,
, , , , ,
taggar. taggar.Lösa de gamla dokumentutskriftsproblemen
läggas till för att hämta HTML5 taggar har lagts till förpackning varje artikel, ersätter den generiska taggar
upp till taggar
Whackamoon Legumes!
Korrekt användning av jordnötter
Hur man äter jordnötter
Överlägsen jordnötätande metoder
Felaktig användning av jordnötter
Kokande bönor
Är kokande bönor verkligen värda det?
(artikel) element i konturen, och bredvid dessa rubrikerna för var och en av våra artiklar. taggar används specifikt för att ange "en komplett eller självständig komposition i ett dokument, en sida, en applikation eller en webbplats och det är i princip självständigt distribuerbart eller återanvändbart, t.ex. i syndikering. Det kan vara ett forum, en tidningsartikel eller tidningsartikel, en blogginmatning, en användarinfordrad kommentar, en interaktiv widget eller gadget eller något annat oberoende innehållsinnehåll. " (källa: W3C)(artikel) elementet bredvid våra artikelrubriker, snarare än rubrikerna som vi såg tidigare, berättar att dessa saker nu förekommer i konturen:
Vi har inte längre någon utspädning av relevans från generaliserade etiketter, eftersom etiketten för varje artikel är tydligt förknippad med den.
Sidan ses inte längre som en enda del av innehållet, eftersom närvaron av artikeln taggar indikerar var sidan är uppdelad i oberoende sektioner.
För alla taggar som används i markeringen tolkar nu korrekt, och vi behöver inte längre oroa oss för etiketter som spädar relevans. Vi behöver inte längre använda olika taggar till webbplatsens titel. Det kan vara märkt vid nivå i hela.
Eftersom webbplatsens titel inte tolkas längre som en etikett för artikelinnehållet kan vi ställa in det som vi vill ha. Det behöver inte längre fungera som en "catch-all" -representant för allt innehåll på sidan, så det kan vara en abstrakt eller märkesbeteckning som inte relaterar till artikelns innehåll alls.
Varför flera
Taggar är korrekta
taggar som ditt dokument kräver det vill säga en per sektionsrots- eller innehållsdel. taggar i det här exemplet, och att flera uppsättningar av Taggar representerar innehållet mer exakt. taggar tillämpas bara på webbplatsens titel och taggar som tillämpas på dina artikeltitlar, skulle konturet av dina artiklar slängas ut. taggar du faktiskt säger att de är nivå två rubriker, även om de faktiskt nivå en rubriker inom ramen för sektion. taggar felaktigt ställer in dem till nivå tre, dina tredje nivå rubriker markerade med taggar och så vidare. att märka en sektion, och ibland kanske du vill av presentation skäl, till exempel att visa en mindre storlek rubrik i en sidogaller bloggroll sektion. Jag skulle dock rekommendera att göra detta endast för mindre, icke-artikel / innehållsavsnitt på din webbplats där det inte är en prioritet för rubriknivåer för att skapa en dokumentbeskrivning som effektivt bildar en innehållsförteckning.
HTML5: s nya
Användningsregler
taggar som krävs, via HTML5. Men det betyder inte att de borde frivilligt läggas till på godtyckliga platser. tagganvändning som kom från gamla dokumentutskrifter, så finns det nu nya regler baserade på HTML5-dokumentet som beskriver algoritmen.
taggar per sektionsrots- eller innehållsavsnitt. nivåhuvud mellan öppningen tagg och det första innehållet avsnittet, för att märka det övergripande dokumentet. nivårubrik ska användas för att märka en innehållssektion, det ska vara det första rubriken som visas i avsnittet, eftersom den första rubriken alltid tolkas som sektionens etikett. nivårubrik används för att märka en innehållsdel, alla andra rubriker som används i det avsnittet ska vara H2 eller lägre för att skapa en korrekt dokumentbeskrivning. taggar. HTML5-specifikationen tillåter vilken rubrik som helst för att fungera som etikett för en sektion, från genom att . Återigen rekommenderar jag dock alltid att använda nivå taggar för att markera artikelinnehåll. För en sektionsetikett, se till att du följer samma regler som ovan angivna, ersätter i varje regel med din valda tagg.
Om Sectioning Content Element Tags
och taggar. De liknar varandra, men med en viktig skillnad. Taggar ska användas där en del innehåll kan tas ut av en sida helt och ändå vara meningsfullt utan innehållsinnehåll. taggar å andra sidan ska användas för innehåll som är grupperade ihop enligt ett tema men menar endast i samband med innehållet som omger det.
Taggar är utformade för att indikera större navigeringsblock på en webbsida, till exempel en menyrade eller pagination. De ska inte tillämpas på vanliga länkar, endast till viktiga sektioner som är helt dedikerade till navigering. taggar kan effektivt beskrivas som "allt annat" -elementet för innehåll som inte är artikel, avsnitt eller navigering. W3C föreskriver denna tagg för användning när något är tangentiellt relaterat till innehållet kring det, men är skilt från huvudinnehållet på sidan, som sidor, bloggar och så vidare. och taggar besök:
Snabbtips: Hantera Taglines
taggar på vår webbplats titlar i alla områden av våra webbplatser. Men trots att det är en vanlig praxis, tekniskt sett Taggar ska inte användas för fristående underrubriker eller taglinjer.
taggar kan användas för en tagline om de var grupperade med huvudrubriken i en uppsättning av taggar. Men tas bort från HTML5-specifikationen och dess användning kommer att orsaka att kod misslyckas med valideringscheckningar. eller
taggar och tillämpa CSS för att få dem att se ut som tagline, uppnå ditt presentationsmål utan att negativt påverka din dokumentbeskrivning.
Ytterligare HTML5-element att anställa
taggar i HTML5 och hur det nya dokumentet beskriver algoritmen fungerar. Därför har jag inte berört några HTML5-element som inte utvärderas av dokumenthäftningsalgoritmen.De
elementet ska användas en gång per sida för att ange huvudinnehållet på den sidan.
Whackamoon Legumes!
Korrekt användning av jordnötter
Hur man äter jordnötter
Överlägsen jordnötätande metoder
Felaktig användning av jordnötter
Kokande bönor
Är kokande bönor verkligen värda det?
De Element
elementet kan användas i början av någon sektionsrots- eller innehållsdel för att gruppera inledningsinnehåll för den sektionen.
Whackamoon Legumes!
Kokande bönor
Är kokande bönor verkligen värda det?
De
element är i grunden den inverse av element, eftersom den kan användas vid slutet av någon sektionsrots- eller innehållssektion, för att gruppera tilläggsinnehåll för den sektionen.
Whackamoon Legumes!
Kokande bönor
Är kokande bönor verkligen värda det?
Avslutar
taggar och för att säkerställa att innehållet på dina webbsidor kommuniceras mer exakt än någonsin tidigare.Rekommenderad läsning
Rekommenderade verktyg
Accentsconagua