1. 準拠する規格

Okapi Project では、XHTML 1.0 , DTD Transitional に準拠したHTMLを作成することとします。ただし、フレームを使用する場合の親フレーム（フレームセット）については、 DTD Frameset に準拠するものとします。

また、スタイルシートについてはCSS2に準拠することとします。

2. 外見と内容の分離

Okapi Project では、コンテンツの作成にあたり、内容と外見（デザイン）を極力分離させるため、CSS2を使用します。

3. タグの意味づけと利用方法

タグは本来それぞれに意味を持っています。 Okapi Project で公開する HTML については本来の意味にあったタグを利用することで、文章データの意味づけと表示における体裁を明確に分離することとします。

また、Okapi Project では、以下に示す種類のタグを使用します。特別な理由がある場合を除き、これ以外のタグを利用しないようにします。

3.1. 文章の段落

文章の構造を示すには以下のタグを使用します。

3.1.1. 見出し　<h1>〜</h1>

文章の表題（見出し）を表現する場合に用いるタグで、h1〜h6までの6段階レベルで表現することが可能です。Webブラウザはh1〜h6タグで指定した内容を、そのレベルに応じた文字の大きさで表示してくれます。

見出しタグは、<h1>の次に<h2>、その次に<h3>、といったように見出しは大見出しから順番に使うことを原則とし、文字サイズの表示を変えるなど、表示方法変更の目的で使用してはいけません。

HTML

 <h1>大見出し1</h1>
   <h2>中見出し1</h2>
     <h3>小見出し1</h3>
 <h1>大見出し2</h1>
   <h2>中見出し2</h2>
     <h3>小見出し2</h3>

表示内容

3.1.2. 段落と改行 <p>〜</p>

１つの段落を表現する場合に用いるタグです。Webブラウザは段落と、この前の要素の間で改行し、更に1行の空白を空けます。

段落とは一般的に、「一つ以上の文の集まりで、一つのまとまった内容を表す単位」とされおり、日本語の文書では最初の行を1文字下げることで表現します。
したがって、段落は文章の内容に応じて適切に指定する必要があり、余白行を作るために使用してはいけません。

ただし、同じ段落内であっても改行したいときがあります。このときに強制改行を使用します。なおXHTMLに対応するため<br />と表記します。

HTML

 <p>段落1</p>
 <p>段落2</p>
 <p>段落3の1行目<br />段落3の2行目</p>

表示内容

3.1.3. 整形済みテキスト　<pre>〜</pre>

ソースコードのように改行や空白をそのまま表示したい場合、整形済みテキストを使用します。ただ、整形済みテキスト内では、「<」、「>」、「&」などといったHTMLの文法上意味のある記号を含む場合、それぞれ「&lt;」「&gt;」「&amp;」のような文字参照に置き換える必要があります。

HTML

 <pre>
    for( int i = 1 ; i<10 ; i++ ) {
      System.out.print(i);
    }
 </pre>

表示内容

for( int i=1 ; i<10 ; i++ ) {
    System.out.print(i); 
}

3.2. 箇条書き

箇条書き表現する場合に用いるタグです。 Web ブラウザは箇条書きに対してリストマーカー（○、●、■）やリスト番号「1...、ｉ...、A...」を表示することが出来ます。

箇条書きとは何かの対象についての、事柄をいくつに分けて書き並べたものなので、複数個の短い文の集まりといえます。この文の集まりと、1つの文をそれぞれ決められたタグでで囲みます。

3.2.1. 番号なしリスト

文の集まりを<ul>で囲み、1つの文を<li>で囲むことで番号なしの箇条書きになります。このとき1つの文の先頭に表示されるリストマーカー（○、●、■）を変更することが出来ます。

HTML

 <ul>
   <li>項目1</li>
   <li>項目2</li>
 </ul>
 <ul type="square">
   <li>項目3</li>
   <li>項目4</li>
 </ul>

表示内容

3.2.2. 番号付リスト

文の集まりを<ul>ではなく<ol>で囲むと番号つきの箇条書きになります。番号つきの箇条書きのリスト番号のスタイル（1,2,3,.../a,b,c,.../i,ii,iii,...など）を変更することができます。またstart属性を用いることで連番の開始番号を指定することができます。

HTML

 <ol start="4">
   <li>項目4</li>
   <li>項目5</li>
 </ol>
 <ol type="A">
   <li>項目A</li>
   <li>項目B</li>
 </ol>

表示内容

3.2.3. 箇条書きの階層化

箇条書きには、リストには、番号つき、番号なしを問わず入れ子の構造にすることが出来ます。これにより箇条書きの階層化を実現することができます。

