段落（パラグラフ）：<p> と <div class="para">

段落をマークするには <p> を使用します。このタグは段落を分ける為ではなく 囲む 為に使用します

<div class="para"> は、HTML DTD では <p> に許されていないブロックレベル要素を論理的に囲んでいる段落のためのものです。例えば <blockquote> に よって分割された段落があったとします。このとき段落の各半分は別個の <p> を持ち、その構成物全体は <div class="para"> によって囲まれます。ブロックとしてレンダリングしたいインラインの図 形には使用しないでください。ただし <p> 内での <img> は 使用可能であり、NS4.x でもこのスタイルシートはそれをブロックとしてレンダリングすることができます。

<div class="para">
 <p>技術文書、特にオンラインの文書を書く時には、厳密な構成が重要な 
 役割を担います。たいていの場合読者は、単にいくつかの特定の情報を
 見つけるためにその文書を読むのであって、その文書を精読するというよりは
 むしろざっと読み取る方が一般的です。これをより容易にするためには、</p>
 <ul>
 <li>文書を細かく分け、見出しで概説する
 <li>強固な構造を体系化する
 <li>黒丸つきリストを使用する
 <li>簡潔に書く；とりとめもなく書かない
 <li>最初に要点を、次に詳細を
 <li>"はじめに" の章以外では長々と紹介文を書かない
 <li>説明は明快に
 <li>そしてその文章を明らかにする具体的な例を挙げる。 
 (一つの例は千の単語に匹敵する)
 </ul>
 <p>文書の重要な箇所を目立たせることによって、読者は正しい箇所を
 すばやく簡単に見つけることができます。最初に要点をざっと提示し、
 それから説明します。</p>
</div>

節（セクション）<div class="section">

文書中の「節（セクション）」をマークするには <div class="section"> を使用します。これには見出しと内容が含まれます。通常「節（セクション）」は周りのテキストに比べて少しだけインデントされます。 

<div class="section">
  <h2><a name="structure">一般構造</a></h2>

  ...
</div>

データテーブル ：<table class="data"> 　

ある HTML テーブルがデータテーブルであることをハッキリさせるにはこのクラスを使用します。これによってスタイルシートは色と枠線を追加す ることができます。（mozilla.org ではまだレイアウトにテーブルを使用しているので、無差別にテーブルを色付けすることができません。）偶数／奇数のストライプが必要なら、自分で作成せず に even と odd クラスを使用します。

長文引用（Block Quotes）: <blockquote> （付属要素： <address>）

長文引用（Block Quotes）- 段落もしくは他のブロックレベルのコンテン ツの引用にはこれを使用します。終了タグの前に <address> を伴って引用元を明示することができます。

<blockquote cite="http://www.faqs.org/rfcs/rfc1866.html">
 <p>BLOCKQUOTE 要素には、別の書類から引用された文章が含まれます。</p>
  <p>典型的なレンダリングとしては、左右を少し字下げした上で、またはそのまま、
 斜体で表示されるようです。BLOCKQUOTE では一般的に引用部分の前後に
 余白を空けます。</p>
  <p>Single-fontでは、左端に大なり記号(>)のような記号を縦に並べるという、
 電子メールでの引用のスタイルを使うことができます。</p>
 <address><a href="http://www.faqs.org/rfcs/rfc1866.html">HTML
 2.0</a></address>
</blockquote>

短文引用：<div class="quote"> （付属要素： <q> と <cite>）

短文引用 - 長文引用ほどの大きさではない、フレーズからセンテンスの引用にはこれを使用します。引用文は <q> 内に、引用元があればその後ろの <cite> に入れます。

<div class="quote">
 <q>Mozilla は Microsoft IE に代わる最高でフリーのブラウザであり、 
 そして起動もより速い。</q>
 <cite>Rex Baldazo, C|Net</cite>
</div>

エピグラフ：<blockquote class="epigraph"> もしくは <div class="epigraph">


エピグラフと はモットーもしくは引用であり、通常は文書の冒頭に置かれ、文書の主題に通じます。エピグラフタグの使用法は上記の <blockquote> と <div class="quote"> と同じです。

<h2>MLP とは何？</h2>
<div class="epigraph">
 <q>英語は単なる一言語でしかない。</q>
 <cite>Mozilla i18n and l10n Guidelines</cite>
</div>
<p>Mozilla Organization は標準に準拠して...</p>

著者／編者のコメント：<div class="remark"> と <span class="remark">


草稿中の著者もしくは編者のコメントを明示するにはこれを使用します。（これはまた、コードブロック中のコメントにも使用されます。）目立たせるた めに句読点等を追加しないこと；それらはスタイルシートが生成します。

