The main attraction of firefox is its customizable environment for the users to meet their tastes and requirements in terms of themes and plugins. As themes were already available with the chrome, the introduction of extension system brings it closer to firefox in terms of customization.

Here I am listing some of the chrome extensions available for web designers & developers.

Chrome Web Developer Tools

This extension aims at replicating the Web Developer Toolbar of Firefox.

Our current goal is to develop a clone of the “Web developer toolbar” of Firefox.

The functions it offers to web designers are some standard ones like validation, disabling CSS, hiding images, outline tables and showing images with an alt description etc counting to around 40 different features.

Download Chrome Web Developer Tools

Web Developer Mini

Web Developer Mini is a handy tool which offers easy access to validate your CSS and HTML, view the Page Source, in addition to giving you direct access to BrowserShots (a screenshot generating app).

Download Web Developer Mini

Firebug Lite

This is the stripped down port of the firebug project to Chrome. Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. A similar functionality can be achieved by the inbuilt Webkit debugger.

Download Firebug Lite

Pendule

Pendule is a very useful extension that gives you a wide array of easy to use developer tools. Some of its features include: View Page Source, Color Picker, Display Ruler and Disable CSS. On top of that you also have some handy image tools: Hide Images, Show Alt Text, Show Dimensions and Show paths. And, to top it all off, it even has tools that will validate CSS, HTML and Feeds. The UI of this extension is fantastic

Download Pendule

Chrome Sniffer

Chrome Sniffer is an extension that allows you to inspect the web framework/CMS and javascript library running on any website. The extension will display an icon indicates the detected frameworks. Currently, this extension can detect up to 45 popular CMS and javascript libraries

Download Chrome Sniffer

BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!

BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian) .

It will tell you what analytical tracking system they use, their Javascript library, server information; P3P policy, if any; advertising system and document information including which version of HTML and meta text.

Download BuiltWith Technology Profiler

MeasureIt

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

Known issues:
- There is no support on Google extension gallery.
- There are some problems with Ubuntu. Hope to fix it soon.

Download MeasureIt

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

* Javascript parsing and execution
* Layout
* CSS style recalculation and selector matching
* DOM Event handling
* Network resource loading
* Timer fires
* XMLHttpRequest callbacks
* Painting
* and more …

Download Speed Tracer

Eye Dropper

Eye Dropper and Color Picker extension tries to replicate Colorzilla on Chrome. The extension allows you to pick color from any webpage or from advanced color picker.

As of now there are two known major bugs, first is that sometime color is inexact and second that sometimes, part of screen show only black color.

Download Eye Dropper

IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. The Extension is great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files.

Download IE Tab

Chrome SEO

The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.

Download Chrome SEO

Chrome Flags

Chrome Flags displays a country flag indicating about the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.

Download Chrome Flags

Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Download Resolution Test

Lorem Ipsum Generator

Chrome Extension that generates random “Lorem Ipsum” text. It uses a minimalist and well looking design.

Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Download Lorem Ipsum Generator

Sometimes back, we used the favourite slicing technique to break down a larger image into smaller slices (parts) so as to make pages load faster, but all this technique was only fooling our eyes as the page looked like loading faster, while in reality it was not. Each of those images was fed up as a separate request to the server and would increase the time of loading actually.

According to Yahoo UI blog, the resultant sprite created by joining smaller images is always smaller in size than the combined contributed parts. It is because we have to use a single color table for the sprite instead of individual color tables for the contributed ones. Another advantage of using sprites is that this way we save the overhead required by the images.

Enough Writing, Let’s make a try

With the basic concept and theory behind CSS Sprites, it is time to build actual CSS that makes it run. Here we will make a try to replicate Yahoo’s sidebar.

As can be seen from the picture Yahoo’s sidebar contains around 19 links with their corresponding icons, but if you will notice, it has a single source image from behind. Infact Yahoo uses two CSS Sprites on their home page to increase their performance. As stated by the ex-Chief Performance Guru of Yahoo, Steve Souders on Yahoo’s performance blog that the number of HTTP requests is directly related to the loading time of the page, so lesser the HTTP requests means the faster image loading.