HTML

 <ul>
   <li>項目1
     <ul>
       <li>サブ項目1 </li>
       <li>サブ項目2 </li>
     </ul>
   </li>
   <li>項目2
     <ul>
       <li>サブ項目1 </li>
       <li>サブ項目2 </li>
     </ul>
   </li>
 <ul>

表示内容

3.2.4. 定義リスト

箇条書きには特別な意味を持つものとして用語と、その解説を箇条書きにすることも可能です。<dl>で用語とその解説を囲み、<dt>で用語、<dd>で説明を記載します。

HTML

 <dl>
   <dt>用語1</dt>
   <dd>用語の説明1</dd>
   <dt>用語2</dt>
   <dd>用語の説明2</dd>
 </dl>

表示内容

3.3. 特定用途の段落

3.3.1 引用 <blockquote>〜</blockquote>

他の文献から文章を引用する場合に使用します。Webブラウザは引用に対して左右インデントして表示します。また、属性としてciteに出典URLを指定することも可能です。

HTML

 <p>GoF デザインパターンより</p>
 <blockquote>
 　<p>SINGLETON とはあるクラスに対して
　　　・・・な方法を提供する。</p>
 </blockquote> 

表示内容

3.3.2 問い合わせ先 <address>〜</address>

コンテンツの著者や問い合せ先を表す場合に用いるタグです。addressタグにはブロックレベル要素を挿入することはできません。

HTML

 <address>

 お問い合わせは<a href="mailto:info@okapi.com">info@okapi.com</a>まで

 </address>

表示内容

3.4. 文章の一部分に意味づけ

3.4.1. 文の強調　<em>〜</em>

文章の一部を強調したい場合に用いるタグです。Webブラウザはその部分を斜体で表示します。

HTML

 <p>
  java は<em>オブジェクト指向</em>言語です。
 </p>

表示内容

3.4.2. 文のより強い強調　<strong>〜</strong>

文章の一部を前期の<em>よりも、さらに強調したい場合に用いるタグです。Webブラウザはその部分を太字で表示します。

HTML

 <p>
  java は<strong>オブジェクト指向</strong>言語です。
 </p>

表示内容

3.5. テーブルの意味づけ

表は正しいタイトル付け、ヘッダ、本文、フッタを指定することで、スタイルシートを用いて適切なレイアウトを指定することが可能です。

3.5.1. 表のタイトル　<caption>〜</caption>

表のタイトルを示すタグです。

3.5.2. 表のヘッダ　<thead>〜</thead>

表の横列（行）をグループ化しヘッダとする場合に使用するタグです。

3.5.3. 表の本体　<tbody>〜</tbody>

表の横列（行）をグループ化し本体とする場合に使用するタグです。

3.5.4. 表のフッタ　<tfoot>〜</tfoot>

表の横列（行）をグループ化しフッタとする場合に使用するタグです。

3.5.5. 表の記述例

スタイルシート

caption {
  font-weight: bold;
   color: #009900;
}
th {
  background-color: #CCCCCC;
}
tfoot {
  font-style: italic;
  font-weight: bold;
  color: #FF0000;
}

HTML

<table border="1">
<caption>月別売上</caption>　------------------------表のタイトル
<thead>   -------------------------------------------ヘッダの定義
　<tr>
　　<th>月</th> <th>富山</th> <th>東京</th>   --------表の見出しは<th>タグ
　</tr>
</thead>
<tfoot>   --------------------------------------------フッタの定義
　<tr>　　　　　　　　　　　　　　　　　　　　　　　 Webブラウザでは、表が大きい場合に
　　<th>合計</th> <td>38,000</td> <td>70,000</td>         本体よりも先にフッタを表示することが可能
　</tr>
</tfoot>
<tbody>   -------------------------------------------本体の定義
　<tr>
　　<td>4月</td> <td>12,000</td> <td>23,000</td>
　</tr>
　<tr>
　　<td>5月</td> <td>11,000</td> <td>22,000</td>
　</tr>
　<tr>
　　<td>6月</td> <td>15,000</td> <td>25,000</td>
　</tr>
</tbody>
</table>

表示内容

4. 文字参照

タグに利用される記号や特殊な記号は文字参照といい、特別な書き方をする必要があります。文字参照は「&」記号ではじまり、セミコロン（；）で終わります。

&lt; < 小さな記号（less-than sign）
&gt; > 大きな記号（greater-than sign）
&amp; & アンパーサンド（ampersand）
&quot; " 引用符（quotation）
&copy; c　 コピーライト（copyright）
&reg; R　 登録商標（registered trademark）
&nbsp; 　 改行なしの空白（non-breaking space）

---