Techniques

8 Ways to Increase the Readibility and Beautify your HTML Code

Written by Kevin Liew on 13 Apr 2010
23,372 Views • Shares
9 comments

Introduction

Just like most people, apart from maintaining Queness, I have a full time job work as a web developer in an digital agency. These few months I'm assigned with a few development jobs. Basically, I have to take care of the implementation of websites, which covers backend, frontend development except design. Quite intensive html, css and heaps of jQuery scripts going on.

Just like usual, I know I'm not the only one who will be maintaining those websites, so I have to make sure the code I produced must be easy to pick up by other teammates/colleagues/designers/developers. I have had a few of bad experiences that I have to read someone else's code, and the way they code it was horrible. It doesn't mean that the code is not efficient, but it was just too hard to read, to enhance and/or even to debug it. Most of the time, I ended up tidy it up first and then continue with my job. I believe this has happened to some of you as well, it's almost inevitable in web industry.

So, I think it's a best practise to not only make a visually well-presented website to the clients, but also have to make sure it's easy to maintain by other developers/designers. I have a few tips and tricks on this topic and I want to share with all of you. :)

1. Separate HTML, CSS & Javascript

Yes, I guess this is the most essential step to start it off. There are still a lot of people using inline CSS in a html page, well, I know it can save a lot of times but in long run, it will be a nightmare to people who have to fix or enhance the website. So, the best way is to separate CSS, Javascript from the HTML document, and reference it from external files.

Separate HTML, CSS & Javascript

2. Put indentation

Indent your code, make it easy to read. Well, it can be done by yourself from the start of the project and some of the html editors support auto-indentation as well. However, if you are half way completing or already completed the website, you can always use free tool to indent your html/css code.

Put Indentation

I found some online tools that can save your time,

3. Comments your code

Develop the habit of commenting. Commenting is a very useful to increase readibility. I usually write a bit of explanations in the Javascript code. For CSS and HTML, I use them as a marker to indicate the start and end of a section.

Comments your code

And also, check out the source code of Komodo Media, it's kinda funny.

4. Semantic HTML

Semantic HTML means using HTML tags for their implied meaning, rather than using a div or span for everything. The following is some of the examples we should use the existing html tag rather than div or span.

  • Use H1, H2, H3, H4, H5, H6 for heading instead of using div or span
  • Use LABEL as a label for an input field instead of using div or span
  • Use UL list for nav, list of links, list of categories instead of using div or span

Using existing tags can save time, well at least we don't have to think a class/id names (in some cases) and it's so much shorter.

5. Meaningful Classes & ID

I'm not sure how is this sound, but I do stick to several naming conventions for CSS classes and IDs. For example:

  • hdrXXXXX - header
  • lblXXXXX - label
  • txtXXXXX - text field

It makes the CSS stylesheets a little bit more meaningful. I think I have been using it for quite a while, and I got that concept when I was leaning Visual Basic 10 years ago :)

6. Validate it

Use the validator from W3C Markup Validation Service. It's really useful to identify problems. It happened to me a lot of times that I have forgotten to add forward slash on the close tag, and ended up openning two tags. I would recommend, before you start fixing IE bugs, validate it first and tidy up the code and you might able to fix some of the bugs that cause by human mistakes.

Validate it

7. Organize your files

Put all your files and categorised them in correct file structure, so files can be easily located. The following is the file structure I have been using:

Put it in a right folder

8. Tidy up for IE

There are a lot of posts out there that talk about "CSS Hacks for IE". Well, my point of view is - do not use them at all. The right way to do it is, create conditional tag and prepare different css stylesheets for IE6, IE7 and IE8. It's a future proof method, because you never know, what if the hack you're using now is patched by microsoft some day in the future.

<!--[if IE 6]>
<script type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->	

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
<![endif]-->

Final words

I hope this article will help you all. If you have any ideas, do share it with me! Please help me to bookmark it, share it and spread it to the rest of the web designers and developers! :) Also, subscribe my RSS or Twitter for future update!

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

9 comments
Alan 7 years ago
I already do all this, but its a great run down for beginners.
Reply
Ibrahim 7 years ago
Thanks ...
Reply
Jordan Wiedbusch 7 years ago
Good write up and a nice little reminder to keep up with keeping things clean. Only thing I should really stick to is septate CSS files, I've gotten into a bad habit if just putting them at the bottom of the main style sheet with comments telling what they are. BAD BAD ME!
Reply
kevin Admin 7 years ago
Hi Syam, thanks for pointing it out, I can see the point but did i not make myself clear that it works for some people? Anyway, thanks for your reference, it's very useful.
Reply
Syam Kumar R. 7 years ago
The examples given for 'Meaningful Classes and ID' are not meaningful at all! Class/ID for a textfield, say, 'last name' should be "lastname", not "txtlastname". Using hungarian notation in CSS is really er.. foolish. Anyway, using it in a programming language is not that meaningful either. It is just redundant, unreadable and meaningless. According to Linus Torvalds : "Encoding the type of a function into the name (so-called Hungarian notation) is brain damaged—the compiler knows the types anyway and can check those, and it only confuses the programmer."

A better example of good class/ID names can be seen here : http://www.w3.org/QA/Tips/goodclassnames
Reply
Coqe 7 years ago
Tidy it web is a great tool man!
Reply
Debi Z 7 years ago
Syam,
I agree completely with your 1st sentence: [quote] The examples given for 'Meaningful Classes and ID' are not meaningful at all! Class/ID for a textfield, say, 'last name' should be "lastname", not "txtlastname". [unquote]
However, what you write about using Hungarian notation is based on an incorrect understanding of what Simonyi wrote. When he talked about "type" he did not mean types as a compiler understands them, but rather as you suggest (e.g. lastname).
Have a look at http://www.joelonsoftware.com/articles/Wrong.html for an explanation.
Reply
Brett Widmann 6 years ago
I do most of these already, but this is still a really great list and i did gain a little knowledge from it! Thanks.
Reply