HTMLBook仕様: ワーキングドラフト (最終更新日 2013年12月29日)

HTMLBook仕様でのHTML5要素の要件は以下の通り。data-type 属性の特有の意味的活用については、別途注記がない限り EPUB 3 Structural Semantics Vocabulary による。

コンテンツモデルの多くについては「ブロック要素」または「インライン要素」を参照のこと；これらの各カテゴリに属するHTML5の要素の対応するリストについては、Block Elements および Inline Elementsを参照のこと。

明記されていないコンテンツモデルまたは属性要件については、HTMLBookは HTML5 Specificationに対応する要件を採用している。

改訂履歴と注記

2013年12月29日：

明確さのための小改訂

2013年8月13日：

脚注のマークアップの仕様を改訂

2013年7月3日：

本を特定するセマンティクスとして、"class"の代わりに"data-type"属性を使用するよう仕様を改訂。現時点では"class"属性はユーザが望んで定義したセマンティクスとして自由に使用でき、かつ"class"の値に制約はない。仕様のユーザは"data-type"の値を"class"属性の値に複製することにより容易にCSSでの体裁付与したいだろうが、これは完全に任意である。

2013年4月19日：ワーキングドラフト第1版リリース

本の構成要素

本

HTML要素: <body>

属性要件: data-type="book" ^[1]

コンテンツモデル: 最初の子は本の題名を含む <h1> であるべきである; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、子として1個またはそれ以上の本の構成要素 (編／部要素を表す <div> 、テーブルコンテンツを表す <nav> 、そしてそのほかすべての本の区分を表す <section> )。

例

<body data-type="book">
  <h1>jQuery Cookbook</h1>
  <section data-type="chapter">
    <!-- Chapter content here -->
  </section>
</body>

原注: HTML5標準同様、<body> はルート <html> 要素の子である。

章

HTML要素: <section>

属性要件: data-type="chapter"

コンテンツモデル: 最初の子は章の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子 (<section data-type="sect1">)

例

<section data-type="chapter">
  <!-- h1 used for all chapter titles -->
  <h1>Chapter Title</h1>
  <p>Chapter content</p>
  <section data-type="sect1">
    <!-- Section content here... -->
  </section>
</section>

付録

HTML要素: <section>

属性要件: 内容によって+data-type="appendix"または+data-type="afterword"

コンテンツモデル: 最初の子は付録の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子 (<section data-type="sect1">)

例

<section data-type="appendix">
  <h1>Appendix Title</h1>
  <p>Appendix content</p>
  <section data-type="sect1">
    <!-- Section content here... -->
  </section>
</section>

書誌

HTML要素: <section>

属性要件: data-type="bibliography"

コンテンツモデル: 最初の子は書誌の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子 (<section data-type="sect1">)

例

<section data-type="bibliography">
  <h1>Bibliography Title</h1>
  <p>Bibliography content</p>
  <section data-type="sect1">
    <!-- Section content here... -->
  </section>
</section>

用語集

HTML要素: <section>

属性要件: data-type="glossary"

コンテンツモデル: 最初の子は用語集の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子 (<section data-type="sect1">)

効率的な手法:用語集の用語の一覧は data-type ="glossary"の <dl> 要素、data-type="glossterm"の <dt> の子、data-type="glossdef"の <dd> の子を使用してマークアップするべきである。用語の文字列は <dfn> でラップするべきである。ただしこれは正式な仕様要件ではない。

例

<section data-type="glossary">
  <h1>Glossary Title</h1>
  <dl data-type="glossary">
    <dt data-type="glossterm">
      <dfn>jQuery</dfn>
    </dt>
    <dd data-type="glossdef">
      Widely used JavaScript library
    </dd>
   </dl>
</section>

序文

HTML要素: <section>

属性要件: 内容によって+data-type="preface"、+data-type="foreword"、または data-type="introduction"

コンテンツモデル: 最初の子は序文の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子 (<section data-type="sect1">)

