Headings help both the browser and the visitor to understand hierarchy order of your contents. There are six levels of heading tags defined, starting from h1 to h6. Out of them h1 tag is most powerful, while h6 is the least. They are used basically to provide headings and sub-headings in iur contents. :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">	
My first webpage


My first heading

This is my first webpage.
Lets see how it looks. &nbsp;&nbsp;nbsp;&nbsp; Its amazing
I am very happy.

My second paragraph

This is my second paragraph.
It is of relatively less importance. &nbsp;&nbsp;nbsp;&nbsp; Its amazing
I am very happy.

</body> </html>

Similarly , we can use all the headings from h1 to h6 in the way described above. Using different heading tags for different types of contents is advisable as it helps bots and crawlers to understand the hierarchy level of your page. Crawlers are automated bots that visist your website and find out the whole lot stored in them. They further show the saved and indexed results when searched for relevant keywords according the page rank for ypur site. I will be covering that in Search Engine Optimization part.So, for the time being just think that its a good practice.


Lists are used in page to make navigations (we will see in CSS...how ?), show a number of contents of same types, number of steps and a lots of other stuffs. We have two types of list - unordered and ordered. They are same in theer behaviour, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers. Lets see how :-

Suppose we wanna show steps to follow for making a dish :-

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">	
My first webpage


My first list

Ordered List

  1. Cut vegetables
  2. Add spices
  3. Add water
  4. Boil and consume

Unordered List

  • Cut vegetables
  • Add spices
  • Add water
  • Boil and consume
</body> </html>

I don't think if that will end up with something eatable or not, but that will surely look like a basic list in your browser. So, thats how lists work. We will be going through its various applications in the later part of our tour.

Inserting links

Attachment is essential. Nobody could remain alone. The same statement holds true for webpages also. They need to be interconnected, so that, there could be many way to go to a particular page. Moreover, its better if you have pages attached to each other like relation rather than functions(one to many paths). This makes the crawler happy , and , hence, the search engine.

 Go to another file 
 Go to another file in new tab 

Setting target to _blank opens the page in a new tab. One silly point to note is that we can give the path to the file name euther in relative way or directly the complete path. Lets see an example.

Suppose , we wish our link to point to a page which is in same folder i am in now , i can simply write the name of the file in the href attribute. Else if , I wish to move a folder up (back), I can use "../" to reach there and use the corresponding file name.

 Go to another file in same directory. 
 Go to another file in another directory 
Embedding Images

Ever realized, how your website will look like with just texts. Won't it be pathetic...?? So , here we are with the way to embed images on your webpage. You need to have an image first in your pointing folder first.

My first Image

Thats how we insert an image at required place, if the image lies in the same folder as the current file. alt attribute is used to give an alternate text to show in case if the images fail to download.

Lets see some other crucial HTML stuffs like table etc.


<<< Wanna review

Continue >>>