Coming to the point, let me tell you that I used the same image from Yahoo to achieve our effect more precisely.

As usual, the code starts with a browser reset. So did a browser reset with the Eric Meyer’s Browser Reset to neutralize and bring uniformity in the elements across different web browsers.
To establish a Yahoo like block level look, let us create some div containers and do a bit of styling to them.

<div id="menu-holder">
<div id="menu-holder-inner">
</div>
</div><!--/#menu-holder-->

Then I did a bit of styling for the divs to make a Yahoo like look.

/*------------------------------------------
STYLING FOR DIV ELEMENTS
------------------------------------------*/
div {}

/* Holder for our menu */
#menu-holder {
width:148px;
border:#B0BDC6 1px solid;
margin:50px auto;
background:url(../picx/grd-4px_1.1.gif) repeat-x;
}
#menu-holder-inner {
border:#FFFFFF solid 1px;
border-top:0;
border-bottom:0;
}

The code above indicates some background and border attributes that were used to style our divs. Moving forward, let us now create the menu items to be used in our menu.

<ul id="left-menu">
<li style="background-position:-396px -115px;">
<a href="" title="" class="menu-items-a" >Answers</a>
</li>
<li style="background-position:-396px -436px;">
<a href="" title="" class="menu-items-a">Autos</a>
</li>
……
……
</ul>


/*------------------------------------------
STYLING FOR UL ELEMENTS
------------------------------------------*/
ul {}

#left-menu {
list-style:none;
margin:0;
}

li {}
#left-menu li {
padding:0 0 0 0px;
background:url(../picx/trough_1.6.gif) no-repeat;
line-height:1.7em;
}

/*------------------------------------------
STYLING FOR A ELEMENTS
------------------------------------------*/
a {}
.menu-items-a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
color:#014289;
text-decoration:none;
font-weight:bold;
display:block;
padding:0 0 0 30px;
}

.menu-items-a:hover {
text-decoration:underline;
}

As you can notice from the above snippet, I have included a CSS attribute list-style:none; to override the default icon style for the ul. I have included the default background for all the li’s which they inherit from the default style #left-menu li .As you can see, I have written some inline CSS with each li just to change the position of the background image so as to display the desired icon only with the link. The inline CSS here is just to save time and you can replace it with the ids for the li’s or unique classes.

This menu example is just a simple example that demonstrates the power and simplicity of CSS sprites and just exposes a small functionality or application of the same. You can create more parts of your page using the technique.

New Section Tags

HTML 5 introduces many new elements that partition webpage content into sections. These partitions should help search engines and other assistive technologies to better process the page. The idea of sections is cool and it is a great relief to the UI designers to better organised their code. Block levels elements like header, section, footer & nav have been added to maximise the production of web application developers. The beauty of sections can be well understood from the above new tags that have been included. Like we have now nav for structuring of navigation links and header for the header elements. These elements are similar to div or span tags except they are having some meaning and context in which they are used.

<h3 id="blog-title">My Blog Name</h3>
<p id="blog-description">Hello World!</p>
In the same way, you can have
<nav></nav>
<ul class="nav">
<li>Home</li>
</ul>


WYSIWYG Signature

Documents created with WYSIWYG editors should include a signature in the head of the document, so that the browser can know the generator and will render the page accordingly.

<meta name="generator" content="Sample Editor 1.0 (WYSIWYG editor)" />


New Block level Elements

aside element

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative.

<aside>
<h3>Aside Representation</h3>
This is the representation of aside element.
</aside>


dialog element

The dialog element represents conversation. It contains dt elements which represent the speaker and dd elements which represents the speakers quotes. This gives reasonable display even in legacy browsers.

<dialog>
<dt> Costello
</dt>
<dd> Look, you gotta first baseman?
</dd>
<dt> Abbott
</dt>
<dd> Certainly.
</dd>
<dt> Costello
</dt>
<dd> Who's playing first?
</dd>
<dt> Abbott
</dt>
<dd> That's right.
</dd>
<dt> Costello
</dt>
<dd> When you pay off the first baseman every month, who gets the money?
</dd>
<dt> Abbott
</dt>
<dd> Every dollar of it.
</dd>
</dialog>


