Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.


Skip Links

Skip Links are the links given at the top of the page that lets the users skip directly to the content area. This is important if there is lot of navigational elements before the content. You can use CSS to hide these links for visual browsers - but if the users is browsering with an older browser(lynx) or PDAs or mobile phones, he should be able to skip the navigational links and jump directly to the content.


If done correctly, this technique will create this effect...

With CSS

Look Ma! No skip links
Appearence of the page with CSS

Without CSS

Easy Shortcuts to everywhere at the top
If CSS is not there, the skip links are shown.


<title>Skip Links</title>
<style type="text/css">
#skip-links {
 display:none;/*Hide the links from Visual browsers*/
/* .. Other Styles ... */

<div id="skip-links">
  <li><a href="#content">Skip to Content</a></li>
  <li><a href="#references">Skip to References</a></li>

<div id="navigation">
  <li><a href="">All Navigational Links</a></li>
  <li><a href="">This could be long</a></li>

<div id="content">
 <h1>Hello World</h1>
 And lots of other stuff...<br />
 ... Lots of stuff here ...
 <div id="references">
  <li><a href="">Skipping over navigation links</a></li>


Filed Under...