このフラグは、子フレームの合計領域がフレームの固定ボックスを
超えた場合にセットされる。 <span class="remark">"固定ボックス"って
なんだ？)</span> このフラグがセットされ、そして...

一般的な"注釈"：<span class="note">、<p class="note"> と <div class="note">


注釈をマークするにはこれを使用します。注釈の前に置かれるテキスト "Note：" はスタイルシートが生成し、たいていはフォントや色の変更も行われます。

<p>このリリースノートでは、Mozilla 1.2.1 に関する、システム必要条件、
 インストール手順、既知の問題について記述しています。</p>
<p class="note">バグナンバーを参照すると（マウスポインタを当てると）、
 該当する問題や機能に関する情報（バグレポートの詳細（英語））を
 見ることができます。</p>

補足項目：<div class="sidenote">


このクラスは本文とは直接関連のない、したがって議論の主な流れから離しておくべき短い項目の情報（もしくはリンク）に使用します。一般的にサイ ドバーは横にフ ロートされますが、フロート無しでもテキストを無理なく読めるようにしなければなりません：単純に別の背景か枠線によって分離するとよいでしょう（あるい は何もしない；例えば Lynx 上で）。

<p>PLDHash インプリメンテーションはとても低レベルなインプリメンテーションで、
 Cで書かれています。これは大変柔軟ですが、理解して使用するにはいくらか
 時間がかかります。基本的なガイドはここに含まれていますが、多くの潜在的な
 キャスティングエラーを簡単に回避するには C++ で書かれた ... を読まなくては
 なりません。</p>
<p class="sidenote">PLDHash の 'D' は pldhash の "double-hashing"
 インプリメンテーションのことで、PLDHash がハッシュの衝突を解決する方法です。</p>
<p><code>PLDHashEntryHdr</code> から派生したエントリー構造タイプを必ず宣言します。
 この入力構造にはあなたがハッシュテーブル（すべてのポインタもしくは固定長データ形式）
 に保存を望むどんなデータでも含むことができるべきです。<span class="note">
 二重ハッシュ・インプリメンテーションの為に、ハッシュテーブルが変更された際は
 エントリーがメモリーに入ってくるかもしれません。エントリーのポインターを
 変えないようにするには、代わりに <a href="#PLHashTable">PLHashTable</a> の使用
 を検討するのもよいでしょう</p>

主要な注釈：<div class="key-point">


テキスト中の重要な箇所を囲みます - 目立たせたり、あるいは引き離したりする時に使用します。（しかし、重大なお知らせには important を使用します）

<div class="key-point">
 <h2>Mozilla 1.7 ベータが出ました！</h2>
 <p>このリリースには新しくすばらしい機能と不具合の修正が含まれます... </p>
</div>

重要な（「必ず読むべき」）：<* class="important">

絶対に見逃してはいけない重要なお知らせを明示するにはこれを使用します。通常 important はより大きなフォントと明るい色、もしくはどちらかで表示されます。また、そのテキストが <strong> に挟まれるようにしてください。

<p class="important">Netscape Communicator に問題があってここに
 来たのですか？もしそうなら、間違った場所にいます。次の場所を
 訪れてください、...</p>
 

通常の強調：<em>

強い強調：<strong>

より強い強調：<strong class="stronger">　

とても強い強調：<strong class="very-strong">　

これらは様々なレベルの強調を明示します。例えば典型的な表示様式として、イタリック、ボールド、ボールド・イタリック、ボールド大文字があげら れます。

Some <em>more</em>, <strong>more</strong>,
<strong class="stronger">more</strong>,
<strong class="very-strong">more emphasis</strong>!

図形：<div class="figure">

図形やダイアグラムとしてイメージをマークするにはこれを使用します。通常 figure は中央に置かれるブロックとしてレンダリングされます。

例：<div class="example">

すべてのタイプの「例」に使用します。（しかし、コードブロックは <code> タグで忘れずに囲むこと。）title 属性でキャプションテキストを与えることができます。

良い用法：<div class="good example"> と <pre class="good code">

良い用法として用いられる例とコードを特にマークするにはこの good クラスを使用します。（そのコードサンプル が good example 内にあるのであれば、そのコード自身は good を必要としません。）

<p>この例ではメソッドが多すぎます： </p>
<pre class="bad code">
interface nsIFoo : nsISupports {
 long getLength();
 void setLength(in long length);
 long getColor();
};
</pre>
<p>以下のコードはまったく同じ c++ 識別記号を生成しますが、
よりスクリプトフレンドリーです。</p>
<pre class="good code">
interface nsIFoo : nsISupports {
 attribute long length;
 readonly attribute long color;
};
</pre>