figure element

figure element is a cool addition to HTML 5. This is a block level element that combines image and its caption. Until this version, HTML was lacking the feature to add captions to the images. The figure element with a child legend element can be used to caption images. For example:

<figure>
<img src="kashit.jpg" alt="Photo: J. Smith" />Credit: Kashit, 2007
</figure>


New Inline Semantic Elements

mark element

As the name suggests, the mark element <m> is meant for marking the text or highlighting the text. As you will be aware of google’s searched keyword highlighting on the pages. This will be used for highlighting the searched keywords inside a page.
This is the test for <m>marked</m> text.

time element

The time element represents time of a specific moment such as 20 July, 2008, 5:30 PM.
This is the example of <time>5:35 PM, July 25, 2007</time>
This is a very important update / feature as it will help browsers to recognize the times very easily. It will also help in better search engine optimization and calendar functions.

progress element

This is similar to the progress bar that is present in today’s GUI showing progress of a particular process or activity. The progress element is very useful in showing the download or upload process with the aid of some scripting language. Its usage is like this :
Downloaded:<progress value="1534602" max="4603807"></progress>
It has value and max as its attributes which represent the current state of process and the total amount of process to be completed respectively.

Enhancements to input element

input element has received a good response from W3C. New types have been added to input element for better differntiation of input text. The new types are :
datetime, datetime-local, date, month, week, time, number, range, email, url
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

datagrid element

According to W3C specifications for HTML 5, datagrid represents an interactive representation of a tree list or tabular data. It’s intended for trees, lists, and tables that can be updated by both the user and scripts. By contrast, traditional tables are mostly intended for static data.
A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.

<datagrid>
<table><tbody>
<tr>
<td>Jones</td>
<td>Allison</td>
<td>A-</td>
<td>B+</td>
<td>A</td>
</tr>
<tr>
<td>Smith</td>
<td>Johnny</td>
<td>A</td>
<td>C+</td>
<td>A</td>
</tr>
<tr>
<td>Willis</td>
<td>Sydney</td>
<td>C-</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>Wilson</td>
<td>Frank</td>
<td>B-</td>
<td>B+</td>
<td>A</td>
</tr>
</tbody></table>
</datagrid>

What distinguishes this from a regular table is that the user can select rows, columns, and cells; collapse rows, columns, and cells; edit cells; delete rows, columns, and cells; sort the grid; and otherwise interact with the data directly in the browser on the client. The JavaScript code monitors the updates.

Embedded Media

HTML 5 will contain two new elements for media. New audio & video elements will make a uniform way of embedding media inside webpages. As today different vendors are using different media types on their sites (like Microsoft uses Windows Media, Apple uses Quicktime, Adobe uses Flash), thus resulting in diversity in the embedding of media. These elements may contain a way for better searching and accessible to blind or deaf users. Their usage is :

<audio autoplay="autoplay">

This is the podcast on DrupalWelcome to Drupal podcast...
</audio>

Similarly for video the usage will be same with support of deaf & blind people.

<video>
This is the descrption of movie...
</video>

Whether any one format and codec will be preferred is still under debate. Probably Ogg Theora support at least will be strongly recommended, if not required.

Conclusion

HTML 5 is part of the future of the Web and is a reaction to the slow progress made by W3C in delivering replacement to HTML 4. Its new elements enable clearer, simpler markup that makes pages more obvious. Div and span still have their places, but those places are much more restricted than they used to be.
Although not all browsers will support these new elements at first, the same has been true for most elements introduced after HTML was first invented: img, table, object, and many more. Support will come with time. In the meantime, HTML’s must-ignore behavior for unrecognized elements means that users with legacy browsers will still be able to read HTML 5 pages. They can do so today. Users with more modern browsers will get an enhanced experience, but no one will be left out. HTML 5 restores some of the excitement of the early days when Netscape, Microsoft, and others were introducing new elements every other week. At the same time, it takes a much more careful approach to defining these elements so that everyone can use them interoperably. The future looks bright.

