10 basic HTML Practise should be followed

This may not sound very interesting to many web designer and developer but I think it is always a good idea to look back at the basics sometimes and to ask ourselves are we following the basics properly. Here is the list of 10 most basic practise a web designer and developer should follow.

1. Proper Doctype Declaration

The first thing we do in a XHTML document is a valid doctype declaration. The doctype declaration tells the browser about the XHTML standard we should follow and help the browser to render the markup correctly.

Standard doctype declaration

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

2. Proper Title tag in head section

The title tag makes a page more search engine friendly and useful. The text inside the title tag comes in google search result pages and also in browser tabs and bars.

3.Use descriptive meta tags

Meta tags make the page more useful to search engine spiders.

The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For each web page, you should place a concise and relevant summary inside the meta description tag.

<meta name=”description” content=”Rupnarayanb’s blog is a place for web designer and developers” />

4. Use divs to separate your layout in major sections.

<div id=”header”></div>

<!– end of header div –>

<div id=”container”>

<div id=”content”></div>

<div id=”sidebar”></div>

<!– end of sidebar div –>

</div>

<!– end of container div –>

<div id=”footer”></div>

<!– end of footer div –>

5. Do not mix css with XHTML

Always try to have a separate css file. Do not use inline css. This will help to make the changes a lot quicker and will help to render the files more quickly.

6. Move down Javascript

Like css it is best practise not to use inline javascript. But one problem with external javascript is browsers do not allow parallel downloads, which means the browser cannot download anything while it’s downloading JavaScript, resulting in making the page feel like it’s loading slowly.

So the best strategy is to load the javascript last. That is after the css and to do this it is best to place the javascript at the bottom of the body. Just before the close of the body tag.

7. Proper use of heading elements

Always try to use the heading elements  with proper hierarchy and in a meaning full way. Like in a blog post the heading of the blog should always be H1.

This helps make your content more meaningful for screen-reading software and search engines, as well as other user agents.

8. Use an unordered list for navigation.

Navigation is a very important aspect of a website design and the <ul>  element combined with CSS  makes your navigation menus semantic (because, after all, a navigation menu is a list of links) as well as beautiful.

9. Use alt attribute with images

Using a meaningful alt attribute with <img> elements is a must for writing valid and semantic code.

<img id=”logo” src=”images/logo.png” alt=”Wordpress  Logo” />

10. Always use Fieldset and Labels in webform

Use the <label> element to label input fields. Divide input fields into logical sets using <fieldset>. Name a <fieldset> using <legend>. All of this will make your forms more understandable for users and improve the quality of your code.

<fieldset>
<legend>Personal Details</legend>
<label for=”name”>name</label><input type=”text” id=”name” name=”name” />
<label for=”email”>email</label><input type=”text” id=”email” name=”email” />
<label for=”subject”>subject</label><input type=”text” id=”subject” name=”subject” />
<textarea rows=”10″ cols=”20″ id=”message” name=”message” >
</fieldset>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: