Linking to Page Fragments in HTML5

Written by In Easy Steps Team on . Posted in News

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:

 

fragment.html

 

Step 1
Start with the HTML5 document type declaration
<!DOCTYPE HTML>

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.

 

 

Step 2
Add a root element containing head and body sections, with a link element pointing to a style sheet
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Fragment Example</title>
<link rel=”stylesheet” href=”fragment.css”>
</head>
<body> <!– Content to go here –> </body>
</html>

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>

next.html

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”>

fragment.css

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 ; }
p.red-block { 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-Tip-New_cropped

 

At 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.