HTML Element Syntax
HTML elements determine how your ebook will display on digital devices and apps. In other words, it is what makes it look “pretty” and well-formatted. An HTML element starts with a start tag or opening tag and ends with an end tag or closing tag. Closing tags are preceded by a forward slash to indicate the ending of an element.
Look at the following example (Gutenberg.org) The Adventures of Huckleberry Finn by Mark Twain (Samuel Clemens):
<h1> Chapter 1 </h1>
<p> YOU don't know about me, without you have read a book by the name
of The Adventures of Tom Sawyer; but that ain't no matter. That book
was made by Mr. Mark Twain, and he told the truth, mainly.</p>
The above shows two elements commonly used in fiction formatting: heading 1 <h1> and paragraph <p>. Your novel, of course, would contain multiple heading and paragraph elements that may also include styling classes defined in your CSS or content style sheet. Classes define how the element is displayed on the page or screen, such as centered or bold. I will discuss CSS in more detail later.
Heading 1 <h1>
From the text example, the first element on the page is the heading 1 element <h1>. The start or opening tag is <h1>, the end or closing tag is </h1> and the entire HTML element is:
<h1> Chapter 1 </h1>
There are varying sizes of heading tags: h1, h2, h3, h4, h5 and so on. H1 is commonly used for the top (parent) section, with subsequent sub (child) sections using the h2, h3, etc heading tags.
It is important to use the heading elements properly, so when creating your table of contents, the hierarchy is properly preserved.
Paragraph <p>
The bulk of content in your book resides in the <p> or paragraph element, which defines the paragraphs in the HTML document. In Microsoft Word, this is the “Normal” style in the styles dropdown list.
Every paragraph element has a start tag <p> and an end tag </p>. From the text example the element content is:
YOU don’t know about me, without you have read a book by the name of The Adventures of Tom Sawyer; but that ain’t no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly.
And the HTML paragraph element looks like this:
<p> YOU don't know about me, without you have read a book by
the name of The Adventures of Tom Sawyer; but that ain't no matter.
That book was made by Mr. Mark Twain, and he told the truth, mainly.</p>
Empty HTML Elements
Not all elements require a closing tag. In fact, some HTML elements have empty content. HTML elements with no content are called empty elements. The line break tag <br> is an empty element without a closing tag.
TIP
In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags. However, you should get used to using lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
Recap
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are self-closing <br />
Feel free to comment / ask questions…I am here to help.
NEXT: HTML Text Formatting: tags/elements that make up the design of your book / novel.
Excerpt from Kindle Formatting Solutions: Basic HTML & CSS for ePublishing Authors Coming October 2013
Additional Resources
List of HTML5 tags compatible with Amazon Kindle