interface nsIFoo : nsISupports {
 long getLength();
 void setLength(in long length);
 long getColor();
};

interface nsIFoo : nsISupports {
 attribute long length;
 readonly attribute long color;
};

悪い用法：<div class="bad example"> と <pre class="bad code">

無効あるいは悪い用法として例やコードを特にマークするにはこの bad クラスを使用します。 （そのコードサンプルが bad example 内にあるのであれば、そのコード自身は bad を必要としません。）

キーボード入力：<kbd>

ユーザによって入力されるテキスト — ユーザが入力すべきテキストとキーの組み合わせのマーキングにはこれを使用します。

<kbd>Esc</kbd> を押して <kbd>:wq</kbd> を入力する。

変数とプレースホルダーテキスト：<var>

プレースホルダーをマークするにはこれを使用します。

<kbd>Esc</kbd> を押して <kbd>:w <var>filename</var></kbd> を入力します。

コマンド：<code class="command">

コマンド名をマークするにはこれを使用します。

<code class="command">ls</code> コマンドはカレントディレクトリ内の
すべてのファイルの一覧を表示します。

ファイル名と URI：<code class="filename">

ファイル名、パス、そして URI にはこれを使用します。

ファイルを次のように保存します
<code class="filename">/home/<var>your_username</var>/.bashrc</code>

インラインコード：<code>

コードのインラインフラグメントはどんなものでもこれでマークします。これはテキストを固定幅のフォントで表示し、他のコード-スタイルへの変更を 行いま す（生成されたコンテンツスタイルの使用停止など）。

コードブロック：<pre class="code">

すべてのコードブロックはこれでマークします。周りのテキストから視覚的にコードを離すのに加えて、<span class="remark"> や <var> 等のマークアップ用にシンタックス・ハイライトモー ドをスタイルシートに示唆し、生成されたコンテンツを無効にします。重要なフラグメントを強調表示させるには 強調 を使用します。

無効なコードは bad code でマーク します。

<pre class="code">
ファイルを次のように保存します
<em><code class="filename"></em>/home/<em><var></em>your_username<em></var></em>/.bashrc<em></code></em>
</pre>

ファイルを次のように保存します
<code class="filename">/home/<var>your_username</var>/.bashrc</code>

テキスト・スクリーン・キャプチャー（ブロック出力）：<pre class="screen"> と<div class="screen">

ターミナルウインドウやアスキーアート GUI デザインからのスクリーン・キャプチャー等、コンピュータテキスト出力のブロックをマークするには pre に screen クラスを使用します。また、<div> にこのクラスをセットして HTML マークアップを使い、こうした出力を表現することもできます。ページコードの例を参照してください。

インライン出力：<samp>

テキスト出力のインライン・フラグメントをマークするにはこれを使用します。

プロンプトで <kbd>c:</kbd> を入力し、<kbd>enter</kbd> を押します。
プロンプトが <samp>C:\></samp> になるはずです。

目次（table of contents）：<ol class="toc">、<ul class="toc"> と <dl class="toc">

"toc" は目次（table of contents）としてのリストをマークします。単数もしくは複数のレベルの単純なリストには <ol> を使用します。（複数レベルのリストには最も外側のリストにのみこのクラスをセットします。）リスト内エントリーの順番が重要でない時だ け <ol> の代わりに <ul> を使用します。

<dl> 使用時には、項目（<dt>）に項目/ページ名を与え、 定義（<dd>） には短い説明もしくはその項目/ページの概要を与えます。

ローカルな（ミニ）ナビゲーション：<ul class="snav">

snav とは、どちらでもお好きな方でかまいませんが、"short navigation" もしくは "sectional navigation" のことで、ローカルなナビゲーション（すべて同一ページの各部へのリンク）の短いリスト用です。この使用は（テンプレートデザイ ナーとは逆に）各ページの著者の自由裁量にまかされますが、正式な目次ではありません。

<ul class="snav">
 <li><a href="1.4/">1.4</a>
 <li><a href="1.5/">1.5</a>
 <li><a href="1.6/">1.6</a>
 <li><a href="1.7/">1.7</a>
</ul>

外部（外部サイト）への参照：<a class="ex-ref">

別サイトへのリンクを意味するには ex-ref を使用します。例えば MozillaZine は ex-ref としてマークされるでしょう。ex-ref リンクの典型的なフォーマットは、標準のリンクとは少しだけ違った形になります。訪問者に mozilla のページから離れることを通告するのが目的です。