If, as I keep saying, an ebook is just a website in a box, then in order to know how to get in and edit your ebook, you’re going to want to know some HTML. However you choose to work on the file, knowing the basic building blocks is essential in creating a finished product that presents your book to its best advantage.
When we talk about HTML, we’re actually talking about two separate things:
- HyperText Markup Language (HTML): The code that makes up every web page you’ve ever seen. This is how we’ll add content to the ebook. That’s what the rest of this post is going to be about.
- Cascading Style Sheets (CSS): This is a set of rules for defining how everything looks. It’s how we’ll format the ebook — and that’s what I’m going to be covering in the next post.
Calling HTML the basic building blocks of an ebook is apt in more ways than one. Not only is the markup language the fundamental tool for writing and displaying web and ebook content, but it’s also set up as a series of containers — not unlike the nested building blocks that we used to build with as children. Sometimes they’re piled one on top of the other; sometimes one (or a group) is inside another.
Every one of those “blocks” is set off before and after by tags, each of which is marked by angle brackets (< and >). The beginning of a block is marked by an open tag that looks like this: <tag>. That tag ends with a close tag that looks like this: </tag>. All of the content between those tags is said to be part of that container.
So you’d start a paragraph with the <p> tag and end it with the </p> tag:
The tags will set that chunk of text off as a paragraph. Here’s how that would look:
Now, to make things just a bit more complicated, tags can also take what are called attributes, which tell the ereader how to treat certain tags.
An attribute is always added by including the attribute name, an equal sign, straight quotes, and a value. Here’s the same paragraph tag with an attribute added:
I wonder what that align attribute would do?
What a surprise! I could also have had the attribute read left, justify, or center.
One warning: make sure that the quote marks around the attribute value are straight (i.e., "right") and not “smart” or “curly” quotes (i.e., “right”). Otherwise the ereader won’t know what it’s looking at and your ebook will break. 
Now there are (very basically) two kinds of tags: block tags and inline tags.  Containers set off by block tags need not be placed inside other containers.  Containers set off by inline tags are always placed inside other containers.
I told you “block” was an appropriate metaphor in more ways than one!
Block tags create self-contained blocks of text — like paragraphs (<p></p>) or articles (<article></article>). Many of them can used at the “root level” of the page — as I said, they need not be inside any other tag (other than the <html> and <body> tags that I’ll talk about later). Many of them can be nested — that is, placed inside another block tag.
Note that when you nest tags, you must always close the most recently opened tag first. Here’s an example:
Notice that I couldn’t put the end-of-article tag (</article>) until I’d put the end-of-paragraph tag (</p>).
(The <article> tag is part of HTML5, the newest version of HTML in use in web and ebook design.)
Now, in HTML, hitting the RETURN key doesn’t create a new paragraph as you might expect. Some HTML and ePub editing software will take care of that for you by automatically adding paragraph tags (<p></p>) around your text. If you are used to using a blogging system like WordPress, you probably weren’t even aware that those tags were getting added.
When you’re working on the raw HTML in an ebook, however, you don’t get those training wheels.
And unless there’s a tag, the text will simply continue to flow. For example:
would display as:
In other words, it would look exactly the same as if the line breaks hadn’t been there.
The advantage to this is that you can place the tags on separate lines of code from the text, which makes it easier to see what tags are still open. Web programming conventions encourage us to indent each nested tag, to make it even easier to see what’s going on:
Here’s how that would look:
CLICK TO KEEP READING