Chapter 3: Internal Links and Bibliography

This chapter explains the links and navigation used throughout the template. Each example shows both the reader-facing result and the source, or identifies the existing section where the code is used.

1. Create a link with a and href

Rendered example

Chapter 2: Responsive Tables

XHTML — code producing the example above

<p><a href="CHAP-02.xhtml">Chapter 2: Responsive Tables</a></p>

The a element creates the link. href holds the destination and the text between the opening and closing tags becomes its label. The correct attribute spelling is href. Both chapters share the EPUB folder, so the filename alone is sufficient.

XHTML — relative, fragment, and external link examples

<a href="NAV.xhtml">Contents</a>
<a href="CHAP-02.xhtml#two-column-table">Two-column table</a>
<a href="#bibliography">References in this chapter</a>
<a href="https://www.w3.org/publishing/">W3C Publishing</a>

The first goes to another local file. The second targets a section id in that file. The third stays within this chapter. The last uses a full web address and requires access to that website. Test these destinations here: Contents, two-column table, references below, and W3C Publishing.

2. Build the linked reference list

Rendered example

Chapter 2: Responsive Tables - Discusses table structures in EPUBs, including examples of 2+ rows and 3+ rows tables.
References Section - Links to additional resources about EPUBs, including organizations and tools.
Chapter 1: Introduction - Provides an overview of the book and its purpose.

XHTML — code producing the example above

<ol>
      <li>
        <a href="CHAP-02.xhtml">Chapter 2: Responsive Tables</a> - Discusses table structures in EPUBs, including examples of 2+ rows and 3+ rows tables.
      </li>
      <li>
        <a href="REFS.xhtml">References Section</a> - Links to additional resources about EPUBs, including organizations and tools.
      </li>
      <li>
        <a href="CHAP-01.xhtml">Chapter 1: Introduction</a> - Provides an overview of the book and its purpose.
      </li>
    </ol>

This is the chapter’s original internal reference list. ol creates numbering; each li contains one linked title followed by an explanation. The hyphen and explanation are ordinary text. For a bibliography of outside works, replace entries with accurate author, title, publication, and source details in a consistent format.

The h2 References heading introduces the list. The enclosing teaching section has id="bibliography", which makes the within-chapter link above work.

XHTML — the section target and heading

<section id="bibliography">
  <h2>References</h2>
  <!-- Place your reference list here. -->
</section>

The comment between  is an editor’s note in the code, not displayed reading text. The live teaching heading in this revision includes its section number and explanatory title.

3. The chapter’s book menu

XHTML — actual menu at the top of this chapter

<nav class="chapter-nav" aria-label="Book navigation">
<p>
<strong>Book navigation</strong>
</p>
<ul>
<li>
<a href="NAV.xhtml">Contents</a>
</li>
<li>
<a href="CHAP-01.xhtml">Chapter 1: Introduction</a>
</li>
<li>
<a href="CHAP-02.xhtml">Chapter 2: Responsive Tables</a>
</li>
<li>
<span aria-current="page">Chapter 3: Internal Links and Bibliography (current)</span>
</li>
<li>
<a href="CHAP-04.xhtml">Chapter 4: Definitions</a>
</li>
<li>
<a href="CHAP-05.xhtml">Chapter 5: Putting It All Together</a>
</li>
<li>
<a href="REFS.xhtml">References</a>
</li>
</ul>
</nav>

nav groups navigation links; class="chapter-nav" connects it to the shared menu styles. aria-label names the navigation region for assistive technology. The p and strong elements provide the visible bold label. ul and li form the menu list.

Each other chapter uses a linked a element. This chapter uses span with aria-current="page" to identify the current location without a redundant self-link. When copying the menu to another chapter, move that current-page marker and restore this chapter’s link.

4. Previous, Contents, and next links

XHTML — actual navigation at the end of this chapter

<nav class="chapter-nav" aria-label="Continue reading">
<p>
<a href="CHAP-02.xhtml">← Previous: Chapter 2: Responsive Tables</a>
</p>
<p>
<a href="NAV.xhtml">Back to contents</a>
</p>
<p>
<a href="CHAP-04.xhtml">Next: Chapter 4: Definitions →</a>
</p>
</nav>

Each link sits in its own paragraph. The arrow characters are ordinary UTF-8 text. The earlier chapter is CHAP-02.xhtml and the next is CHAP-04.xhtml. These links are authored explicitly; they do not automatically change when the spine changes.

5. Style the navigation

CSS — actual navigation rules

.chapter-nav { border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; margin: 1.5em 0; padding: .75em 0; }
.chapter-nav ul { list-style: none; padding: 0; }
.chapter-nav li { margin: .65em 0; }
.chapter-nav a { display: inline-block; padding: .35em 0; }

.chapter-nav adds top and bottom borders, outer margin, and inner padding. A space in .chapter-nav ul selects lists inside that region. list-style: none removes bullets and padding: 0 removes list padding. The li rule separates entries. The a rule displays each link as an inline block with vertical padding, making it less crowded. Link colour comes from the a rule shown in Chapter 1.

