この文書は「HTMLBook Specification (Unofficial Draft, O'Reilly Media)」を JAGAT XML パブリッシング準研究会が、研究目的のために日本語訳したものです。この仕様書の原文は https://github.com/oreillymedia/HTMLBook にある英語版であり、その著作権は O’Reilly Media, Inc. が保有しています。この日本語訳は参考情報であり、翻訳の正確性を保証しません。
公開開始日: 2014-12-09
本をHTMLで執筆しましょう！ HTMLBookはオープンで、XHTML5ベースでプリントとデジタル双方の本を執筆・制作するための標準です。 HTMLBookは以下のような前提で作られています。
HTMLBook自体は以下のように特徴づけられています:
HTMLBook仕様でのHTML5要素の要件は以下の通り。 data-type 属性の特有の意味的活用については、別途注記がない限り EPUB 3 Structural Semantics Vocabulary による。
コンテンツモデルの多くについては「ブロック要素」または「インライン要素」を参照のこと；これらの各カテゴリに属するHTML5の要素の対応するリストについては、 Block Elements および Inline Elements を参照のこと。
明記されていないコンテンツモデルまたは属性要件については、HTMLBookは [[!HTML5]] 仕様に対応する要件を採用している。
class の代わりに data-type 属性を使用するよう仕様を改訂。現時点では class 属性はユーザが望んで定義したセマンティクスとして自由に使用でき、かつ class の値に制約はない。仕様のユーザは data-type の値を class 属性の値に複製することにより容易にCSSでの体裁付与したいだろうが、これは完全に任意である。HTML要素: <body>
属性要件: data-type="book" ([[EPUB3SSV]]ではなく、[[DOCBOOK]]由来)
コンテンツモデル: 本の題名を含む省略可能な <h1> または本の題名および省略可能な副題名コンテンツを含む ヘッダーブロック、次に、子として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> または章題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の 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> または付録の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の 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> または書誌の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の 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> または用語集の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の 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> または序文の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の 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", または data-type="dedication"
コンテンツモデル: 最初の子は前付けの題名を含む <h1> または前付けの題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の Sect1 子要素 (<section data-type="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", または data-type="conclusion"
コンテンツモデル: 最初の子は後付けの題名を含む <h1> または後付けの題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の Sect1 子要素 (<section data-type="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> または部の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、任意の部の導入を構成するゼロ個以上のブロック要素、次に、部以外の本の構成要素を表すゼロ個以上の <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>
HTML要素: <nav>
属性要件: data-type="toc"
コンテンツモデル: 目次は [[EPUB3]] ナビゲーション文書の仕様に適合しなければならない。最初の子はゼロ個以上の見出し要素 (<h1>-<h6>)、続いて <ol> (<li> 子要素を持ち、それはひとつの <span> 要素か <a> 要素、それに加え、任意の <ol> 子要素だけを含めることができる)
例
<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> または索引の題名と省略可能な副題名コンテンツを含む ヘッダーブロック であるべきである。次に、ゼロ個以上のブロック要素、次に、ゼロ個以上の Sect1 子要素 (<section data-type="sect1">)
効率的な手法: HTMLBook は [[EPUBINDEX]] の仕様に従い、必要に応じて意味の変化を使用できる 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" ( [[DOCBOOK]] 語彙から), 階層レベルに応じて。 sect1 は主な本の構成要素 (章、付録、など) に直接ネストされた <section> 要素に使われる。 sect2 は sect1 <section> にネストされた<section> 要素に使われる。 sect3 は sect2 <section>にネストされた <section> 要素に使われる、など。
コンテンツモデル: 最初の子は以下の data-type の値によって示される階層レベルに対応した主な見出し要素であるべきである。
"sect1" -> h1 "sect2" -> h2 "sect3" -> h3 "sect4" -> h4 "sect5" -> h5
または節の題名と省略可能な副題名コンテンツを含む ヘッダーブロック 。 続いてゼロ個以上のブロック要素。 続いてゼロ個以上の一つ下の階層の 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要素: <div>
属性要件: data-type="note", data-type="warning", data-type="tip", data-type="caution", または data-type="important", 配下のコンテンツに応じて
コンテンツモデル: 以下のいずれか
例:
<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>
コンテンツモデル: ゼロ個または1個の <caption> 要素 (テーブルのタイトル、キャプション) ＋ ゼロ個以上の <colgroup> 要素 ＋ ゼロ個以上の <thead> 要素 ＋ ゼロ個以上の <tbody> 要素、または、ゼロ個以上の <tr> 要素 ＋ ゼロ個以上の <tfoot> 要素
コンテンツモデル <caption> 要素: 以下のいずれか
ゼロ個以上の <p> 要素および/または <div> 要素
テキストおよび/またはゼロ個以上のインライン要素
コンテンツモデル <colgroup> 要素: HTML5の仕様を参照
コンテンツモデル <thead> 要素, <tbody> 要素, <tfoot> 要素: HTML5の仕様を参照
コンテンツモデル <tr> 要素: HTML5の仕様を参照、ただし配下の <td> 要素や <th> 要素は下記の内容を参照
コンテンツモデル <td> 要素, <th> 要素: 以下のいずれか
例:
<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>
コンテンツモデル: 以下のいずれか
例:
<figure> <figcaption>Adorable cat</figcaption> <img src="cute_kitty.gif" alt="Photo of an adorable cat"/> </figure>
HTML要素: <div>
属性要件: data-type="example"
コンテンツモデル: 以下のいずれか
例:
<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>
コンテンツモデル: 各リスト項目にゼロ個以上の <li> 子要素
<li> 子要素のコンテンツモデル: 以下のいずれかが許容されている:
例:
<ol> <li>Step 1</li> <li> <p>Step 2</p> <p>Step 2 continued</p> </li> <!-- And so on --> </ol>
HTML要素: <ul>
コンテンツモデル: 各リスト項目にゼロ個以上の <li> 子要素
<li> 子要素のコンテンツモデル: 以下のいずれかが許容されている:
例:
<ul> <li>Red</li> <li>Orange</li> <!-- And so on --> </ul>
HTML要素: <dl>
コンテンツモデル: HTML5の仕様を反映する
<dt>子要素のコンテンツモデル: テキストおよび/またはゼロ個以上のインライン要素
<dd>子要素のコンテンツモデル: 以下のいずれかが許容されている:
例:
<dl> <dt>Constant Width Bold font</dt> <dd>Used to indicate user input</dd> </dl>
HTML要素: <blockquote>
コンテンツモデル: 次のいずれかが許容されている:
例:
<blockquote> <p>When in the course of human events...</p> <p data-type="attribution">U.S. Declaration of Independence</p> </blockquote>
原注: もしblockquoteがepigraphならば，data-type="epigraph"を追加する。例:
<section data-type="chapter">
<h1>Conclusion</h1>
<blockquote data-type="epigraph">
<p>It ain't over till it's over.</p>
<p data-type="attribution">Yogi Berra</p>
</blockquote>
<p>In this final chapter of the book, we will…</p>
</section>
HTML要素: <div>
属性要件: data-type="equation" ([[EPUB3SSV]]でなく [[DOCBOOK]]由来])
原注: 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>要素はブロック要素の子 (および 2014年4月現在、インラインコンテクストで使用され脚注として意味的に受容されるような他のいかなる 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 を使う。現在のものに代えて使うべき索引への参照のためには data-see を使う。現在のものに加えて使うべき索引への参照のためには data-seealso を使う。アルファベット順で並べて表示するための整理のための値のためには data-primary-sortas 、 data-secondary-sortas 、または data-tertiary-sortas を使う。索引の範囲の最後を示すためのタグのためには data-startref="開始の索引マーカーのID" ([[DOCBOOK]] の語義由来) を使う。
コンテンツモデル: なし
例:
<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要素: <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>
コンテンツモデル: テキストおよび/またはゼロ個以上のインライン要素
原注: 本の主な構成要素 (例：章、部、付録) の多くは見出しを必要とする。<h1>-<h6> からの適切な要素は下記の通りである。これらの構成要素に対応する節にも同様に概説してある:
本のタイトル -> h1 部のタイトル -> h1 章のタイトル -> h1 前書きのタイトル -> h1 付録のタイトル -> h1 奥付のタイトル -> h1 献辞のタイトル -> h1 用語解説のタイトル -> h1 参考文献のタイトル -> h1 sect1のタイトル -> h1 sect2のタイトル -> h2 sect3のタイトル -> h3 sect4のタイトル -> h4 sect5のタイトル -> h5 サイドバーのタイトル -> h5
HTML要素: <header>
コンテンツモデル: 前の 見出し の節で述べた、親の構成要素に対して適切なレベルを指定した見出しの要素 (h1–h5) (例えば章の <header> に対する <h1>)。それから、副題または著者の属性のためのゼロ個以上の <p> 要素。それらは data-type として subtitle または author を指定しなければならない。
例:
<section data-type="chapter">
<header>
<h1>Chapter title</h1>
<p data-type="subtitle">Chapter subtitle</p>
</header>
<!-- Chapter content here... -->
</section>
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 <video> 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 <audio> element is not supported in your reading system. Hear the audio online at http://example.com.</em> </audio>
HTML要素: <canvas>
原注: HTML5 または JavaScript をサポートしない環境のために、代替となるもの (例えばリンクまたは画像) を含めるべきである。
HTMLBookドキュメントの<head>要素に、キャンバスの操作のための JS のコードを含む/参照するような<script>要素を含めることができる。
例:
<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>
HTMLBookドキュメントにコメントを追加するには、標準のHTML/XMLのコメント構文を使用する:
<!-- This is a comment -->
または、data-type="comment" という属性を任意のHTML要素に追加する。例:
<div data-type="comment">This is a comment preceding a paragraph of text</div> <p>This is a paragraph of text <span data-type="comment">Inline comment in paragraph</span></p>
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>
<dd>
<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>
<dt>
<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>