<img src="https://secure.leadforensics.com/133892.png" alt="" style="display:none;">

Snabbare rendering, bättre sökoptimering och renare kod. Vår front-end utvecklare Johan Kleine Bjällskog om varför du ska programmera semantiskt.

Semantik inom webbutveckling innebär att man använder rätt element för rätt innehåll så sidan tolkas rätt. Till exempel använda elementen header, article, footer mm istället för divar.

Jag började som front-end lead på iStone för ungefär två år sedan och har hunnit med att intervjua ett antal front-end utvecklare under den tiden. Det jag märkt av som en trend i mina intervjuer är att fler och fler inte skriver eller är intresserade av semantisk kod. Vad beror detta på?

Det senaste och nyaste inom front-end är helt klart de nya stora js-ramverken som kommit (Angular, React mm). Och vem vill inte vara med och lära sig det senaste? Detta har helt klart tagit uppmärksamheten från semantisk kod, alla som var på intervju berättade stolt att de hållit på med ett eller båda av dessa js-ramverk.

Det jag märkt som en trend i mina intervjuer är att fler och fler inte skriver eller är intresserade av semantisk kod. Vad beror detta på?

En annan bov är ramverk som Bootstrap och Zurb Foundation som hjälper utvecklare att enkelt kunna få upp en sida snabbt, men koden som produceras genererar mycket extra divar och en massa klasser. Mitt tips är att använda enbart media querrys och width i % istället för ramverken och slippa de extra elementen och klasserna. ”Clean code makes a happy developer”.

Detta tycker jag är synd. Att koda semantiskt innebär en mängd fördelar. Här följer sju punkter om varför jag tycker man ska koda semantiskt. Använd dem gärna om du behöver förklara för en chef, kund, projektledare eller kollega.

Semantisk kod gör sidan tillgänglig för alla

Om man bygger sidan semantiskt kan folk med nedsatta förmågor ta del av sidan. Program som läser upp text och visar hur man ska navigera på sidan hittar rätt element och kan ge feedback till alla.

Semantisk kod gör sidan sökoptimerad

Sökmotorer hittar rätt fakta och element eftersom du har skrivit semantisk kod, detta gör att du kommer bli högre rankad och hamna längre upp i sökresultat.

Semantisk kod går snabbare att rendera för browsers

En browser vet direkt vad den ska rendera och på så sätt kommer sidan bli snabbare och upplevelsen för kunden blir snabb och bättre.

Semantisk kod skapar renare kod

Du kommer behöva färre element när du skriver din kod och sidan kommer därför både bli renare för utvecklare samt ”väga mindre” och därför renderas snabbare för kund.

Semantisk kod är enklare att förstå

Pga sidan blir renare och att elementen du använder säger vad dom gör så kan utvecklarna snabbare förstå vad dom tittar på. 

Semantisk kod gör det enklare att förvalta och bygga om sidan (maintainable)

Ren kod som punkt 4 pratar om gör att sidan lättare kan byggas om och även tas hand om i förvaltningsfasen.

Semantisk kod sparar pengar

Detta brukar få alla chefer glada, ja om du skriver ren kod som gör att sidan blir lättare att förstå och kan därför både förvaltas och ändras går det snabbare att bygga den och förvalta den. Vilket i slutändan gör att pengar sparas och du kan lägga tiden på annat.

Om du håller med mig eller känner att du vill gräva ner dig djupare i semantisk kod, kommentera gärna eller skicka mig ett mail på Johan.Bjallskog@columbusglobal.com så kan vi börja en diskussion. Vem vet du kanske till och med blir min kollega? Just nu söker vi fler utvecklare! :)

Klicka här för lediga Front-end roller

Diskutera detta inlägg

Rekommenderad läsning

Vad är egentligen Progressive Web Apps och varför ska vi intressera oss för dem? I det här blogginlägget går jag igenom vad som skiljer PWA:s från "vanliga" appar och pekar på några av fördelarna med tekniken.
Vi har en ny sajt! Den har vi byggt tillsammans med våra vänner på Zooma. Det fanns många saker vi ville förbättra, men om vi fick välja de fem viktigaste så är det dessa.
right-arrow share search phone phone-filled menu filter envelope envelope-filled close checkmark caret-down arrow-up arrow-right arrow-left arrow-down