How to Link within the Same Page with HTML5

Links can help users navigate a single web page. Locations within web pages can be marked for direct access by links on the same page. Intradocument hyperlinks include such familiar features as

  • Back to Top links.

  • Tables of contents.

An intradocument hyperlink, also known as a named document link, uses a URL like this:

<a href="#top">Back to top</a>

The pound sign (#) indicates that you’re pointing to a spot on the same page, not on another page.

The listing shows how two anchor elements combine to link to a spot on the same page. (Documents that use intradocument links are usually longer. This document is short so you can easily see how to use the top anchor element.)

<!DOCTYPE html>
<html>
  <head>
    <title>Intradocument Hyperlinks at Work</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1><a name="top"></a>Web-Based Training</h1>
    <p>Given the importance of the Web to businesses and other organizations, 
       individuals who seek to improve job skills, or fulfill essential job
       functions, are turning to HTML and XML for training, particularly to 
       HTML5. We believe this provides an outstanding opportunity for 
       participation in an active and lucrative adult and continuing education 
       market.</p>
    <p><a href="#top">Back to top</a></p>
  </body>
</html>

The figure shows how this HTML markup appears in a web browser. If the user clicks the Back to Top link, the browser jumps back to the top spot — marked by <a name="top"></a>. The text for this example is short, but you can see how it works by resizing your browser window (making it tall and narrow) to display only two or three words per line of text.

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com