Adding Hyperlinks to Your Kindle Fire eBook

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Lists

Everyone likes functionality in their eBooks and being able to visit other sites on the web with the tap of a finger. By adding an element of interactivity, hyperlinks give eBooks a serious edge over their dead tree cousins. A hyperlink consists of two parts: the hyperlinked content that is clicked to access the hyperlink and the target. For example, by clicking this hyperlinked content, you will go to the author's blog at http://paulsalvette.com. Hyperlinks can also redirect the reader to sections inside the actual eBook—a necessity for building a proper Table of Contents.

External Hyperlinks

For hyperlinks outside of the eBook, you can designate targets as either websites (http://website.com) or email addresses (mailto:name@domain.com). Be sure to add the http:// or mailto: before your hyperlinks, or else your HTML markup will fail EPUB validation. The HTML markup to add a hyperlink is an in-line element with the following syntax: <a href="http://website.com">hyperlinked text</a>.

Getting back to the elf story, suppose you want to hyperlink the phrase “Joe Selfpubber” with an email address that opens the eReading device's email application and "Drop him a line" with a hyperlink that goes to the author's website. The HTML markup would be as follows:

<p><a href="mailto:joeselfpubber@gmail.com">Joe Selfpubber</a> is trying to make it big by selling his eBooks on the Kindle Fire so that he can quit his lousy day job. <a href="http://joeselfpubber.com">Drop him a line sometime</a>.</p>

Adding Hyperlinks with HTML

By default, most web browsers and eReading devices will render hyperlinked text blue and underlined. You can alter this presentation using CSS. By clicking on “Drop him a line sometime”, you will be taken to http:// joeselfpubber.com, and by clicking “Joe Selfpubber”, it will pull up the eReading device's or computer's email client with “joeselfpubber@gmail.com” in the TO: block.

Tip: Hyperlinks offer the opportunity to link to content outside of the eBook that may be of interest to your readers, as well as a chance to content market your own goods and services. Do not pass up the occasion to utilize hyperlinks extensively.

Important Note: Some websites use ampersands within the URLs for certain links. In order for your markup to be valid, you need to convert the ampersands into HTML entities (i.e. &amp;) or use percent encoding (i.e. & should be changed to %26).

Internal Hyperlinks

Internal hyperlinks target specific content within the eBook itself, permitting the reader to jump from section to section. To define where the hyperlink should target, you must establish anchors within your eBook. This is accomplished using the id="anchorname" attribute, which can be placed inside almost any HTML tag (e.g. <p>, <div>, <span>, <a>, etc.). The id attribute is also important in styling your content with CSS.

Establishing the hyperlink to target the anchor is done in a similar fashion as hyperlinking to external content. The anchorname defined in the id attribute gets targeted by using the # key. For example, <a href="myebook.html#anchorname">hyperlinked text</a> would target the content with the id="anchorname" attribute inside the myebook.html file. You should use a relative path for the .html file.

Here is an example of adding anchors and internal hyperlinks to your HTML markup in a file called myebook.html:

<p id="section1">This is the 1st paragraph.</p>
<p>By clicking on this <a href="myebook.html#section1">link</a>, you'll go back to the 1st paragraph.</p>

By clicking on the hyperlinked text, the web browser or eReading device will go back to the first paragraph. You will notice that the value of the id attribute is completely transparent to the reader.

Internal Hyperlink Example in Google Chrome

Important Note: The value of the id attribute must be labeled uniquely throughout the HTML document. Also, it must not start with a number or special character (e.g. 1anchorname, $anchorname, etc.)

Internal Hyperlink Bug in Kindle

There is a bug in the way the KF8/MOBI format is compiled that provides such a poor reading experience a section must be devoted to its awareness. Technically, you can specify an anchor with in-line HTML markup like <a id="anchor1" /> or <span id="anchor1">some text</span>. However, when the reader clicks on a hyperlink to this anchor in the older e-ink Kindles or the Kindle apps, it will completely mangle the formatting of the target text that is designed using CSS. Sadly, this problem was not corrected by Amazon in their most recent release of the KindleGen software.

This is problematic because you often want your internal hyperlinks to target specific chapter headings. For example, the design of this sample novella has CSS to style it, and there is an in-line HTML anchor within the HTML markup for the heading:

<p class="chapheading"><a id="chap3" />Chapter 3<br />Las Vegas</p>

If a hyperlink to #chap3 is clicked on within any Kindle device, except the Kindle Fire, the following bug occurs where the formatting is completely blown out:

Bug with Internal Hyperlinks Example on the Kindle for iPhone

To avoid this only use the id attribute within block elements. To be safe you can wrap <div>…</div> tags around the entire heading and insert the id attribute to define the anchor. The HTML markup for this particular case would look as follows:

<div id="chap3"><p class="chapheading">Chapter 3<br />Las Vegas</p></div>

This method of including the id attribute in a separate <div> element will avoid the Kindle bug.

Tip: In addition to defining anchors within the <div> element, be sure to label your anchors in a logical fashion to help yourself in the design process and workflow.

Next Post: Basic CSS

Adding Hyperlinks to Your Kindle Fire eBook