10+ HTML Best practices for Web Developer

HTML markup language for World Wide Web have been used for move twenty years, from HTML4 to XHTML, now HTML5. However, there are some fumdamental practises that works on all version of HTML you should be aware all the time. Let me remind you 10+ best practices that lead to clean and correct markup.

1. Well organize your HTML into major sections by using DIVs

To first thing to do on create your web page is consider dividing your web page into major sections. It promotes clean and well-indented code. It will help you and your team confusion and excess use of divs.

<div id="header"></div>
<div id="body-container">
        <div id="content"><!-- Content --></div>
        <div id="right-side-bar"><!-- Right Side Bar Content Area --></div>
</div>
<div id="footer"></div>

 

2. Seperate Presentation Markup from Content

The first best practices is not to mix html markup and visual presentation (CSS). This is the simply guideline and many devloper should know it on the first day they work on web development. However, until today, not everyone follow strictly.

Do not use inline style in your HTML. Always use a seperate CSS file for your style. Other than a good practices, it also help you and other developers that might work on your code make changes to the design quicker.

One of the example to illustrate is:

<p style="color: #CCC; font-size:16px; font-family: arial">An example to illustrate inline style in html</p>

 

3. Minify and Unify CSS

In our web 2.0 development, having more than one CSS files included to render a page is very common. However, each CSS file include represent an HTTP request, if there are more than several CSS files which slows down website load time. The solution is to minify all your code and unify files that can be combined into one file. This really improve your website load time. And there are several CSS optimizer that help to optimize your CSS. Such as: CSS Optimizer, Clean CSS, CSS Drive Gallery- CSS Compressor, Online CSS Optimizer, CSS Compressor, flumpCakes Style Sheet Optimizer .
The below shows a web page included more than 15 css file on rendering their index page.
 

<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/common2.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk/stylesheets/home.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/home2.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/party.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/style.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/celebrity.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/album.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/endpage.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/galleriffic-5.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/guide.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/beauty2.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/snap.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/expert.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/wedding.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/life.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/elletv.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/health.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/gourmet.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/fashion2.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/astrology2.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/design/ellehk_phase3/stylesheets/runway2.css" media="all"/>

 

4. Minify, Unify and Move JavaScript at the bottom of the page

Like CSS, it is very common to have more than one JavaScript file included on a page. To improve the loading speed on the webpage, we have to minify and unify JavaScript files, hence we can reduce the number of HTTP requests that needed to generate one web page.

But one thing unlike CSS, browsers do not allow parallel download, which means that browser cannot download anything while downloading JavaScript. And this result the page feel like loading slow.

The solutions is to load JavaScript last. To achieve this, place JavaScript at the bottom of your HTML document. Best place is place the scripts before the closing </body> tag.

Here show a web page, included more than 10+ JavaScript files to reder the index page:
 

<script language="JavaScript" type="text/javascript" src="/extension/zselectiontext/design/standard/javascript/zselectiontext.js"</script>
<script language="JavaScript" type="text/javascript" src="/design/ellehk_phase2/javascript/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/extension/tag_manage/design/standard/javascript/prototype.js"</script>
<script language="JavaScript" type="text/javascript" src="/extension/tag_manage/design/standard/javascript/effects.js"></script>
<script language="JavaScript" type="text/javascript" src="/design/ellehk_phase2/javascript/cookie.js"></script>
<script language="JavaScript" type="text/javascript" src="/design/ellehk_phase2/javascript/poll.js"></script>
<script language="JavaScript" type="text/javascript" src="/extension/zbeautyguide/design/ellehk_phase3/javascript/beautyguide_product.js"></script>
<script type="text/javascript" src="/design/ellehk_phase2/javascript/global.js"></script>
<script type="text/javascript" src="/design/ellehk_phase3/javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/design/ellehk_phase3/javascript/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript" src="/design/ellehk_phase3/javascript/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="/design/ellehk_phase3/javascript/jquery.soChange2.js"></script>
<script type="text/javascript" src="/design/ellehk_phase3/javascript/home.js"></script>

 

5. Wisely use Heading Elements

<h1> to <h6> elements  used to denote your HTML's content hrerarchy. This helps make your content meaningful to search engines robot, as well as other user agents.
 

<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>
<h3>This is a sub-heading underneath the h2 heading.</h3>

For blogs, I would recommend using <h1> element for blog post tile, since it is the most important element on the page.

6. Use Right HTML element at the right place

HTML elements is the key to create a semantic and meaningfule content structure. For example: <em> for emphasis and strong  for heavy emphasis.

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

