10.3 Targeting Page Sections

The anchor tag <a> and the name attribute can be used with good effect with frames to target or jump to pre-specified sections of a particular HTML document. You may recall that we did something similar in the section on linking within pages. For example, using 2 frames (page-d.html and page-e.html), page-d.html could be like this:

<html>
 <frameset cols="20%,80%">
  <frame src="page-a.html">
  <frame src="page-e.html#P10">
 </frameset>
</html>

Note that the only unusual thing here is the addition of #P10 after the file name (# being a unique identifier). The page-e.html document in this case is merely a series of headings and paragraph text, but with <a name="P?"> added before the headings like this:

<html>
 <body>
  <h4>Page E</h4>
  <a name="P1"><h2>P1 - HTML</h2>
  <p>All about HTML</p>
  <a name="P2"><h2>P2 - Adding Content</h2>
  <p>All about adding content</p>
  <a name="P3"><h2>P3 - Reserved Characters</h2>
  <p>All about reserved characters</p>
  ...etc through to P30...
 </body>
<html>

So the #P10 in page-d.html is linked to paragraph 10 (#P10) in page-e.html. Click here to see the result.

The <target> attribute is useful for creating much the same effect when using a link navigation. For example in page-f.html we could have:

<html>
 <frameset cols="200,*">
  <frame src="page-g.html">
  <frame src="page-e.html" name="here">
 </frameset>
</html>

Page-e.html is the content page from before and page-g.html contains a series of links. In this case it contains 2, one with a jump to section (again using #P10 after the filename) and one without:

<html>
 <body>
  <h4>Page G</h4>
  <a href ="page e.html" target="here">Link without Jump</a><br />
  <a href ="page e.html#P10" target="here">Link with Jump</a>
 </body>
</html>

Click here to see the result.