Why should you build your webpage semantic?

Semantic ”what is it good for, absolutely EVERYTHING…” that is the question I´m going to try and answer with this <article></article>

But before I start we need to rewind the tape and I want to explain why I´m writing this article.

I started as Front-end lead on iStone (build by Zooma) for about 2 years ago and I have done a couple of interviews during that time. One thing that I noticed is that many people don't know or seem interested in semantic code. Why is that?

The latest and coolest within front-end is absolutely the new big JavaScript frameworks Angular/React. And who doesn't want to learn that? In many of my interviews people proudly said they had tested or knew one or both of these frameworks. And clearly they must have taken some attention from semantic code, people want to learn them instead.

The second thing that could have taken some attention from semantic code is the frameworks like Bootstrap och Zurb Foundation, they help you produce front-end code quick and you don't really need to understand CSS for making a responsive webpage, just use the classes. They also generate a lot of extra elements and classes, My suggestion is use “media queries” instead, ”Clean code makes a happy developer”.

The last thing I´m wondering about is the universities, what do they teach there nowadays? Do you even speak about semantic web and the pros with using it? But I don't have any facts about that, it was to long ago I was studying, so I let you the reader decide how thing are there.

So back to the question, why should you build your web page with semantic code? What difference does it make?

Semantic code means that you use the right elements for the content you want to produce, use a <dl> for a definition list instead of <div>:s, or use HTML5 elements like <article>, <nav>, <figure>, <header> and so on.

I will not explain how you code semantic web any further in this article but try to answer why you should do it, what difference does it make, Please feel free to use the arguments down below to explain for a customer or a Project manager…

Semantic code will make your page accessible for all users
If you build your page with semantic code people with “reduced abilities” can take part of your page, could be by tabbing/navigation with a keyboard. Programs can read the page better for people with less god eyesight and therefore give better feedback.

Semantic code will make your page search optimized
Search engines will easier find the content and will index your page better and you will get a higher rank in search results.

Semantic code will be rendered quicker by browsers
A browser will know what content to render because you used the right element for it and therefore make it faster which will make the experience for the user better.

Semantic code is cleaner code
You will use fewer elements when you write your code and the page will become cleaner for developers to understand and weigh less and therefore render faster for the user.

Semantic code is easier to understand
Because the page will be cleaner and the elements you use will tell the developer what content it will produce. It will make it easier for the developer to understand.

Semantic code is easier to maintain (maintainable)
Clean code
as I talked about earlier will make the page easier to change/evolve and therefore easier to maintain in the future.

Semantic code will save you money
This all bosses like to hear, YES, if you write semantic code, the page will be easier to understand and maintain and also faster to build and change/evolve. Which in the end will save both time and money for the company.

So get out there , start to get interested in semantics or if you already build semantic webpages keep up the good work and lets take internet to the next level.

Thnx for taking your time to read this
/Johan Kleine Bjällskog