User <p> for paragraphs. Do not use <br /> to add new line between paragraphs; Also use CSS margin / padding instead.

For a set of related elements, use <ul>, or <ol> or <dl>. However, do not use <blockquote> for indentation purposes, it should be used for quoting text only.
 

7. User Divs with care

According to latest draft of the W3C HTML specification, a <div> is a meaningless element that  should be used "as an element of last resort, for when no other element is suitable."

But many use it even for menial things like displaying inline elements as block elements (instead of the display:block; CSS property).

Avoid creating mountains of divs by using them sparingly and responsibly.
 

8. Use Unordered list to create Navigation

By using <ul> element combined with CSS markup to create navigation menu which makes semantic as well as beautifuly.

Example of Unordered list navigation menu:

<ul class="main_nav">       <li class="active"><a href="/" title="">HOME</a></li>
       <li><a href="/portfolio" title="">PORTFOLIO</a></li>
       <li><a href="/articles" title="My blog would frequently update with tutorial related to web development">BLOG</a></li>
        <li><a href="/content/about-me" title="">ABOUT ME</a></li>
</ul>

 

CSS style to make Unordered list as Horizontial Navigation Bar:

 #main_nav { position:absolute; right:30px; top:40px;}
       #main_nav li { float:left; margin-left:2px; }
       #main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
       #main_nav li a.active,
     #main_nav li a:hover{  background-color:#0b86cb;  }

 

9. Remember to close Tags

As I remember the first lesson I had on Web Development in University, the professor mention the important of create well structured HTML. It means that we should close tag properly. And according to W3C specification, tags should be closed properly. It is becuase some browsers may render incorrectly, if not closing your tags properly and according to standard. This problem always happen an unstructured render by Internet Explorer 6, 7, 8.

Here shows a not structured HTML:

<div id="test">
<img src="images/demo_image.jpg" alt="demo image" />
<a href="#" title="click here">Click Here</a>
<p>some sample text </p>
</div>

 

10. Use Lower Case Markup

It is an industry-standard practice to keep your markup lower-cased. Capitalizing your markup will work and will probably not affect how your web pages are rendered, but it does affect code readability.

Bad Example:

<DIV>
<IMG SRC="images/demo_image.jpg" alt="demo image"/>
<A HREF="#" TITLE="click here">Click Here</A>
<P>some sample text</P>
</DIV>

 

11. Add Alt attribute with Images

alt provides a very useful function to Search Engine robot, because they dont not understand the image file. However, if you provide description in alt attribute which let Search Engine robot know what this image is represent for.

<!-- has an alt attribute, which will validate, but alt value is meaningless -->
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />

<!-- The correct way -->
<img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />

 

12. Use Fieldset and Labels in Web Forms

In order to improve the quality of your code and make the form more understandable by user, we should use <label> and <fieldset> elements to create Web Forms. Use the <label> element to label input fields, divide input fields into logical sets using <fieldset> and name a tiltle of the <fieldset> using <legend>.

<fieldset>
    <legend>Personal Particular</legend>
    <label for="name">Name</label><input type="text" id="name" name="name" />
    <label for="email">E-mail</label><input type="text" id="email" name="email" />
    <label for="subject">Subject</label><input type="text" id="subject" name="subject" />
    <label for="message" >Message Body</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>

 

13. Seperate IE Fixes

As a web development enginner, handling "Cross Browser Compatibility Issue" should be an important things need to think of when doing Web devlopment.  Like for IE 6 or 7 or 8, they have different kinds CSS hacks. However, if you make your fixes modular to furture-proof your work such that it make you or your team easier to follow on working maintenance task.

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

 

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
        DD_belatedPNG.fix('#logo');
</script>
<![endif]-->

To fix PNG transparencies in IE6, I would recommend use the DD_belated PNG script.
 

14. Avoid Excessive Comments

As a developer, writing comments on your code which make it easier for other people to understand your code logic and is a good thing for programming language like PHP, JAVA and C#.

However, HTML/XHTML is an markup language and it is pretty much self-explanatory. And it is not necessary to comment your code on everyline. And if your HTML have a lot of comment, you should review your work for semantics and appropriate naming conservations.
 

15. Validate Your Code

Personally I recommend to validate your HTML by using W3C markup validation service, it can be a useful debugger that helps your identify rendering errors. Moreover it save you from issues that are hard to pinpoint once your work in completed. And one thing should bare in mind that your code validated doesnt means its good code.