例

<section data-type="preface">
  <h1>Preface Title</h1>
  <p>Preface content</p>
  <section data-type="sect1">
    <!-- Section content here... -->
  </section>
</section>

前付け

HTML要素: <section>

属性要件: data-type="halftitlepage", data-type="titlepage", data-type="copyright-page", or data-type="dedication", 配下のコンテンツに応じて

コンテンツモデル: 最初の子は前付けの題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子

例

<section data-type="titlepage">
  <h1>Python in a Nutshell</h1>
  <p>By Alex Martelli</p>
</section>

後付け

HTML要素: <section>

属性要件: data-type="colophon", data-type="acknowledgments", data-type="afterword", or data-type="conclusion", 配下のコンテンツに応じて

コンテンツモデル: 最初の子は後付けの題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子

例

<section data-type="colophon">
  <h1>Colophon Title</h1>
  <p>Colophon content</p>
  <section data-type="sect1">
    <!-- Section content here... -->
  </section>
</section>

部／編

HTML要素: <div>

属性要件: data-type="part"

コンテンツモデル: 最初の子は部／編の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上の任意の部／編の前置きを構成するブロック要素; 次に、部／編以外の子として本の構成を表す0個またはそれ以上の <section> 要素

例

<div data-type="part">
  <h1>Part One: Introduction to Backbone.js</h1>
  <p>Part Introduction...</p>
  <section data-type="chapter">
    <!-- Chapter content here -->
  </section>
</div>

コンテンツモデル: 目次は EPUB 3 Navigation documentの仕様に準拠すべきである. 最初の子は0個またはそれ以上の見出し要素(<h1>-<h6>), 続いて <ol> (<li> の子ともに <span> 要素や任意の <ol> の子をあわせて<a>要素を含めることができる)

例

<nav data-type="toc">
  <h1>Table of Contents</h1>
   <ol>
     <li><a href="examples_page.html">A Note Regarding Supplemental Files</a></li>
     <li><a href="pr02.html">Foreword</a></li>
     <li><a href="pr03.html">Contributors</a>
       <ol>
         <li><a href="pr03.html#I_sect1_d1e154">Chapter Authors</a></li>
         <li><a href="pr03.html#I_sect1_d1e260">Tech Editors</a></li>
       </ol>
     </li>
  </ol>
</nav>

索引

HTML要素: <section>

属性要件: data-type="index"

コンテンツモデル: 最初の子は索引の題名を含む <h1> であるべきである。; 次に、副題名のコンテンツとして、0個またはそれ以上の <h2> 要素; 次に、0個またはそれ以上のブロック要素; 次に、0個またはそれ以上のSect1の子

効率的な手法: HTMLBookは次の EPUB Indexes specification や、必要に応じて意味の変化を使用できる data-type 属性をもつ索引の見出し語をマークアップするために <ol>/<li> 要素の使用を推奨する。ただしこれは正式な仕様要件ではない。

例

<section data-type="index">
  <h1>Index Title</h1>
  <div data-type="index:group">
    <h2>A</h2>
    <ol>
      <li data-type="index:term">AsciiDoc, <a href="ch01#asciidoc" data-type="index:locator">All about AsciiDoc</a>
	<ol>
           <li data-type="index:term">conversion to HTML, <a href="ch01#asctohtml" data-type="index:locator">AsciiDoc Output Formats</a></li>
         </ol>
      </li>
      <li data-type="index:term">azalea, <a href="ch01#azalea" data-type="index:locator">Shrubbery</a></li>
    </ol>
  </div>
</section>

節

HTML要素: <section>

属性要件: data-type="sect1", data-type="sect2", data-type="sect3", data-type="sect4", data-type="sect5" ^[2], 階層レベルに応じて。 sect1 は主な本の構成（章、付録　など）に直接ネストされた <section> 要素に使われる。sect2 は sect1 <section> にネストされた <section> 要素に使われる。sect3 は sect2 <section> にネストされた <section> 要素に使われる。など

