Understanding HTML

 
 
Part 9: become familiar with basic ebook HTML such as tags, styles, attributes and sections.
 
HTML tells web browsers, and ebook readers, how to display content. The page you are reading this on is constructed via HTML elements which format and position the content. James Marshall has written a very gentle primer on HTML which goes into more detail than can be afforded in this article. In fact, if you open that page in Chrome or Firefox and right click on it → view page source, a window will open which will show the HTML used to display Marshall’s web page.
 
Don’t be afraid of HTML. Think of it like learning a very precise and simple language, the basics of which you already know (as it is written in mostly intuitive English shorthand). To code an ebook, you’ll only be using a few phrases anyway, the equivalent of the holidaymaker’s: “Where is the toilet?” “Excuse me, sir, you appear to have my baggage.” “There is a cobra in the shower.” That kind of thing.

Watersnake
Rethinking water conservation strategies     (source)

Like any new language, learning HTML involves moments of frustration (why won’t this work!?) and elation (it works!). When you’ve spent the best part of an hour trying to get something right, only to discover that a missing quotation mark is the cause of your problems, it seems like a perfect opportunity to throw in the towel. However, you need to understand only a score or so of elements to be able to code a Kindle ebook, and take a little care that your code is correct along the way.

Understanding <tags>

HTML elements are represented by <tags>, which surround content (such as sentences, paragraphs, headings and images) and tells it what to do </tags>. The < > is an opening tag and the forward slash </ > is a closing tag, ending the effect on the content.
 
Sometimes, tags will have a shortcut ending, especially if they don’t contain content. Then the complete <tag /> will look like that, which represents a combined opening and closing tag.
 
Some HTML tags also contain attributes, which issue multiple instructions to the enclosed content. This can include commands like justification (left, center, right, justified), links to other locations, and margins and padding (blank space). For example, the attributes contained within the head section braces
 
p {text-indent: 20px; margin-top: 1cm; text-align: justify;}
 
tell the browser that the paragraph ‘p’ has a first line indentation of 20 pixels, a 1 centimetre top margin and is justified. Any paragraphs that you then subsequently <p>wrap in paragraph tags</p> will assume those ‘style’ attributes. You can construct as many paragraph styles as you like – I have four in Saving Davey Gravy.

Understanding sections

Your ebook HTML will consist of two sections, bearing in mind that Kindle ebooks do not support a separate cascading style sheet. There will be the <head> section, which contains HTML instructions, and the <body> section, which contains things like your novel’s paragraphs, headings, index and images. The <head> tells the <body> what to do.
 
Why is HTML like this? Primarily, it is because this method allows you to make fast, sweeping changes to the layout of your ebook or website. You could issue the same instructions to each paragraph of your book in the <body> and achieve similar results. However, if you later changed your mind on how you wanted things to be displayed, you would have to work through the entire book, paragraph by paragraph, changing each set of instructions along the way!
 
With instructions located in the head and designated in the body, you only have to change the element in the head to effect the same changes. Instead of the changes potentially taking hours, they take seconds.

Keyboard shortcuts

Make life a lot easier by familiarising yourself with the shortcuts used to shift code around:

CTRL Z = undo action
CTRL Y = redo action
CTRL X = cut highlighted text
CTRL C = copy highlighted text
CTRL V = paste highlighted text
CTRL F = find
CTRL R = replace
CTRL A = select all
WIN (the Windows key between CTRL and ALT) D = minimise all open windows – invaluable when you have a dozen folders and program windows all open at once and need to find something on the desktop quickly.

Miscellaneous

Like everything, HTML evolves. Some elements are eventually discarded and/or replaced. If you are googling for answers to an HTML issue, it will benefit you to pay attention to the age of the advice. There may be updated information: use Google’s search tools → change ‘any time’ to ‘past year’.
 
HTML employs US English. Don’t be caught out trying to make <centre> tags work. And consider HTML obsolescence – <center> tags are now deprecated for paragraph formatting, anyway! They have been replaced by the text-align attribute used in the example previously shown in ‘Understanding tags’.
 
If your HTML isn’t working, go over your code. Advanced users can try an HTML validator to test various sections. Check that tags are closed. Check the ‘correct’ code that you have cut and pasted from another source. Sometimes, the code may contain simple errors like smart quote marks instead of plain quote marks, which can cause problems.

Further reference

George Benthien’s guide to ebook HTML is getting on, but is very well written and easy to read.
 
If you’re feeling adventurous, Amazon lists the complete set of HTML elements supported by the Kindle, all in teeny-tiny font (use CTRL + on the web page for a better look).

Proceed to Part 10: ‘Structuring ebooks’, or return to the article index.
Return to Re: writing
While I’ve endeavoured to provide you with accurate information, what is considered ‘accurate’ will change over time. If I’m wrong, or you’d like to ask a question or share your thoughts, I’d love to hear your take on things.

Rhys About Rhys

Teacher, writer, editor, cook: a bit like that nursery rhyme, really.
Facebook / Google+ / Twitter

Speak Your Mind

*