Jump within a Web-Page using Hash(#) anchor links – Discussion on HTML Id

Swashata2

Let jump using hash Previously we have already discussed about the two important usage of HTML Ids. As you know, the discussion came from the comment of Dhawal asking me how to jump using a # URL within a page. So to explain that, we first went into deeper discussion on the HTML Id and their usage for Style Sheet selector and Client Site scripting languages like JavaScript. If you have not already, then you may first want to have a look on the tutorial here…

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--

This is just a Sample template illustrating HTML wrapper

-->

<title>Sample Web-Page</title>

<link href="css/style-main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="header-wrapper">

  <div id="header-inner">

    <div id="header-inner-logo">

        <h1><img src="images/logo.jpg" width="630" height="150" /></h1>

    </div>

    <div id="header-inner-feed">&nbsp;</div>

  </div>

</div>

  <div id="header-navbar">

      <ul id="nav" class="dropdown">

        <li><a href="#">Home</a></li>

         <li><a href="#">Contact</a></li>

         <li><a href="#">Instruction</a></li>     

    </ul>

    </div>

<div class="clear"></div>

<div id="content-wrapper">

  <div id="wrap2">

    <div id="main-wrapper">

      <h2 class="heading2">Page Heading Here</a></h2>

      <h3 class="heading">And a Sub-heading</h3>

        <p style="margin-left: 25px;">This is just for the completeness</p>

    </div>

    <div id="sidebar-wrapper">

        <div class="sidebar">

            <div class="sidebar-content">

                <h2>About The Template</h2>

                The Template is a self-design made by Swashata ~ Team Blakut/greenTechspot.blogspot.com. No readymade template has been used to make this website. It took hours to design this Template from scratch and after the W3C validation it really made us feel proud. 

            </div>

        </div>

  </div>

</div>

<div class="clear"></div>

<div id="footer-wrapper">

  <div id="footer-column1">

    <div class="footer-content">

        <h2>Join our Network</h2>

        <ul>

            <li><a href="http://www.orkut.co.in/Main#Community.aspx?cmm=20844581">Download Free Softwares [DFS]</a></li>

            <li><a href="http://www.orkut.co.in/Main#Community.aspx?cmm=17234890">Download PC Games [DPG]</a></li>

            <li><a href="http://www.orkut.co.in/Main#Community.aspx?cmm=49161844">Weird News Network [WNN]</a></li>

            <li><a href="http://www.orkut.co.in/Main#Community.aspx?cmm=39208030">Hardware and Networking Pro [HNP]</a></li>

            <li><a href="http://www.facebook.com/pages/Blakut/97102991997">Join us on Facebook</a></li>

            <li><a href="http://www.twitter.com/Blakut">Follow us @Twitter</a></li>

        </ul>          

       </div>

    <div class="footer-content"><h2>Some Infos</h2><br />

        <p>Nothing much to say</p>

    </div>

  </div>

  <div id="footer-column2">

      <div class="footer-content"><h2>Twit Twit</h2>

    <div id="twitter_div">

<h2 style="display:none;" class="sidebar-title">Our Twitter Update</h2>

    <p>Ofcourse we aint be tweeting up here :D</p>

 

</div>

    </div>

  </div>

  <div id="footer-column3">

    <div class="footer-content"><h2>License and Credits</h2>

    <p style="text-align:center;">bla bla bla...</p>

    <p style="text-align:center;"><img src="images/creditlogo.jpg" width="261" height="92" alt="Credits" /></p>

    </div>

</div>

</div>

 

</body>

</html>

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:

<div id="header-wrapper">

  <div id="header-inner">

    <div id="header-inner-logo">

        <h1><img src="images/logo.jpg" width="630" height="150" /></h1>

    </div>

    <div id="header-inner-feed">&nbsp;</div>

  </div>

</div>

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: 
    <a href="#header-wrapper">Jump to header</a>

    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!

2 comments

Comments are closed.