Further reading

Latest version of W3c draft for HTML 5
Ogg – The next generation open video format
Conversation with HTML 5 team

A few general ideas

In order to create the file, open up a text editor and save an empty page as .htaccess (or type in one character, as some editors will not let you save an empty page).

.htaccess files must be uploaded as ASCII mode, not BINARY. You may need to CHMOD the htaccess file to 644 or (RW-R–R–). This makes the file usable by the server, but prevents it from being read by a browser, which can seriously compromise your security. (For example, if you have password protected directories, if a browser can read the htaccess file, then they can get the location of the authentication file and then reverse engineer the list to get full access to any portion that you previously had protected. There are different ways to prevent this, one being to place all your authentication files above the root directory so that they are not www accessible, and the other is through an htaccess series of commands that prevents itself from being accessed by a browser, more on that later)

Most commands in htaccess are meant to be placed on one line only, so if you use a text editor that uses word-wrap, make sure it is disabled or it might throw in a few characters that annoy Apache to no end, although Apache is typically very forgiving of malformed content in an htaccess file.

htaccess files affect the directory they are placed in and all sub-directories, that is an htaccess file located in your root directory (yoursite.com) would affect yoursite.com/content, yoursite.com/content/contents, etc. It is important to note that this can be
prevented (if, for example, you did not want certain htaccess commands to affect a specific directory) by placing a new htaccess file within the directory you don’t want affected with certain changes, and removing the specific command(s) from the new htaccess file that you do not want affecting this directory. In short, the nearest htaccess file to the current directory is treated as the htaccess file. If the nearest htaccess file is your global htaccess located in your root, then it affects every single directory in your entire site.

Also…some sites do not allow use of htaccess files, since depending on what they are doing, they can slow down a server overloaded with domains if they are all using htaccess files. I can’t stress this enough: You need to make sure you are allowed to use htaccess before you actually use it. Some things that htaccess can do can compromise a server configuration that has been specifically setup by the admin, so don’t get in trouble.

In general, you should never use .htaccess files unless you don’t have access to the main server configuration file. There is, for example, a prevailing misconception that user authentication should always be done in .htaccess files. This is simply not the case. You can put user authentication configurations in the main server configuration, and this is, in fact, the preferred way to do things.

The use of .htaccess files effects performance. When AllowOverride is set to allow the use of .htaccess files, Apache will look in every directory for .htaccess files. Thus, permitting .htaccess files causes a performance hit, whether or not you actually even use them! Also, the .htaccess file is loaded every time a document is requested.

.htaccess files are very popular and common among web administrators or server administrators as they provide various configuration settings for them. .htaccess files are commonly used for

• Authorization and Authentication to specify the security restrictions for a particular directory.
• Redirect users from one page to another using Apache mod_rewrite.
• Prevent directory browsing.
• Change the default index page of a directory.
• Block various bots.
• Presenting custom error pages

Authorization & Authentication

.htaccess files are often used to specify the security restrictions for a particular directory, hence the filename “access”. The .htaccess file is often accompanied by a .htpasswd file which stores valid usernames and their passwords.

You must have “AllowOverride AuthConfig” in effect for these directives to be honored.

Contents of .htaccess file to provide authentication for a directory

AuthType Basic
AuthName "Password Required"
AuthUserFile /www/passwords/password.file
AuthGroupFile /www/passwords/group.file
Require Group admins


Note that AllowOverride AuthConfig must be in effect for these directives to have any effect.

Redirect users from one page to another

Syntax: Redirect permanent [old directory/file name][space][new directory/file name]

Redirect permanent /olddirectory /newdirectory
Redirect permanent /olddirectory /somedirectory/newdirectory
Redirect permanent /oldhtmlfile.htm /newhtmlfile.htm
Redirect permanent /oldhtmlfile.htm http://your-domain.com/newhtmlfile.htm

All the above lines are valid. Just remember to replace the file/directory names with actual ones.

Using mod_rewrite rules