コンテンツモデル: 最初の子は以下の data-type の値によって示される階層レベルに対応した主な見出し要素であるべきである。 :

"sect1" -> h1
"sect2" -> h2
"sect3" -> h3
"sect4" -> h4
"sect5" -> h5

見出しは0個以上の小見出し要素は主な見出しの一つ下の階層レベルに続く（例：<h2> は sect1 の下）、続いて0個以上のブロック要素、続いて0個以上の一つ下の階層の data-type の値を持つ <section> 要素、親の節が"sect4"かそれより高い範囲に限る（例えば <section data-type="sect4"> は+<section data-type="sect3">+ にネストされる）

例:

<section data-type="sect1">
  <h1>A-Head</h1>
  <p>If you httpparty, you must party hard</p>
  <!-- Some more paragraphs -->
  <section data-type="sect2">
    <h2>B-Head</h2>
    <p>What's the frequency, Kenneth?</p>
    <!-- And so on... -->
  </section>
</section>

ブロック要素

パラグラフ

HTML要素: <p>

例:

<p>This is a standard paragraph with some <em>emphasized text</em></p>

サイドバー要素

HTML要素: <aside>

属性要件: data-type="sidebar"

コンテンツモデル: 0個または1個の <h5> 要素＋ 0個以上のブロック要素 (サイドバーのタイトルを含む)

例:

<aside data-type="sidebar">
  <h5>Amusing Digression</h5>
  <p>Did you know that in Boston, they call it "soda", and in Chicago, they call it "pop"?</p>
</aside>

説諭要素

HTML要素: <div>

属性要件: data-type="note" または data-type="warning"、 data-type="tip", data-type="caution" または data-type="important”、配下のコンテンツに応じて

コンテンツモデル: 以下のいずれか:

テキストおよび0個以上のインライン要素
0個以上の <h1>-<h6> 要素＋ 0個以上のブロック要素 (タイトルやサブタイトルのための)

例:

<div data-type="note">
  <h1>Helpful Info</h1>
  <p>Please take note of this important information</p>
</div>

<div data-type="warning">Make sure to get your AsciiDoc markup right!</div>

テーブル要素

HTML要素: <table>

コンテンツモデル: 0個または1個の <caption> 要素 (テーブルのタイトル、キャプション) ＋ 0個以上の <colgroup> 要素＋ <thead> 要素 (0個または1個のいずれかを、その後に続く要素によって選択) ＋ 0個以上の <tbody> ＋ 0個以上の <tr> 要素＋ <tfoot> 要素

コンテンツモデル<caption>要素: 以下のいずれか:

0個以上の <p> 要素および <div> 要素
テキストおよび0個以上のインライン要素

コンテンツモデル<colgroup>要素: HTML5の仕様を参照

コンテンツモデル<thead>要素、<tbody>要素、<tfoot>要素: HTML5の仕様を参照

コンテンツモデル<tr>要素: HTML5の仕様を参照、ただし配下の <td> 要素や <th> 要素は下記の内容を参照

コンテンツモデル<td>要素、<th>要素: 以下のいずれか:

テキストおよび0個以上のインライン要素
0個以上のブロック要素

例:

<table>
<caption>State capitals</caption>
<tr>
  <th>State</th>
  <th>Capital</th>
</tr>
<tr>
  <td>Massachusetts</td>
  <td>Boston</td>
</tr>
<!-- And so on -->
</table>

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Middle Initial</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfred</td>
      <td>E.</td>
      <td>Newman</td>
    </tr>
    <!-- And so on -->
  </tbody>
</table>

図版要素

HTML要素: <figure>

コンテンツモデル: 以下のいずれか:

<figcaption> 要素、続いて0個以上のブロック要素＋ <img> 要素
0個以上のブロック要素＋ <img> 要素、続いて <figcaption> 要素

例:

