HTML for the Kindle
HTML stands for Hypertext Markup Language. It consists of tags that are placed within a document to indicate how the document content should be organized and displayed. HTML tags are analogous to marks editors used to place in documents as instructions for the printer. The Kindle only supports a limited portion of HTML. For example, you can't prescribe the font family or the font color or the background. However, this means that there is less to learn. In fact you can write a nicely formatted Kindle document using only a few HTML tags. HTML tags usually occur in pairs. There is an opening tag having the form <tag-name> and a closing tag having the form </tag-name>. For example, <p> denotes the beginning of a paragraph and </p> denotes the end of the paragraph. There are a few tags that are self closing. They have the form <tag-name />. We will see some examples of these later on. The general structure of a document is shown below.
<html>
<head>
<!-- The head section contains information about the document that is not displayed. -->
</head>
<body>
<!-- The body section contains the document content. -->
</body>
</html>
Every document starts with the tag <html> and ends with the tag </html>. The content of the document is placed between the tags <body> and </body>. The head section begins with <head> and ends with </head>. It contains information about the document that is not displayed. We will see some items that can be placed there later on. We will now list some common HTML tags that can be used to format a Kindle document. For a complete list refer to the document Kindle Publishing Guidelines.
| <p> … </p> | The included text forms a paragraph. For the Kindle the default properties of a paragraph are full justification (right and left) and first-line indent. Some versions of the Kindle, including the most recent version, do not quite do full justification. There seems to be a limit on how much the interword spacing will be stretched. We will show later how to modify the default settings. |
| <div> … </div> | The div tag is sort of a blank container that we can add properties to. For our purposes it behaves like the paragraph tag with the exception that there is no first-line indent. |
| <blockquote> … </blockquote> | Indents each line of the text within by providing a larger left margin. |
| <h1> … </h1> | Included text forms a top level heading. Lower order headings are denoted by h2, h3, h4, h5, and h6. The heading text is bold and heading sizes become smaller as the heading number increases. |
| <span> … </span> | Span is like a blank element that surrounds content within a line. By itself it doesn't do anything, but properties can be added to it. |
| <b> … </b> | The text within is made bold. You can also use <strong>. |
| <i> … </i> | The text within is made italic. You can also use <em>. |
| <u> … </u> | The text within is made underlined. | <img src="image.jpg" alt="text" /> | Displays the image contained in the src file name. The text corresponding to alt should describe what the image is. This is not critical for a Kindle, but is used in situations where the image can not be displayed. |
| <center> … </center> | Centers the contents horizontally. |
| <a name="mark" /> | Establishes an internal bookmark to which you can link. In this case the bookmark has the name "mark". |
| <a href="#mark">Link Text</a> | Link to a bookmark in the same file whose name follows #. Clicking on the link text takes you to the bookmark location. |
| <a href="file.html#mark">Link Text</a> | Link to a bookmark in an external file whose name follows #. |
| <a href="file.html">Link Text</a> | Link to another HTML file. |
| <br /> | Inserts a line break. |
| <ul> … </ul> | Contains an unordered (bulleted) list. The individual list items are contained within <li> tags. To obtain an ordered (numbered) list replace ul by ol. |
| <sub> … </sub> | The text within is made smaller and lowered to form a subscript. |
| <sup> … </sup> | The text within is made smaller and raised to form a superscript. |
You can place comments in the HTML file that are not displayed as part of the document. The format is shown below
<!-- you can place a comment here -->
The Kindle has a special tag to produce a page break, namely <mbp: pagebreak />. It is often useful to have page breaks before the start of major sections.
The default behavior of HTML tags can be modified by placing additional statements within the opening tag. For example, The default first-line indent of a paragraph can be modified by placing a width specification within the opening tag. The tag <p width="20"> would set the first-line indent to 20 pixels. A hanging indent (everything after the first line is indented) is specified by giving the width a negative value, e.g., <p width="-30">. For web pages there are a number of ways to produce a hanging indent, but on a Kindle you should use the width property. In the next section we will see a different way to modify HTML tags by using CSS (Cascading Style Sheets). I should make a remark about numbers used as values. If no units are specified the values refer to pixels. In HTML other units such as em and % can be used. However, various models of the Kindle interpret these differently. Pixels seem to be the best units to use for consistency.
In HTML all the formatting is determined by the HTML tags. Extra spaces or blank lines added by the document's creator are ignored.