HTML5 – Clean Code for Front End Developers

I have recently started looking into the new html specification (HTML5) and have noticed that benefits of this new specification include improved semantics and cleaner mark-up. Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation. Consider the following code snippet:

This would usually denote a small area of navigation that loosely regards a navigational class on a html page. The loose association to the navigation is because I had the sense to name the class "navigation". Had I named the class "list" then this would have meant nothing to the reader of the mark-up. The <h2> tag relates to the <div> but is actually not part of the mark-up. HTML5 gives the ability to clean this mark-up and make it more semantic. the resulting code in HTML5 could be:

This code snippet actually lets the user see that the list of links are actually a small navigational element of the site. It will also relate the heading, Quick Links, to that small navigational element. There is another element, menu, that I will not talk about. It could be substituted for my use of <nav>

When I first started reading about HTML5 and how the semantics and cleanliness of the mark-up changed, it made be beg the question:

Is HTML5 the excuse to get front end developers to think about Clean Code?

I am a huge advocate of clean code. I expect my methods / classes and variables to have good naming conventions. I also expect the code to be short, concise and descriptive. I am a developer, not a designer. Design / front end development is usually my last port of call. therefore my mark-up and it's structure usually suffer. this means that it can be poorly organised and when I test in different browsers, I sometimes have to shoehorn in fixes which results in my code being messy.

Html5 may not be a finished specification, but I for one will start to embrace it in my development. If there is an easy way for the front end mark-up to be as clean as business logic then I think we should all lobby the W3C to finalise the specification and get this new standard into place.

Comments (3) -

DannyT
DannyT
11/1/2011 11:10:05 AM #

Also worth noting is the modernizr framework which allows (among other things) you to style the newer semantic tags even in browsers that don't yet support those tags. http://www.modernizr.com

Devil&#39;s Kitchen
Devil's Kitchen
11/1/2011 11:12:24 AM #

<i>"Html5 may not be a finished specification..."</i>

Actually, HTML5 specification will never be finished since it is, quite rightly, a "living" document, as announced by WHATWG back in January: http://blog.whatwg.org/html-is-the-new-html5

Although the W3C is supposedly preparing a traditional "snapshot" specification, it will be out of date as soon as it is "complete".

HTML5 is HTML and it is what you should use to build your view files and other front end code. I suggest that you use libraries such as Modernizr—http://www.modernizr.com/—in order to "polyfill" for less capable browsers (mostly IE).

DK

Kieranties
Kieranties
11/1/2011 11:15:40 AM #

Another big bonus: future screen readers will be able to interpret the semantic tags more consistently, making sites even more accessible!

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About Me

 

Web Developer. My most used framework is C# with MVC but use Webforms on occasion. Im an advocate of clean, maintainable code and am very passionate for what I do. Absolutely obsessed with Continuous Integration and how it should be used in every day development scenarios. Trying to move towards a system of Continuous Deployment
Follow Me on Twitter

Jetbrains Academy Member

 

MVB Blogger

 

Friends Of Redgate

Month List