In Easy Steps Articles

March 7, 2017

Linking to Page Fragments in HTML5

An Extract from HTML5 in easy steps, 2nd edition

– please note, colour references have not been included in this extract. For full colour specifications, see either print or digital copy.

Hyperlinks can target a specific point in a document that has been created with a “fragment” identifier – an element with a unique identifying name assigned to an id attribute in its opening tag. Within the hyperlink, the fragment identifier is specified to a href attribute in the opening <a> tag prefixed by a # hash character. For example, the tag <a href=”#top”> targets an element within the same document that contains the unique fragment identifier name of “top”.

A hyperlink can also target a specific point in a different document using the document’s URL, followed by a # hash character, then the fragment identifier. For example, the tag <a href=”index.html#top”> targets an element within a document named “index.html” that contains the unique fragment identifier name of “top”.

Following a hyperlink to a fragment identifier displays the document from the point where the fragment identifier appears:

Step 1
Start with the HTML5 document type declaration

Step 2

The # hash character is used in HTML to target fragments and to specify hexadecimal color values, and in CSS to select elements by their id attribute for styling.
Add a root element containing head and body sections, with a link element pointing to a style sheet
<html lang=“en”>
<meta charset=“UTF-8”>

<link rel=”stylesheet” href=”fragment.css”>
<body> <!– Content to go here –> </body>

Step 3
Within the body section, insert two hyperlinks that contain fragment identifiers and also target different fragments
<a id=”top” href=”#btm”>Skip to Page Foot</a> |
<a id=”next-btm” href=”next.html#btm”>

Skip to Next Page Foot</a>


Step 4
Next, in the body, insert a content paragraph followed by a hyperlink containing a fragment identifier and targeting the first hyperlink in the document
<p class=”yellow-block”>Content…</p>
<a id=”btm” href=”#top”>Skip to Page Head</a>

Step 5
Save the HTML document, then create a second similar document with hyperlinks both above and below content
<a id=”top” href=”#btm”>Skip to Page Foot</a>
<p class=”red-block”>Content…</p>
<a id=”btm” href=”#top”>Skip to Page Head</a> |
<a id=”prev-top” href=”fragment.html#top”>

Skip to Previous Page Head</a>

Step 6

Create a style sheet that sizes and colors the content area of each document – representing different page bodies
p.yellow-block { height : 700px ; background : yellow ; } { height : 700px ; background : red ; }

Step 7
Save the style sheet, then open the first web page in your browser and follow the hyperlinks to each of this document’s fragments below and above its body content


hot tipAt the end of lengthy pages include a hyperlink to a fragment at the top of the page so the user need not scroll back up.

Step 8
Now, follow the hyperlink to the fragment in the second document, then return to the top of the first document


Want to know more?

For the complete HTML5 guide, all in the trusted In Easy Steps style, click here. In full-colour and straightforward, jargon-free language, HTML5 in easy steps, 2nd edition instructs you how to employ the latest development for web page design with HyperText Markup Language (HTML5). This second edition is based upon the full W3C Recommendation of the HTML5.1 specification that was released on November 1, 2016. This means that ALL features of the latest specification are accurately included and fully demonstrated in this second edition.

Sign up to our


Our newsletters inform you of new and forthcoming titles, handy tips, and other updates and special offers. You can opt out anytime.

"*" indicates required fields

By anniemcg


We are sorry to let you go...

Would you mind giving us your feedback or reason of cancelling the subscription?


"*" indicates required fields

Reason For Cancellation*