I den senaste artikeln såg vi på ett antal nya element som introducerades i HTML5 och hur de genomfördes korrekt. I den här artikeln kommer vi åter att diskutera en uppsättning nya element, men den här gången granskar vi bara de HTML5-element som representerar en betydande semantisk förändring i det sätt du strukturerar dina webbplatser på. Denna artikel kommer att omfatta hur man använder var och en av dessa nya element på ett sätt som kommer att ge välbehövlig hjälp till den divuus som plågar strukturen på så många platser idag.
Semantik?
Innan vi börjar, borde du veta att med semantik hänvisar jag helt enkelt till att använda HTML-taggar och element så som de var avsedda att användas. Till skillnad från programmeringsspråk, som måste kompilera för att köra, kräver HTML ingen kompilator (webbläsaren försöker hela tolkningen) och ger dig därför en stor frihet att använda ett visst element som du vill. Men om du är en ny webbdesigner upptäcker du förmodligen att många människor är semantiska fanatiker, och kanske med rätta. Använda tabeller där de inte hör hemma eller kasta runt
Problemet
Ta en titt på 100 olika webbplatser med nästan identiska layouter och du hittar 100 olika strukturer och namngivningskonventioner i den underliggande HTML-filen. Även om någon bra webbutvecklare kommer att namnge hans / hennes
s på ett sådant sätt att de lätt kan förstås kan de stora möjligheterna leda till förvirring över identifieringen av relativt enkla och enhetliga kodsektioner. Därför ger HTML5 oss ett antal element som kan användas för att identifiera och rikta objekt som visas på nästan alla webbplatser på webben, till exempel rubriker, sidfot och navigeringsmenyer. Vid sidan av inkonsekventa namngivningskonventioner kan det nuvarande sättet att göra saker snabbt leda till div-strukturer som kommer med mycket extra vikt jämfört med enkla, inbyggda HTML-element. För att illustrera, låt oss titta på en enkel struktur som du kan hitta i HTML4.
Du kan se hur det här relativt enkla kodstycket överskrids av divs, vilket kan ta lång tid att sortera men på grund av all nödvändig fluff. CSS: n för att arbeta med denna HTML skulle innehålla följande selektörer:
Även om det inte är så komplicerat som HTML före det, är den här koden inte så enkel som den skulle kunna vara. Låt oss nu dyka in hur HTML5 hjälper oss att lösa detta problem.
Lösningen
HTML5 tillåter oss att ta nästan alla de anpassade delarna ovan och konvertera dem till standardelement. Låt oss titta på koden som krävs för att uppnå samma sak i HTML5.
Och motsvarande CSS:
Det finns mycket att diskutera om dessa exempel så låt oss börja med HTML. Lägg märke till att den kroniska dividen har försvunnit och i dess ställe är universellt förstådd och lätt att tolka element. Detta förbättrar avsevärt kodens läsbarhet. Ett av mina husdjur när man läser igenom någon annans kod spårar ner den korrekta motsvarande
CSS har också förenklats. Vi kan nu bara använda identifierare utan hash-taggar eller perioder i de flesta fall eftersom vi hänvisar till inbyggda element i stället för unikt namngivna divs. Observera att i vår HTML denna gång kunde vi använda samma tagg för alla sidhuvud och sidfot (vi slängde "huvud" klassificeringen). Detta beror på att om vi vill stila rubriker i behållaren annorlunda än de andra kan vi bara använda #container header? att rikta in bara rubrikelementen inom container div (och vi kan vara säkra på att det kommer att ärva de egenskaper som vi vill behålla) Nu när vi har fått en glimt av de nya strukturella elementen, låt oss gå över hur vi använder var och en individuellt.
De
Element
Du kan initialt anta att rubrikelementet hänvisar till huvudrubriken på sidan. Men det är egentligen bara ett generiskt element som kan användas flera gånger i hela koden. Här är ett exempel:
Återigen har vi ersatt vad som vanligtvis varit en massa divs med enklare header-taggar. Det är viktigt att notera att eftersom vi kan ha flera header-taggar i en enda HTML-fil, bör du inte tänka på rubrikelementet som en ersättning för
De
Element
De flesta av de saker jag bara förklarade om rubrikelementet gäller också för sidfotelementet, vilket betyder att det är generiskt och kan placeras flera gånger i hela koden. Självklart går fotboll i allmänhet (men inte alltid) i slutet av en sektion av kod och innehåller information som är sekundär i naturen, såsom publiceringsdatum, författare, upphovsrättsinformation etc. Det som går in i sidfoten är i stor utsträckning upp till du. Här är ett snabbt exempel som bygger på vad vi såg med rubrikelementet:
De
Element
Sektionselementet är ett generiskt sätt att skilja delar av din webbplats. T.ex., säg en händelsebaserad webbplats uppdelad i? Vad ?,? När?, Och? Var.? Du kan använda
taggar för att göra denna uppdelning i din kod (igen, tänk? klass? inte? id?). Med vårt tidigare exempel kunde vi ersätta? Tutslist? klass med sektionselement.
Observera att avsnitt ofta börjar med ett rubrikelement och slutar med ett sidfot, även om det inte är nödvändigt.
De
Element
Jag nämnde kortfattat artikelelementet i mitt senaste inlägg, och glömde helt att jag sparade det för det här inlägget. En commenter påpekade emellertid smart information om att vi skulle räkna ut. Trots det faktum att w3schools säger att artikelelementet är strikt för externt innehåll, anger w3.org tydligt att dess verkliga syfte är att identifiera en del av din webbplats som är avsedd att vara oberoende utbytbar. Ett blogginlägg som den här kan till exempel stå på egen hand och är inte beroende av resten av webbplatsens innehåll. Vidare är detta inlägg något vi faktiskt vill ha andra webbplatser att diskutera och länka till. Nyheter, foruminlägg och handledning är bra exempel på denna typ av innehåll. Låt oss tillämpa detta på vårt springande exempel.
Som du kan se är det här verkligen internt innehåll som kan refereras externt, snarare än tvärtom som w3schools tycks föreslå.
De
Element
Nav-elementet avser delar av dina HTML-innehållande länkar för navigationsändamål som i en sidofält eller en rad knappar längst upp på en sida. Detta gäller emellertid inte för alla grupper av navigeringslänkar på dina sidor. I stället reservera det här elementet för de viktigaste källorna till navigering på din webbplats. w3.org ger exempel på en serie länkar i en sidfot som en situation som inte skulle förtjäna ett navelement. Återigen ska vi se över vårt exempel för att inkludera det nya elementet.
De
Element
Det sista elementet vi kommer att diskutera är åt sidan. Detta element är reserverat för innehåll som är relaterat till, men tydligt skilt från resten av innehållet på sidan. Borttagningselementet kan användas för att dra citat, annonser, navelement, sidofält osv. Låt oss säga att vi ville ta vår navigering från det sista exemplet och placera det i ett sidofält:
Se Ma, inga Divs!
Exemplet ovan illustrerar den exceptionellt stora mängden kod som HTML5 tillåter oss att utföra med bara standardelement! Varje del av det här exemplet är super lätt att rikta in i CSS, omedelbart förstås av någon utvecklare (åtminstone vilken som helst utvecklare som är känd i HTML5), och oerhört kortfattad jämfört med hur mycket kod det skulle kräva i HTML4. Och det finns inte en div i sikte.
Slutsats
I denna artikel beskrivs kortfattat begreppet och betydelsen av semantisk kod och diskuterades de stora semantiska förändringarna som hämtats av HTML5. Vi upptäckte hur man korrekt använder sex otroligt hjälpsamma nya HTML5-element: rubrik, sidfot, avsnitt, artikel, nav och åt sidan. Slutligen lärde vi oss hur dessa nya element kan användas för att skapa snyggt strukturerad och lättläst kod som undviker överdriven användning av divs.
För att förhindra förvirring (och för att undvika ett flurande av arga kommentarer), ska jag klargöra att det inte finns något fel på divs.Personligen använder jag divs ganska liberalt på alla webbplatser jag skapar och tycker att de är bland de mest flexibla och väsentliga elementen i HTML. Men ju mer du kan ersätta unikt namngivna divs med universellt namngivna element, desto mer tillförlitliga och standardkorrigerade kommer din kod att bli.
Titta framåt: Tre ner, en att gå!
Nästa artikel kommer att vara den sista i vår serie på HTML5. Som du förmodligen vet vid denna punkt, är inget av det jag har visat dig redo att integreras i webbplatser för omfattande offentlig visning. Vår nästa artikel visar dock olika knep för att börja använda HTML5 direkt och diskutera hur du ska förbereda dina webbplatser för den oundvikliga uppdateringen!