多媒體元素包括圖片 <img> 、聲音 <audio> 及影片 <video>

<img>
<audio>
<video>

以下為 <img> 的範例

標記碼如下

<div class="img">
    <img class="pic" src="ch0604.png" />
</div>

樣式碼如下

div.img {
  text-align: center;
  margin: 2em;
  margin-left: 3em;
  margin-right: 3em;
}

img.pic {
  max-width: 100%;
}

因為 <img> 是行內元素，因為外圍用 <div> ，其中樣式碼只有設定 text-align 及 margin

div.img {
  text-align: center;
  margin: 2em;
  margin-left: 3em;
  margin-right: 3em;
}

text-align 設定為 center ，所以圖片會置中對齊， margin 則是讓上下左右都有一定的空間。

以下為 <audio> 的範例

本書介紹的語法是可以在 Google Play 圖書 App 顯示的語法，同時也能兼用在網頁上， Google Play 圖書的支援方式詳細請參考 Google Play 的說明網頁 EPUB 檔案 - Books說明。

標記碼如下

<div class="img">
    <audio src="demo.mp3" controls="controls">
        Your reader does not support the audio tag.
    </audio>
</div>

<audio> 與底下介紹的 <video> 套用同樣外層 <div> ，因此撥放控制項都是置中對齊。

src 屬性設定資源檔案的路徑，如果 EPUB 閱讀器或瀏覽器不支援 <audio> ，就會顯示 <audio> 到 </audio> 之間的提示訊息。

以下為 <video> 的範例

標記碼如下

<div class="img">
    <video src="demo.mp4" width="320" height="240" controls="controls">
        Your reader does not support the video tag.
    </video>
</div>

<video> 需要額外設定 width 及 height 屬性，來控式播放元件的尺寸，如果沒有設定 width 及 height ，在 EPUB 閱讀器或瀏覽器中可能無法正常顯示影片的控制元件。

以上花了數個單元的篇幅對 HTML 元素及相關 CSS 設定做了個導覽，底下開始進入介紹完整的 EPUB 範例，先來看到精簡範例篇。