8 Ways to Increase the Readibility and Beautify your HTML Code

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.

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.

I found some online tools that can save your time,

• Tidy it! Online
• HTML Beautifier
• Code beautifier - CSS Formatter and Optimiser

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.

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.

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:

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!

• TAGS:
• HTML
• Tips
• Tweak