<figure>
<figcaption>Adorable cat</figcaption>
<img src="cute_kitty.gif" alt="Photo of an adorable cat"/>
</figure>

例題要素

HTML要素: <div>

属性要件: data-type="example"

コンテンツモデル: 以下のいずれか:

テキストおよび0個以上のインライン要素
0個以上の <h1>-<h6> 要素 (タイトルやサブタイトルのための)、続いて0個以上のブロック要素

例:

<div data-type="example">
<h5>Hello World in Python</h5>
<pre data-type="programlisting">print "Hello World"</pre>
</div>

コードリスト

HTML要素: <pre>

HTMLBook固有の属性オプション: data-code-language, コードリストの言語を示すために使用 (例： data-code-language="python")

例:

<pre data-type="programlisting">print "<em>Hello World</em>"</pre>

順序付きリスト

HTML要素: <ol>

コンテンツモデル: 0個以上の各リスト項目 <li> を必要とする。

<li>の子要素のコンテンツモデルは: 以下のいずれかが許容されている:

テキストおよび/または0個以上のインライン要素
0個以上のブロック要素

例:

<ol>
<li>Step 1</li>
<li>
  <p>Step 2</p>
  <p>Step 2 continued</p>
</li>
<!-- And so on -->
</ol>

項目別リスト

HTML要素: <ul>

コンテンツモデル: 0個以上の各リスト項目 <li> を必要とする。

子要素<li>のコンテンツモデル: 以下のいずれかが許容されている:

テキストおよび/または0個以上のインライン要素
0個以上のブロック要素

例:

<ul>
<li>Red</li>
<li>Orange</li>
<!-- And so on -->
</ul>

定義リスト

HTML要素: <dl>

コンテンツモデル: HTML5仕様に準ずる

子要素<dt>のコンテンツモデル: テキストおよび/または0個以上のインライン要素

子要素<dd>のコンテンツモデル: 以下のいずれかが許容されている:

テキストおよび/または0個以上のインライン要素
0個以上のブロック要素

例:

<dl>
  <dt>Constant Width Bold font</dt>
  <dd>Used to indicate user input</dd>
</dl>

引用

HTML要素: <blockquote>

コンテンツモデル: 次のいずれかが許容されている:

テキストおよび/または0個以上のインライン要素
0個以上のブロック要素

例:

<blockquote data-type="epigraph">
  <p>When in the course of human events...</p>
  <p data-type="attribution">U.S. Declaration of Independence</p>
</blockquote>

見出し

HTML要素: <h1>, <h2>, <h3>, <h4>, <h5>, または <h6>

コンテンツモデル: テキストおよび/またはゼロまたは複数のインライン要素

原注: 多くの主な本の構成(例：章、部／編、付録) は見出しを必要とする。<h1>-<h6>からの適切な要素を下記に概説した、これらの構成に対応する文書にも同様に概説してある:

本のタイトル -> h1
部／編のタイトル -> h1
章のタイトル -> h1
前書きのタイトル -> h1
付録のタイトル -> h1
奥付のタイトル -> h1
献辞のタイトル -> h1
用語解説のタイトル -> h1
参考文献のタイトル -> h1
セクト1のタイトル -> h1
セクト2のタイトル -> h2
セクト3のタイトル -> h3
セクト4のタイトル -> h4
セクト5のタイトル -> h5
サイドバーのタイトル -> h5

方程式

HTML要素*: <div>+

属性要件*: data-type="equation" ^[3]

*原注: HTMLBookは、HTML文書にエンベッドしたMathMLをサポートしており、それはここで使用できる。

例:

<div data-type="equation">
<h5>Pythagorean Theorem</h5>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup><mi>a</mi><mn>2</mn></msup>
  <mo>+</mo>
  <msup><mi>b</mi><mn>2</mn></msup>
  <mo>=</mo>
  <msup><mi>c</mi><mn>2</mn></msup>
</math>
</div>

インライン要素

強調 (通常、斜体表記)