6. How NAV.xhtml supplies the book Contents

XHTML — complete current Contents document

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en-CA" lang="en-CA">
<head>
<title>Table of Contents</title>
<link rel="stylesheet" type="text/css" href="../STYLES/SGC-MAIN.css"/>
</head>
<body epub:type="frontmatter">
<nav epub:type="toc" id="toc" role="doc-toc">
<h1>Table of Contents</h1>
<ol>
<li>
<a href="TITLE.xhtml">Title Page</a>
</li>
<li>
<a href="COPYRIGHT.xhtml">Copyright</a>
</li>
<li>
<a href="DEDICATION.xhtml">Dedication</a>
</li>
<li>
<a href="EPIGRAPH.xhtml">Epigraph</a>
</li>
<li>
<a href="FOREWORD.xhtml">Foreword</a>
</li>
<li>
<a href="PREFACE.xhtml">Preface</a>
</li>
<li>
<a href="ACKNOWLEDGMENTS.xhtml">Acknowledgments</a>
</li>
<li>
<a href="HOW-TO.xhtml">How to Use This Template</a>
</li>
<li>
<a href="CHAP-01.xhtml">Chapter 1: Introduction</a>
</li>
<li>
<a href="CHAP-02.xhtml">Chapter 2: Responsive Tables</a>
</li>
<li>
<a href="CHAP-03.xhtml">Chapter 3: Internal Links and Bibliography</a>
</li>
<li>
<a href="CHAP-04.xhtml">Chapter 4: Definitions</a>
</li>
<li>
<a href="CHAP-05.xhtml">Chapter 5: Putting It All Together</a>
</li>
<li>
<a href="REFS.xhtml">References</a>
</li>
<li>
<a href="AFTERWORD.xhtml">Afterword</a>
</li>
<li>
<a href="APPENDIX.xhtml">Appendix: Book Preparation Checklist</a>
</li>
<li>
<a href="ENDNOTES.xhtml">Endnotes</a>
</li>
<li>
<a href="FURTHER-READING.xhtml">Further Reading and Resources</a>
</li>
<li>
<a href="INDEX.xhtml">Linked Topic Index</a>
</li>
<li>
<a href="ABOUT-AUTHOR.xhtml">About the Author</a>
</li>
<li>
<a href="OTHER-WORKS.xhtml">Also by the Author</a>
</li>
<li>
<a href="CONTACT.xhtml">Stay in Touch</a>
</li>
<li>
<a href="CREDITS.xhtml">Credits and Permissions</a>
</li>
<li>
<a href="COLOPHON.xhtml">Colophon</a>
</li>
</ol>
</nav>
<nav epub:type="landmarks" hidden="hidden">
<h2>Book Landmarks</h2>
<ol>
<li>
<a epub:type="titlepage" href="TITLE.xhtml">Title Page</a>
</li>
<li>
<a epub:type="toc" href="NAV.xhtml">Contents</a>
</li>
<li>
<a epub:type="bodymatter" href="CHAP-01.xhtml">Start of Chapters</a>
</li>
<li>
<a epub:type="backmatter" href="REFS.xhtml">Back Matter</a>
</li>
<li>
<a epub:type="index" href="INDEX.xhtml">Linked Topic Index</a>
</li>
</ol>
</nav>
<nav class="chapter-nav" aria-label="Continue reading">
<p>
<a href="EPIGRAPH.xhtml">← Previous: Epigraph</a>
</p>
<p>
<a href="FOREWORD.xhtml">Next: Foreword →</a>
</p>
</nav>
</body>
</html>

The document wrapper and stylesheet link follow Chapter 1. epub:type="frontmatter" places this document in the opening matter. The first nav has epub:type="toc", id="toc", and role="doc-toc" to identify the Contents. Its ol and li elements link to the actual reading sections.

The landmarks nav identifies major book components. hidden="hidden" keeps that list out of the ordinary visual page while preserving the EPUB landmark markup for reading systems. The link-level epub:type values identify title page, Contents, main text, back matter, and index. The final nav supplies this Contents page’s previous/next links.

The package registers this file with properties="nav", as shown in Chapter 1. Keep its Contents entries aligned with the spine and actual filenames. The reading sequence is explained in Chapter 5.

7. Link a note and provide a return path

XHTML — note reference used in APPENDIX.xhtml

<a epub:type="noteref" role="doc-noteref" id="note-ref-1"
   href="ENDNOTES.xhtml#note-1">[1]</a>

XHTML — note target and return link in ENDNOTES.xhtml, excerpt

<li id="note-1" epub:type="endnote" role="doc-endnote">
  <p>Place the note explanation here.</p>
  <p><a href="APPENDIX.xhtml#note-ref-1">Return to note 1</a></p>
</li>

The id on the reference gives the return link a destination. The note’s id matches the fragment in the outgoing href. The epub:type and role attributes identify the reference and note. The li belongs inside the endnotes ol. Try the actual appendix note reference and its return link.

Source guide

These examples use this template’s files. Further technical detail: W3C EPUB, HTML document structure, HTML tables, and CSS text layout.