This is an Apache module which provides rule based rewriting engine to rewrite requested URLs on the fly. It supports an unlimited number of rules and an unlimited number of attached rule conditions for each rule to provide a really flexible and powerful URL manipulation mechanism. The URL manipulations can depend on various tests, for instance server variables, environment variables, HTTP headers, time stamps and even external database lookups in various formats can be used to achieve a really granular URL matching.

This module operates on the full URLs (including the path-info part) both in per-server context (httpd.conf) and per-directory context (.htaccess) and can even generate query-string parts on result. The rewritten result can lead to internal sub-processing, external request redirection or even to an internal proxy throughput. But all this functionality and flexibility has its drawback: complexity. So don’t expect to understand this entire module in just one day. This module was invented and originally written in April 1996 and gifted exclusively to the The Apache Group in July 1997 by <a href=”http://www.engelschall.com” target=”_blank”>Ralf S. Engelschall</a>

Examples of mod_rewrite

1. Description – Your current pages are called using index.php with parameter of url i.e

http://www.example.com/index.php?url=category

and instead of this URL, you want a nice and easy to read URL like http://www.example.com/category
Solution – Put the following lines in your .htaccess file.

RewriteEngine on
RewriteRule ^([^/.]+)/?$ /index.php?url=$1 [L]

Note: If your file already contains a line ‘RewriteEngine on’ then you don’t need to put it again unless it was set to off before you putting in your lines.

2. Description – Your current URL is
http://www.example.com/index.php?cat=category&subcat=subcategory
which you would like to see as
http://www.example.com/category/subcategory
Solution – Put the below lines in your .htaccess file

RewriteEngine on
RewriteRule ^([^/.]+)/([^/.]+)/?$ /index.php?cat=$1&subcat=$2 [L]

3. Description – You want to have many sub categories or categories like
http://www.your-domain.com/category/subcat1/subcat2/subcat3/subcat4/subcat5/
which you would to rewrite to
http://www.your-domain.com/index.php?cat=category&subcat1=subcat1&subcat2=subcat2 and so on …
Solution – See below lines..

domain.com/category –> index.php?cat=category
RewriteRule ^([^/.]+)/?$ /index.php?cat=$1 [L]
domain.com/category/subcategory/ –> index.php?cat=category&subcat=subcategory
RewriteRule ^([^/.]+)/([^/.]+)/?$ /index.php?cat=$1&subcat=$2 [L]
domain.com/p1/p2/p3/ –> index.php?a=p1&b=p2&c=p3
RewriteRule ^([^/.]+)/([^/.]+)/([^/.]+)/?$ /index.php?a=$1&b=$2&c=$3 [L]
domain.com/p1/p2/p3/p4 –> index.php?a=p1&b=p2&c=p3&d=p4
RewriteRule ^([^/.]+)/([^/.]+)/([^/.]+)/([^/.]+)/?$ /index.php?a=$1&b=$2&c=$3&d=$4 [L]
4. Description – Your URL has a folder and you would like rewriting for that folder. The URL looks like this http://domain.com/folder/index.php?url=name which you want to see as http://domain.com/folder/name/
Solution – Place the following lines in your .htaccess file

RewriteEngine on
RewriteRule ^folder/([^/.]+)/?$ folder/index.php?url=$1 [L]

5. Description – Your actual URL is http://example.com/index.php?page=hello which you want to see as http://example.com/hello.htm
Solution – Place the following lines in your .htaccess file

RewriteEngine on
RewriteRule ^([^/.]+).htm$ index.php?page=$1 [L]

6. Description – Your URL is http://example.com/folder/index.php?page=hello which you want to see as http://example.com/folder/hello.htm
Solution – Place the following lines in your .htaccess file

RewriteEngine on
RewriteRule ^folder/([^/.]+).htm$ folder/index.php?page=$1 [L]

There are many more things that you can do with mod_rewrite. As and when I discover more examples, I will keep updating this page. Please feel free to post your usage of mod_rewrite if already not covered here and I will add them to the above list of examples.

Prevent directory browsing

