How to Create an EPUB File From HTML and XML

Woman Reading Tablet

Letizia Le Fur/Getty Images

An EPUB file is the other type of ebook file that is popular. If you are planning on writing or publishing an ebook, you should save your HTML as a Mobipocket file, and also as an EPUB. In some ways, an epub file is a lot easier to build than a Mobi file. Since EPUB is based on XML, you simply need to create your XML files, collect them together, and call it an epub.

How to Create an EPUB File From HTML and XML

These are the steps you should take to create an epub file:

  1. Build your HTML. Your book is written in HTML, with CSS for styling. But, it's not just HTML, it's XHTML. So, if you don't normally write in XHTML (closing your elements, using quotes around all attributes, and so on) you will need to convert your HTML to XHTML. You can use one or more XHTML files for your books. Most people separate the chapters into separate XHTML files. Once you have all the XHTML files, put them in a folder all together.
  2. Create a MIME Type FileIn your text editor, open a new document and type:
    Save the file as “mimetype” without any extension. Place that file in the folder with your XHTML files.
  3. Add your style sheets. You should create two style sheets for your book one for the pages called
    1. page_styles.css
      @page {
  4. margin-bottom: 5pt;
  5. margin-top: 5pt
  6. }
    1. Create one for the book styles called
      . You can give them other names, you'll just need to remember what they are. Save these files in the same directory with your XHTML and mimetype files.
  7. Add your cover image. Your cover image should be a JPG file no more than 64KB. The smaller you can make it the better, but keep it good looking. Small images can be very hard to read, and the cover is where you do your marketing of your book.
  8. Build your title page. You don't have to use the cover image as your title page, but most people do. To add your title page, create an XHTML file called
    Here is an example of a title page using SVG for the image. Change the highlighted part to point to your cover image:
    1. <?xml version='1.0' encoding='utf-8'?>
  9. <html xmlns="" xml:lang="en">
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  12. <title>Cover</title>
  13. <style type="text/css" title="override_css">
  14. @page {padding: 0pt; margin:0pt}
  15. body { text-align: center; padding:0pt; margin: 0pt; }
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. <svg xmlns="" xmlns:xlink="" version="1.1" width="100%" height="100%" viewBox="0 0 425 616" preserveAspectRatio="none">
  21. <image width="425" height="616" xlink:href="cover.jpeg"/>
  22. </svg>
  23. </div>
  24. </body>
  25. </html>
  26. Build your "Table of Contents." Create a file called
    in your text editor. This is an XML file, and it should point to all your HTML files in your book. Here is a sample with two elements in the table of contents. Change the highlighted parts to your book, and add additional
    elements for additional sections:
    1. <?xml version='1.0' encoding='utf-8'?>
  27. <ncx xmlns="" version="2005-1" xml:lang="eng">
  28. <head>
  29. <meta content="0c159d12-f5fe-4323-8194-f5c652b89f5c" name="dtb:uid"/>
  30. <meta content="2" name="dtb:depth"/>
  31. <meta content="calibre (0.8.68)" name="dtb:generator"/>
  32. <meta content="0" name="dtb:totalPageCount"/>
  33. <meta content="0" name="dtb:maxPageNumber"/>
  34. </head>
  35. <docTitle>
  36. <text>How to Build a Website</text>
  37. </docTitle>
  38. <navMap>
  39. <navPoint id="
    a1" playOrder="0">
  40. <navLabel>
  41. <text>
  42. </navLabel>
  43. <content src="
  44. </navPoint>
  45. <navPoint id="
    a2" playOrder="1">
  46. <navLabel>
  47. <text>
    Do You Need a Domain Name?</text>
  48. </navLabel>
  49. <content src="
  50. </navPoint>
  51. </navMap>
  52. </ncx>
  53. Add a container XML file. In your text editor, create a file called
    and save it in a sub-directory below your HTML files. The file should read:
    1. <?xml version="1.0"?>
  54. <container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  55. <rootfiles>
  56. <rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
  57. </rootfiles>
  58. </container>
  59. Create the contents list (
    This is the file that explains what your epub book is. It includes metadata about the book (like the author, publish date, and genre). Here is a sample, you should change the parts in yellow to reflect your book:
    1. <?xml version='1.0' encoding='utf-8'?>
  60. <package xmlns="" version="2.0" unique-identifier="uuid_id">
  61. <metadata xmlns:xsi="" xmlns:opf="" xmlns:dcterms="" xmlns:calibre="" xmlns:dc="">
  62. <dc:language>en</dc:language>
  63. <dc:title>How to Build a Website</dc:title>
  64. <dc:creator opf:file-as="
    Kyrnin, Jennifer" opf:role="aut">Jennifer Kyrnin</dc:creator>
  65. <meta name="cover" content="cover"/>
  66. <dc:date>0101-01-01T00:00:00+00:00</dc:date>
  67. <dc:contributor opf:role="bkp"></dc:contributor>
  68. <dc:identifier id="uuid_id" opf:scheme="uuid">0c159d12-f5fe-4323-8194-f5c652b89f5c</dc:identifier>
  69. </metadata>
  70. <manifest>
  71. <item href="
    cover.jpeg" id="cover" media-type="image/jpeg"/>
  72. <item href="
    build_website.html" id="id1" media-type="application/xhtml+xml"/>
  73. <item href="
    page_styles.css" id="page_css" media-type="text/css"/>
  74. <item href="
    stylesheet.css" id="css" media-type="text/css"/>
  75. <item href="
    titlepage.xhtml" id="titlepage" media-type="application/xhtml+xml"/>
  76. <item href="toc.ncx" media-type="application/x-dtbncx+xml" id="ncx"/>
  77. </manifest>
  78. <spine toc="ncx">
  79. <itemref idref="titlepage"/>
  80. <itemref idref="id1"/>
  81. </spine>
  82. <guide>
  83. <reference href="titlepage.xhtml" type="cover" title="Cover"/>
  84. </guide>
  85. </package>
  86. That's all the files you need, they should all be in a directory together (except for
    , which goes in a sub-directory
    ). We like to then go to the container directory and make sure it has a name that reflects the title and author names.
  87. Once you have the directory of files named how you want it you should use a zip file archive program to zip the directory. My sample directory ends up as a zip file named “How to Build a Website — Jennifer”
  88. Finally, change the file name extension from
    . Your operating system may protest, but go ahead with it. You want this to have an epub extension.
  89. Lastly, test your book. It's hard to get the epub format correct on the first try, so you should always test your file. Open it in an epub reader like Calibre. And if it doesn't display correctly, you can use Calibre to correct problems.