(By Anna )
ValoBox is an HTML5 app which displays ePubs. When we talk to people about it, they often have some preconceptions or misunderstandings about what the term HTML5 means, particularly in relation to ePubs.
It’s not that surprising – I’m not sure how many people have actually been told exactly what an ePub is, or what HTML5 means. You’re kind of expected just to know, because EVERYONE else is talking about it.
So, if you don’t know, or if you are one of those people acting like you know when secretly you’re not quite sure, here’s a simple explanation (with some slightly unusual analogies) that will hopefully make things clearer.
What is an ePub?
I think it’s worth starting with the basics. An ePub is a combination of different types of files: HTML, CSS and XML along with assets like images, wrapped up in a zip file and renamed as an ‘epub’.
HTML stands for Hypertext Markup Language. In the case of an ePub, very crudely speaking this part consists of the book’s content, and a bunch of tags (these are basically labels added to all the different elements to structure them in a logical way).
CSS stands for Cascading Style Sheets. This is a bit of code which adds styling to the content such as text size, font, borders etc.
XML is Extensible Markup Language. In an ePub, this is the part that contains the metadata for the book and communicates with eReaders to tell them where to find all the rest of the files (CSS, images, HTML) and the order to display it in.
Now, I’m a girl, and as a girl, obviously the things that I think about most are ponies and rainbows. So I thought I’d use an analogy based on those things to explain a little more…
Imagine, if you will, that the core content, the HTML part of the ePub, is actually a pony.
It’s got some clothes which make it look really pretty (the CSS) and the pony comes with a set of instructions telling you how to take care of it and what order to do things in, such as feeding, watering and taking it to the little pony’s room (the XML).
The pony, its clothes and its instructions get wrapped up very practically in a rainbow (the zip file) and delivered to you in one gorgeously enjoyable package.
What is HTML5?
Everyone is talking about it so what is it?
Well, firstly, this is what HTML5 isn’t:
- A format of eBook (like an ePub or PDF)
- Actually, anything to do with eBooks…but there are are parts of HTML5 which can be really handy to use in eBooks.
This is what HTML5 is:
HTML5 is the umbrella term for the most recent set of browser functionality* enabling modern web browsers to do extra things such as:
- Deliver better graphics (like rounded corners and gradients – this is particularly useful for developers)
- Offer real-time web (enable new information to pushed to your screen in real time…like the live updates you see in your Facebook newsfeed)
- Offer offline capability (so web pages can act like mobile apps)
- Carry out media queries (let the website find out the screen size of the device that you are using so it can adapt the content accordingly e.g. customise it for mobiles)
Some of this stuff you could do before but it was harder and messier for developers.
What does this mean for eBooks?
Getting a bit more specific, normal ePub files are made with an early version of HTML called XHTML 1.0 and a simplified subset of CSS. However, you may hear some people might say that they have made an HTML5 epub. This means that they have made an ePub where the HTML inside it has some HTML5 markup, and they use some newer CSS features (CSS3) in the styling of the ePub.
HTML5 isn’t designed for eReaders such as the Kindle, Kobo, Stanza etc. However, some eReaders will understand some parts of HTML5. iBooks is one of these – it recognizes some of the HTML5 tags. This incompatibility is one of the reasons why we are seeing the rise of browser-based, or cloud-based reading applications. The nice thing about displaying a book within an eReading application that is in a web browser is that you can take advantage of the cool stuff that HTML5 allows you to do.
All this technical talk is making me think about ponies again. So I’m going to suggest another pony-based analogy…
This is a pony made with HTML. As you can see it is a perfectly functional, standard pony.
It does all the stuff that you’ve come to expect from ponies – walking, having shiny hair, and being able to fly.
What would that pony look like if it was an HTML5 pony?
It would look like this…
This is one seriously pimped pony. It does lots of awesome extra stuff that makes it much more useful. It has rockets to go faster, looks WAY cooler and comes with a whole bunch of extra skills like being really quick at taking corners and having laser eyes.
And want to know another amazing thing about this pony? It can store stuff in its pockets for later.
I shit you not.
So there you have it – that is where HTML5 ponies fit into your eBook strategy. Now let’s all give each other makeovers.
*Well, kind of…I should mention that HTML5 is an umbrella term for lots of different standards. I haven’t got space to go into all of that here…but Brett McLaughlin’s book does it nicely.