HTML要素: <em>

例:

<p>I <em>love</em> HTML!</p>

強調 (通常、太字表記)

HTML要素: <strong>

例:

<p>I <strong>love</strong> HTML!</p>

リテラル (行中のプログラムコードのための要素: 変数、関数、等。)

HTML要素: <code>

例:

<p>Enter <code>echo "Hello World"</code> on the command line</p>

その他の体裁 (下線、取り消し線、等。)のための、多目的な区切りのマークアップ

HTML要素: <span>

例:

<p>Use your own +data-type+ or +class+ attributes for custom styling for formatting like <span data-type="strikethrough">strikethrough</span></p>

脚注、巻末(章末)の注

HTML 要素: <span>

属性要件: data-type="footnote"

*脚注のコンテンツモデル: テキストおよび/またはゼロまたは複数のインライン要素

例:

<p>Five out of every six people who try AsciiDoc prefer it to Markdown<span data-type="footnote">Totally made-up statistic</span></p>

原注:

<span> 要素はブロック要素の子 (および 2013年8月13日現在、インラインコンテクストで使用され脚注と語義が一致して受容されるような他のいかなる HTML5 要素) を受け入れない。もし複数のコンテンツのブロックを脚注に含めたいのであれば、<br/> 要素を使って区切る、例えば

<p>This is a really short paragraph.<span data-type="footnote">Largely because I like to put lots and lots of content in footnotes.<br/><br/>For example, let me tell you a story about my dog...</span></p>

脚注のコンテンツの望ましい表現 (例えば、ページ下部または節の後ろにフローティング/移動する脚注、適切なしるしや番号の追加) は XSL/CSS スタイルシートで処理されるはずである。

相互参照

HTML 要素: <a>

属性要件: data-type="xref"+脚注:[DocBook 由来]、ローカルの HTMLBook リソースを参照するIDを指す +href 属性、 XREF のスタイルを指定するための data-xrefstyle (任意)

例:

<section id="html5" data-type="chapter">
  <h1>Intro to HTML5<h1>
  <p>As I said at the beginning of <a data-type="xref" href="#html5">Chapter 1</a>, HTML5 is great...</p>
  <!-- Blah blah blah -->
</section>

索引語

HTML 要素: <a>

属性要件: data-type="indexterm"、主たる索引の項目の値のためには data-primary を使う。第二位の索引の項目の値のためには data-secondary を使う。第三位の索引の項目の値のためには data-tertiary を使う。現在のものに代えて使うべき索引への参照のためにはS data-see を使う。現在のものに加えて使うべき索引への参照のためには data-seealso を使う。アルファベット順で並べて表示するための整理のための値のためには data-primary-sortas、data-secondary-sortas、または +data-tertiary-sortas+を使う。索引の範囲の最後を示すためのタグのためには +data-startref="開始の索引マーカーのID"+^[4] を使う。

コンテンツモデル: なし

例:

<p>The Atlas build system<a data-type="indexterm" data-primary="Atlas" data-secondary="build system"/> lets you build EPUB, Mobi, PDF, and HTML content</p>

上付き文字

HTML 要素: <sup>

例:

<p>The area of a circle is πr<sup>2</sup></p>

下付き文字

HTML 要素: <sub>

例:

<p>The formula for water is H<sub>2</sub>O</p>

インタラクティブ要素

ビデオ

HTML要素: <video>

例:

原注: HTML5インタラクティブコンテンツをサポートしていない出力フォーマットのために、フォールバックコンテンツを_強く推奨する_。

<video id="asteroids_video" width="480" height="270" controls="controls" poster="images/fallback_image.png">
<source src="video/html5_asteroids.mp4" type="video/mp4"/>
<source src="video/html5_asteroids.ogg" type="video/ogg"/>
<em>Sorry, the &lt;video&gt; element not supported in your
  reading system. View the video online at http://example.com.</em>
</video>

音声

