The EPUB3 standard has added a lot to EPUB2 standard. One of the main differences between EPUB2 and EPUB3 is the use of HTML5 instead of XHTML 1.1 or more specifically XHTML serialization of HTML5.
The use of HTML5 allows creation of rich layout publications in EPUB3.
Many people think this is the greatest contribution of EPUB3 to electronic publications, and it is no more required to create an app. for every rich layout book.
However HTML5 and EPUB3 have added more than just new visualization, HTML5 has added many semantic tags. In this article I'll discuss the use of some of these semantic tags in EPUB3 publications.
With EPUB3, the IDPF is focusing more and more on textbooks and not only on fiction books.
The addition of these tags is a giant step forward, although many of them have no specific visual appearance. The most notable visible addition is of course the <video> tag. The other notable visible additions although not exactly HTML5 are the MathML tags, The visible additions are what most people consider the best part of HTML5 and EPUB3
However HTML5 added many tags that generally does not have visible meaning. Although they can be styled using CSS, they are aimed to aid semantic web. I am not going to explore semantic web in this document. I'll just mention that semantic web aims at letting machines parse the content of a document.
The tags I want to talk about in this article are the <nav>, <section>, <article>, <aside> and <figure>
These elements may have styling just like <div>, however their main role is to be used by reading systems to parse the document for better understanding and providing navigation and search aids to the user.
These tags may also help readers for disabled people parse the text and adapt it to the user's need.
EPUB3 standard added the "epub:type" attribute to give more information about each tag's role in the document.
The best example of such use is the EPUB3 navigation document (which deserves an article on its own).
The navigation document is both a visible document as well as a table of contents used by the reading system.
The navigation document is a required document in an EPUB3 publication and supersedes the old NCX file. Its purpose is to provide navigation options in an EPUB3 publication.
The navigation file must contain one element with epub:type of "toc". Inside this element we should have an <ol> (ordered list) with elements for each chapter in the table of contents.
The reading system looks for the list (<ol>) inside the nav element with epub:type of toc.The <nav> element itself does not have any visual meaning. The list (<ol>) can be styled using CSS.
The navigation file must have a <nav> element with type of 'toc' but it can have more <nav> elements with other types such as: lot (list of tables).
The new tags are used not only inside navigation files but also inside content documents.
For example, the <section> tag appears frequently in documents to mark specific type of information such as: bibliography, foreword, conclusion etc.
Most reading systems today will ignore these tags so why should we use them?
I think that using these tags is essentially preparing for the future. I am sure that future EPUB3 reading systems will have advanced features such as searching bibliography etc.
The IDPF is also working now on specifications for digital book dictionaries and EPUB indexes, these will make heavy use of the <section> and <article> tags.
Using these tags will not only make the document future compatible, it makes the document more accessible. Accessibility means that special reading systems will be able to parse the document.
For example a reading system for blind users may distinguish sections of the document and allow the user to navigate between sections.
It is good practice to group sections such as: forward, prologue, epilog, preface, part etc.
This may not have any meaning for sighted readers and may need special headings in the text.
Sighted readers are used to the visual conventions that distinguish dedications, epigraphs, and other front matter that may be only of slight interest, for example, and can skip past them. Someone who can’t see your content has to listen to it, so this additional information makes the task of navigating this publications much easier.
For example:
<section epub:type="part">
<h1>Part I</h1>
<section epub:type="chapter">
<h2>Chapter 1</h2>
...
</section>
<section epub:type="chapter">
<h2>Chapter 2</h2>
...
</section>
</section>
The above example contains a parent section with two chapters. A sighted user will read the titles (Part I, Chapter 1, Chapter 2)
A reading system can not decipher that <h1> is a part header and <h2> is a chapter header.
headings such as <h1>, <h2> etc. does not have predefined meanings in a book and can mean different things in different books.
As opposed to the epub:type which is defined in the standard. See: http://idpf.org/epub/vocab/structure/
Another new tag is the <aside> tag, the aside tag is a section of a page that consists of content that is tangentially related to the content around the aside element. This can be a footnote, note etc. There is no default visual meaning to this tag. A reading system decides how to show this tag according to the specified epub:type.
For example:
<aside epub:type="footnote">This is a foot note</aside>
If seen in a browser this will be shown as part of the text. A reading system that supports this tag may render this text at the bottom of the page.
I say "may" since there is no specific behaviour specified for this in the current version of the standard.
The last tags I want to discuss here is <figure> and <figcaption>
The <figure> tag has no visual meaning, it is used to enclose an image.
The <figcaption> is an optional tag that can be used only inside a <figure> element to show a caption for the image.
For example:
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>
This will show an image and a small cpation below it. We can add an image and caption without the <figure> tag, but then the reading system will not be able to recognize what text is the caption. This is mainly used for accessibility purposes.
Summary
HTML5 has added many tags, some of them are visible or audioable like the <video> and <audio> tags but most of them have no visual meaning and although can be styled by CSS to give specific visual effect, it's main role is to provide semantic information.
Semantic information is used the the reading systems for better navigation, better search capabilities or accessibility.