General XHTML and CSS Patterns
This section covers general patterns used when producing XHTML and CSS that are not specific to ebooks.
id
attributes
id
attributes of <section>
and <article>
elements
Each
<section>
and<article>
element has anid
attribute.<section>
or<article>
elements that are direct children of the<body>
element have anid
attribute identical to the filename containing that<section>
or<article>
, without the trailing extension.In files containing multiple
<section>
or<article>
elements, each of those elements has anid
attribute identical to what the filename would be if the section was in an individual file, without the trailing extension.
id
attributes of other elements
id
attributes are generally used to identify parts of the document that a reader may wish to navigate to using a hash in the URL. That generally means major structural divisions. Therefore, elements that are not<section>
or<article>
elements do not have anid
attribute, unless a part of the ebook, like an endnote, refers to a specific point in the book, and a direct link is desirable.id
attributes are not used as hooks for CSS styling.If an element that is not a
<section>
or<article>
requires anid
attribute, the attribute’s value is the name of the element followed by-N
, whereN
is the sequence number of the element starting at1
.Individual
id
attributes are unique across the entire ebook.If an element requires an
id
attribute that would conflict with one in a different file, theid
attribute of the closest parent sectioning element, followed by-
, is prepended to eachid
attribute to differentiate them.
class
attributes
Classes denote a group of elements sharing a similar style.
Classes are not used as single-use style hooks. There is almost always a way to compose a CSS selector to select a single element without the use of a one-off class.
Classes are used to style a recurring class of elements, i.e. a class of element that appears more than once in an ebook.
Class names describe what they are styling semantically, not the actual style the class is applying.
xml:lang
attributes
When words are required to be pronounced in a language other than English, the
xml:lang
attribute is used to indicate the IETF language tag in use.The
xml:lang
attribute is used even if a word is not required to be italicized. This allows screen readers to understand that a particular word or phrase should be pronounced in a certain way. A<span xml:lang="TAG">
element is used to wrap text that has non-English pronunciation but that does not need further visual styling.The
xml:lang
attribute is included in any word that requires special pronunciation, including names of places and titles of books.
The
xml:lang
attribute is applied to the highest-level element possible. If italics are required and moving thexml:lang
attribute would also remove an<i>
element, the parent element can be styled withbody [xml|lang]{ font-style: italic; }
. This style also requires a namespace declaration at the top of the file:@namespace xml "http://www.w3.org/XML/1998/namespace";
.
The <title>
element
The
<title>
element contains an appropriate description of the local file only. It does not contain the book title.The value of the title element is determined by the algorithm used to determine the file's ToC entry, except that no XHTML tags are allowed in the
<title>
element.The
<title>
element has itsepub:type
attribute set toz3998:roman
if the contents of the<title>
element is entirely a Roman numeral.
Headers
<header>
elements have at least one direct child block-level element. This is usually a<p>
element, but not necessarily.
Ordered/numbered and unordered lists
All
<li>
children of<ol>
and<ul>
elements have at least one direct child block-level element. This is usually a<p>
element, but not necessarily; for example, a<blockquote>
element might also be appropriate.
Tables
Tables can often be difficult to represent semantically. For understanding the high-level concepts of tables and the semantic meaning of the various table-related elements, refer to the HTML Living Standard secton on tables. For detailed examples on how to represent complex tables in a semantic and accessible way, refer to the Web Accessibility Initiative guide on creating accessible tables.
<table>
elements have a direct child<tbody>
element.More than one
<tbody>
element may be included if a table has additional headers in the middle of the table body.
<table>
elements may have an optional direct child<thead>
element, if a table heading is desired.<th>
elements are used in<thead>
elements, instead of<td>
.<th>
elements only appear in<thead>
elements, unless they contain thescope
attribute. Thescope
attribute may be used to semantically identify a table header which applies to a horizontal row instead of a vertical column, or to a row group in a table with multiple<tbody>
elements.
<table>
elements that display a total or summary row at the bottom have that row contained in a<tfoot>
element.<table>
elements that are not used to format plays/dramas, and that do not otherwise inherit a visible margin (for example, they are not children of<blockquote>
), havemargin: 1em;
ormargin: 1em auto 1em auto;
.
Blockquotes
<blockquote>
elements must contain at least one block-level child, like<p>
.Blockquotes that have a citation include the citation as a direct child
<cite>
element.
Definition lists
Definition lists, i.e. combinations of the <dl>
, <dt>
, and <dd>
elements, are often found in glossaries.
<dd>
elements have at least one direct child block-level element. This is usually a<p>
element, but not necessarily.
CSS rules
text-align: initial;
is used instead oftext-align: left;
whenever it's necessary to explicitly set left-aligned text. This allows the reading system to opt to usetext-align: justify;
if the user prefers.The
vh
unit is used instead of percent units when specifyingheight
,max-height
,top
, orbottom
.