html_10_plus_best_practices

Best Web Developer practices in HTML

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>
<li><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.

Related Posts


11 thoughts on “Best Web Developer practices in HTML

  1. PC-Urgence Dépannage informatique

    Woah this blog is great i love studying your posts. Stay up the great work! You understand, a lot of individuals are looking around for this info, you could aid them greatly.

    Reply
  2. Pc-urgence depannage informatique

    Hiya very cool web site!! Man .. Beautiful .. Wonderful .. I’ll bookmark your blog and take the feeds additionally?I am satisfied to seek out a lot of useful info right here within the put up, we need work out extra techniques in this regard, thank you for sharing. . . . . .

    Reply
  3. kore dizileri izle

    I used to be curious about your up coming put up admin truly required this blog site super remarkable webpage

    Reply
  4. Paul Troiani

    I simply want to mention I’m new to blogging and actually loved your blog. More than likely I’m going to bookmark your website . You amazingly have amazing writings. Kudos for sharing with us your web site.

    Reply
  5. Saundra Nitzel

    Thanks a ton for this – love the info and agree with your perspective. However many others will not, so thanks for speaking up. Nice blog, well done!

    Reply
  6. Ranee Mccoppin

    I just want to tell you that I am just new to blogging and site-building and truly liked you’re web-site. More than likely I’m planning to bookmark your site . You really come with superb well written articles. Appreciate it for sharing with us your web page.

    Reply
  7. blog about fashion bag

    Im honored to obtain a call from my friend as soon as he observed the important suggestions shared on your own site. Reading through your blog post is a real brilliant experience. Many thanks for taking into account readers like me, and I desire for you the best of achievements for a professional topic.

    Reply
  8. Alecia Heidinger

    Extremely useful list, thanks.Suggestion to the long term: how about a list of useful iPhone apps for designers (not just web designers)?

    Reply
  9. Wealthy Mumma

    Howdy very nice web site!! Man .. Beautiful .. Wonderful .. I will bookmark your web site and take the feeds also?I’m happy to search out so many useful information here in the post, we need work out extra strategies in this regard, thank you for sharing. . . . . .

    Reply
  10. Martha Stewart

    Thank you, I’ve recently been looking for info about this topic for a while and yours is the greatest I have came upon till now. However, what about the conclusion? Are you positive about the source?|What i do not understood is in reality how you are not actually much more well-favored than you may be right now. You are so intelligent.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*