So now that our Basic concept on HTML Id is clear, lets see how we can jump within the webpage using hash (#) URLS. Below we have illustrated it with a very basic nested HTML template (xHTML) and also a Live Demo. Read on to know more…
Usage of HTML Id on wrapper and hash linking them on Regular Web-Page:
One of the major usage of HTML Id is using them on unique wrappers. For example take a quick look on the code below:
Well, the above template may look long, but basically it is a simple one! I have been using this layout on my PHP-Toolkit site. Anyways, let us come back into the discussion…
You should notice that there are several HTML Tags having their unique Ids. For example:
Here, three Ids have been used on three different HTML Tags. header-wrapper, header-inner, header-inner-logo. Now read care fully! We are assuming some points here which are going to be used on future designing:
- The URL of your web-page is http://yourname.com/index.htm
- Now you want to hash link the upper-portion of your web-page so that when someone clicks on the link his/her browser automatically jumps to that area without reloading the page!
- For this, we are going to use the position of the div tag having Id=“header-wrapper”. The reason is quite simple! The position of this wrapper is on the top portion of the web-page and we want to jump there.
- So now we are going to make a anchor link anywhere on the page like this:
This when clicked will obviously make the URL look like http://yourname.com/index.htm#header-wrapper . The browser will automatically jump to the top portion of the web-page!
- When anyone clicks on the link, he is jumped to the position of the div having that id!
- Obviously instead of #header-wrapper we could have used #header-inner, #main-wrapper, #sidebar-wrapper, #footer-wrapper and so to jump to the specific portion!
Demonstration: Click here for a Live Demo. (Link Updated! 5/07 19:11 ISD Sorry for the inconvenience) Have a look at the source code (You may use Firebug) for understanding. Simply click on the navigation block left to jump to respective sections. Just save the Web-Page as complete web-page from Firefox and you will have the source code at your hand!
So that was the basic concept behind the # jump on a particular web-page. Just define an id to a HTML tag and add the id followed by a “#” just after the URL. Obviously we use anchor text (Hyperlinked) to make such jump for web-page viewers!
Now as far as putting them on a blogger page is concerned, that requires a little bit trick. (Just for the usage of the anchor)… We shall see it on our next tutorial! Also if you have any question regarding this then feel free to ask us!