HTML 要素: <audio>

原注: HTML5 インタラクティブコンテンツをサポートしない出力形式のために、音声が再生できなかった場合の代替のコンテンツを用意することを_強く推奨する_。

例:

<audio id="new_slang">
<source src="audio/new_slang.wav" type="audio/wav"/>
<source src="audio/new_slang.mp3" type="audio/mp3"/>
<source src="audionew_slang.ogg" type="audio/ogg"/>
<em>Sorry, the &lt;audio&gt; element is not supported in your
  reading system. Hear the audio online at http://example.com.</em>
</audio>

キャンバス

HTML 要素: <canvas>

原注: HTML5 または JavaScript をサポートしない環境のために、代替となるもの (例えばリンクまたは画像) を含めるべきである。

例:

<canvas id="canvas" width="400" height="400">
 Your browser does not support the HTML 5 Canvas. See the interactive example at http://example.com.
</canvas>

メタデータ

メタデータ項目

HTML要素: <meta>

属性要件: name (メタデータ項目の名称を表す); content: (メタデータ項目の値を表す)

コンテンツモデル: なし

原注: すべての+<meta>要素はHTMLファイルの<head>+要素の子であるべきである。

例:

<head>
  <title>Title of the Book</title>
  <meta name="isbn-13" content="9781449344856"/>
</head>

要素の種別

ブロック要素

HTMLBookでは、HTML5仕様においてフローコンテンツ（除外されている要素はまた、ヘッディングコンテンツ、フレージングコンテンツ、またはセクショニングコンテンツとして分類されている）として分類されている要素の大多数はブロック要素として考えられている。一覧を示す:

<address>
<aside>
<audio>
<blockquote>
<canvas>
<details>
<div>
<dl>
<embed>
<fieldset>
<figure>
<form>
<hr>
<iframe>
<map>
<math> (MathMLの語彙; http://www.w3.org/1998/Math/MathMLの名前空間下に置かれるべき)
<menu>
<object>
<ol>
<p>
<pre>
<svg> (SVGの語彙; http://www.w3.org/2000/svgの名前空間下に置かれるべき)
<table>
<ul>
<video>

インライン要素

HTMLBookでは、HTML5仕様においてフレージングコンテンツとして分類されている要素の大多数はインライン要素として考えられている。一覧を示す:

<a>
<abbr>
<b>
<bdi>
<bdo>
<br>
<button>
<command>
<cite>
<code>
<datalist>
<del>
<dfn>
<em>
<i>
<input>
<img>
<ins>
<kbd>
<keygen>
<label>
<mark>
<meter>
<output>
<progress>
<q>
<ruby>
<s>
<samp>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<u>
<var>
<wbr>

1. EPUB 3 Structural Semantics Vocabulary のものではなく、DocBook 由来のものである

2. DocBook語彙から

3. EPUB3の構造意味論語彙のものではなく、DocBook由来のものである

4. DocBook の語義由来

Files

specification.asciidoc

Latest commit

History

specification.asciidoc

File metadata and controls

HTMLBook仕様: ワーキングドラフト (最終更新日 2013年12月29日)

改訂履歴と注記

本の構成要素

本

章

付録

書誌

用語集

序文

前付け

後付け

部／編

目次

索引

節

ブロック要素

パラグラフ

サイドバー要素

説諭要素

テーブル要素

図版要素

例題要素

コードリスト

順序付きリスト

項目別リスト

定義リスト

引用

見出し

方程式

インライン要素

強調 (通常、斜体表記)

強調 (通常、太字表記)

リテラル (行中のプログラムコードのための要素: 変数、関数、等。)

その他の体裁 (下線、取り消し線、等。)のための、多目的な区切りのマークアップ

脚注、巻末(章末)の注

相互参照

索引語

上付き文字

下付き文字

インタラクティブ要素

ビデオ

音声

キャンバス

メタデータ

メタデータ項目

要素の種別

ブロック要素

インライン要素