Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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

Dummies.com Sweepstakes

Win $500. Easy.