When directory browsing is on, people accessing a URL from your site with no index page or no pages at all, will see a list of files and folders. To prevent such directory access, just place the following line in your .htaccess file.
IndexIgnore */*
Many hosting companies, by default deny directory browsing and having said that, just in case you need to enable directory browsing, place the following line in your .htaccess file.
Options +Indexes

Change the default index page of a directory

Apache configuration file by default contains various file formats with index as filename as defaults for the index page. So, in case your site or directory does not has a file name which is included by default, chances are that your visitors will either see a list of all the files and folders [through directory browsing] or will not see anything at all. To change the default index page’s name for a directory or the site, place the following line in the .htaccess file of the root folder or the particular directory for which you want to change the index page’s name.

DirectoryIndex homepage.htm
DirectoryIndex somepage.htm

To have more names, put a space between file names and it will take into considerations all those file names as possible index page names. Which means, if it finds a filename matching a list of names you supplied [in the given order] in .htaccess, then it will open that page as the index page for the directory. The below line, with multiple names, is also a valid usage:
DirectoryIndex homapage.html somepage.html myindexpage.html anything.html
Remember, each entry must be in one line only.

Prevent access to your .htaccess file (.htaccess security)

This article would remain incomplete without mentioning this trick. To prevent visitors from viewing your .htaccess file, place the following lines in your file. Of course, by default most Apache installations will not show .htaccess file but just in case.

<Files .htaccess>
order allow,deny
deny from all
</Files>

More information and detailed documentation, visit Apache website.

Presenting custom error pages

Use .htaccess file to present users with your custom pages for 401 [Authorization Required], 403 [Forbidden], 404 [not found] and 500 [Internal Server Error].

Syntax:
ErrorDocument < error-code > < location -of-custom-page>

Examples:

ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html

You can include some script in your customized pages to automatically send an email to you whenever those pages are called for. This way you will be notified every time a user encounters 404, 500 and other error messages.

Allow/Disallow certain visitors from accessing your site

To accomplish it use the following lines. Look at the syntax first:

Syntax:

Order allow,deny
Deny from < incoming -address >
Allow from < incoming -address>

The first line [Order allow,deny] tells what should be done first. The second line tells about denying incoming-addresses [could be a single IP, an IP block, domain name and all] and third line tells about the incoming-addresses [could be a single IP, an IP block, domain name and all] those should be allowed. If second line has ‘Deny all’, then you should change the order of allow,deny in the first line to deny,allow.

To deny access to a single IP address and allow everyone else

Order allow,deny
Deny from 100.100.100.1
Allow from all

To deny a block of IP address and allow everyone else. [Notice the second line]

Order allow,deny
Deny from 100.100.100.
Allow from all

To deny a single IP address and allow everyone else. [Use it to block referrals from a specific domain]

Order allow,deny
Deny from www.my-domain.com
Allow from all


<meta name="description" content="This is the description of my web page" />

Let us go through this example.

For example, if a title of the page describing the 7th Harry Potter Book, reads

<title>7th Harry Potter Book</title>

And your meta tag is defined as

<meta name="description" content="7th Harry Potter and the Deathly Hallows (Book 7): Books: J. K. Rowling,Mary GrandPre by J. K. Rowling,Mary GrandPre" />

This meta tag contains the info which is redundant with title and this is also not proving any further information about the webpage.

The judicious use of meta “description” tag could be:

<meta name="description" content="Author: J. K. Rowling, Illustrator: Mary GrandPre, Category: Books, Price: $17.99, Length: 784 pages" />

This provides useful information in a very structured and consize way.

So the point is to use the title and meta “description” tag collectively and judiciously to improve chances of people visitng the page.

If meta “description” tag is not present in a webpage, then the seach engines usually take some lines from your body to dispaly as a snippet and one can not imagine what it can come out to be. Although, the search engines try their best to form an intelligent description, but human creativity has not been surpassed by search engines/machines yet.

Conclusion:

First do not forget add a meta “description” tag to webpages. The thing that follows, is to use the title and meta “description” tag collectively and judiciously to improve clickthroughs.

In the next post I will talk about the Abuses of meta “description” tag.