Förbättrad Semantisk markup med HTML5

Med HTML5 kom smarta och bra uppdateringar när det gäller s.k. ”semantisk markup” (läs mer om ordet semantik på: synonymer.se/semantik).

Vad detta då är och innebär, är att istället för att definiera ganska så ”intetsägande” element för att bygga upp sin webbsida, så har man nu möjligheten att bättre – inte bara för sig själv och andra utvecklare, men även för indexeringsrobotar (kommer förklaras mer i detalj i inlägg om sökmotoroptimering som kommer att skrivas inom kort)att informera om vad taggen har för syfte på hemsidan, och vilken typ av innehåll den har hand om. Detta då sökmotor-indexeringsrobotarna inte kan på samma sätt som oss människor läsa och förstå kontexten/sammanhanget av en text. Däremot kan de läsa taggarna och få sig en bättre uppfattning om vad taggen gör/har för typ av innehåll – om dess ”taggnamn” har betydelse!

Därav ”Semantisk markup”taggnamnen har en betydelse för mer specifikt vilken typ av innehåll de ska ta hand om.

Praktiskt exempel varför Semantisk markup framför vanlig markup

Ett mer praktiskt exempel på detta är att man förut oftast använde <div> taggar för att skapa behållare på en webbsida, men den var ganska intetsägande om själva innehållet den skulle hantera då det enda taggnamnet informerade om, var i stort sett ”division-element”.. Men med HTML5 så hade tydligen de som utvecklade den nya standarden gjort undersökningar för att se vilka ID och Klass-attribut som var mest använda på webbsidor på nätet för att se vilka nya typer av element som hade underlättat HTML-kodandet, såväl som gett taggnamnen en smartare innebörd och betydelse för indexeringsrobotarna- såväl som utvecklare.

Semantiskt tagg-tillskott med HTML5

Några av dessa ”semantiska taggar” som blev nya tillskott med HTML5 för att ersätta DIV som behållare i olika lägen var som följer: <header> för sidhuvud, <footer> för sidfot, <section> för sektioner/avdelningar på sidan, <article> för artiklar på webbsidor, <nav> för navigeringsdelar på en webbsida, <aside> för sidospalter, samt <figure> & <figcaption> för bildbehållare med möjlighet till undertexter (figcaption-elementet).

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *