.. Your Daily Design Dosis

Why you should use Semantic HTML

| 16 Comments

We all know that times are changing and internet and its related technologies are changing even faster. It’s important to build websites that can grow with the new techniques, languages and trends. Building your websites according the web standards and by using semantic HTML (clean markup) will help you to accomplish that.

Many developers do not tend to focus on efficiency but rather getting the job done, and getting it to work on screen. In fact this method is far more time consuming than having an organized, efficient, and clean HTML source code.

HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is understood by standard web browsers, as well as dozens of other types of “user agents” (mobile phones, search engine spiders, aural browsers etc.)

What is Semantic HTML (or ‘clean markup’)?

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look). HTML has included semantic markup from its inception,but has also included presentational markup such as <font><i> and <center> tags.  [resource: Wikipedia]

In other words, Semantic HTML (or clean markup) is about applying a minimum of markup and a proper source code order (e.g. header, menu, content, sidebar, and footer), so tags are used appropriately to their correct meaning.

Note: HTML tags should never be used to apply presentation – that’s the job of CSS (Cascading Style Sheets). See an earlier article about this topic: Tips How to Organize your CSS file(s).

In this article I’ld like to point out several key aspects that emphasize the importance of having clean markup.

What’s the Essence of Semantic HTML?

Learning how to write semantic HTML brings a broad scale of benefits:

  • Clean code, no clutter.
  • Accessibility
  • Search Engine Optimisation
  • Redesign/Teamwork

Clean Code, no Clutter

First of all, semantic HTML is clean HTML. It’s much easier to read and edit markup that’s not littered with unneeded tags and inline styling. Many developers tend to complicate simplicity by adding more code than actually needed to achieve a certain goal, but they tend to forget that the more unneeded code is added the less efficient the script becomes.

Therefore, get rid of the unneeded tags and inline styling, keep things down to the point and efficient.

semantics

Accessibility

Accessibility is another important factor that gets compromised when you have crappy markup.

Nowadays the consumer has more ways to get access to the internet; laptops, smartphones, tablet computers, E-readers and so on. While the mobile internet is growing, there is an need of clean markup that helps to facilitate the ease of search on the smaller screen. The usability of the internet has reached a new level and demands for an extended accessibility.

Also it is essential that your web site provides equal access and opportunity to people with disabilities. Text readers for the dim-sighted are getting even more information than we can see. These user agents can tell the hierarchical order when a certain header is more important because it has been coded as an <h3> while another header is an <h4> (Headers are ranked in order of importance from h1-h6).

When your content is separated from your presentation (style sheets for different media), the content can be understood more easily by all user agents. For instance, automated crawlers that create custom RSS news feeds on a certain topic, image- or video-specific search engines or submission sites where you can promote your blogposts. In most cases this freedom of content to move around the web, adapting to various media, is beneficial to the original creator.

Tip: A common technique is to apply different style sheets for different media. For example, you can apply a stylesheet only when a document is printed to paper, or when it’s accessed by a smartphone.

Search Engine Optimalization (SEO)

The reason why semantic HTML leads to better Search Engine Optimization should be pretty clear: the cleaner the markup, the more organized your code, which means the crawlers can easily obtain information without grabbing random elements from your website due to unsemantic HTML. Therefore, spending time to develop efficiently, will benefit you in the long run.

A clean markup means lightweight pages and it also means an increase in content-to-markup ratio (the keyword density of the lightweight page is better). With less code and more content on your website pages, your main content (keywords) moves closer to the top of your source code and consequently gets easily indexed. Pages with clutter and bad nested code are more difficult to crawl and therefore to be indexed correctly.

Use valid, semantic, browser-compatible and accessible code and it will considerably boost your rankings. A collateral benefit is that your HTML files are also smaller, so they load quicker.

Redesign/Teamwork

Ever tried to redesign anybody else’s source code? Well, if you haven’t yet, you probably will have to in the near future. If that person used crappy code and irrevelant CSS you’re gonna want to hunt him/her down ..

Semantic HTML is essential when working in a team on the same website. If you can’t understand your code a month or year later from the moment you developed it, then chances are big, no one else will. Eliminating clutter and making your code semantically correct will make your code understandable for anyone you pass it on to. And I can assure you that you’ll make a load of new friends and nobody would ever have to hunt you down ;-P

Conclusion

The best way how to get a clean markup is to code by hand, it’s far more cleaner and more valued in the eyes of search engines than most GUI tools do, these are terrible code generators. Also when you use PSD to HTML, the script is polluted with unnessecary crappy code.

To conclude, there are much more essentials to semantic HTML, however, the key to clean markup is code that is valide, cross browser compatible, structured and supports full accessibility. If you get those four elements down right, you are on the track to great semantic HTML that not only will you appreciate and benefit from, but everyone involved will as well.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

16 comments

on this article: “Why you should use Semantic HTML”
  1. Hi Gabi,

    Thanks, and you’re completely right! Especially love the way you’ve said it: “The use of semantic code forces a designer to be one with the concept of structure as much as visual results.”

    Extra bonus points, Gabi, brilliant!

    Thanks for your comment and visit, hope to see you a next time! Cheers & Ciao ..

  2. Nicely stated Gonzo. I couldn’t agree more. I would also add that using semantic code also allows one to use various add-sons, mashups, components, et all more effectively. The use of semantic code forces a designer to be one with the concept of structure as much as visual results.
    .-= Gabi´s last blog ..Best of the Web- PSD to WordPress =-.

  3. Hi Brett,

    Thanks for commenting, glad you liked the article! Cheers & Ciao ..

  4. This is a very interesting article! Thanks for the post.

  5. Hi Kased Ali,

    Yep, semantic HTML is all about HTML .. Saw your link too, a good addition to an earlier article: My Favorite Online Tools [Web Design]

    Cheers & Ciao ..

  6. Hi Gulam Ali,

    You’re completely right about the ‘missing bracket’ (or the ‘missing link’ ;-P) and thanks for the compliment.

    I checked the link, it’s a useful list with HTML Tags and Codes. So cheers for that.

    Thanks for visiting, cheers & ciao ..

  7. Hi JPop,

    You´re more than welcome, I´m glad it was useful for you! That just makes my day ..!

    Hi Wartner,

    Thanks for your comment, I really enjoy the fact that this article was useful for you too!

    You´ll find there are more useful and interesting articles for newbies, hope you´ll enjoy the read=

    For both of you, thanks a lot for reading, Cheers and Ciao ..

  8. You got a really intriguing website. I have been here reading for about 50 mins. I am a newbie and your articles are useful for me.

  9. Thanks for all these useful informations, i’ll bookmark it :)

  10. Hi Jenifer,

    the true readers of the gonzoblog already know this, .. duuh ;-P

    Here’s the article, but never-the-less thanks for reminding!

    Cheers & Ciao ..

  11. Did you know that the Basic HTML Color set is a combination of 216 color? You can find a tabulated view of the basic HTML color on the internet. It can be handy when you need to quickly choose a standard HTML color for your site or any other project.
    .-= Jenifer´s last blog ..ASCII – EBCDIC Converter =-.