例：吾輩は猫である。名前はまだ無い。

例：どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

例：この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

例：ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。眼を明いていられぬくらいだ。はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。

例：ようやくの思いで笹原を這い出すと向うに大きな池がある。吾輩は池の前に坐ってどうしたらよかろうと考えて見た。別にこれという分別も出ない。しばらくして泣いたら書生がまた迎に来てくれるかと考え付いた。ニャー、ニャーと試みにやって見たが誰も来ない。そのうち池の上をさらさらと風が渡って日が暮れかかる。腹が非常に減って来た。泣きたくても声が出ない。仕方がない、何でもよいから食物のある所まであるこうと決心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這って行くとようやくの事で何となく人間臭い所へ出た。ここへ這入ったら、どうにかなると思って竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もしこの竹垣が破れていなかったなら、吾輩はついに路傍に餓死したかも知れんのである。一樹の蔭とはよく云ったものだ。この垣根の穴は今日に至るまで吾輩が隣家の三毛を訪問する時の通路になっている。さて邸へは忍び込んだもののこれから先どうして善いか分らない。そのうちに暗くなる、腹は減る、寒さは寒し、雨が降って来るという始末でもう一刻の猶予が出来なくなった。仕方がないからとにかく明るくて暖かそうな方へ方へとあるいて行く。今から考えるとその時はすでに家の内に這入っておったのだ。（以下略）

例：これはテーマが変わる前の段落です。

例：これはテーマが変わった後の段落です。

まずは詩（和歌）をマークアップする例：

  秋の田の かりほの庵の 苫をあらみ
                    わが衣手は 露にぬれつゝ

  春過ぎて 夏來にけらし 白妙の
                    衣ほすてふ 天の香具山

次にソースコードをマークアップする例：

#include <stdio.h>

int main(void)
{
    printf("Hello, world!\n");
    return 0;
}

そしてASCIIアートをマークアップする例：

  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __  
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Flash frequency (Hertz)

まずは一段落だけの引用：

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此のシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿として迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。今は此のシラクスの市で、石工をしている。その友を、これから訪ねてみるつもりなのだ。久しく逢わなかったのだから、訪ねて行くのが楽しみである。歩いているうちにメロスは、まちの様子を怪しく思った。ひっそりしている。もう既に日も落ちて、まちの暗いのは当りまえだが、けれども、なんだか、夜のせいばかりでは無く、市全体が、やけに寂しい。のんきなメロスも、だんだん不安になって来た。路で逢った若い衆をつかまえて、何かあったのか、二年まえに此の市に来たときは、夜でも皆が歌をうたって、まちは賑やかであった筈だが、と質問した。若い衆は、首を振って答えなかった。しばらく歩いて老爺に逢い、こんどはもっと、語勢を強くして質問した。老爺は答えなかった。メロスは両手で老爺のからだをゆすぶって質問を重ねた。老爺は、あたりをはばかる低声で、わずか答えた。

次は複数段落の引用：

メロスは口惜しく、地団駄踏んだ。ものも言いたくなくなった。

竹馬の友、セリヌンティウスは、深夜、王城に召された。暴君ディオニスの面前で、佳き友と佳き友は、二年ぶりで相逢うた。メロスは、友に一切の事情を語った。セリヌンティウスは無言で首肯き、メロスをひしと抱きしめた。友と友の間は、それでよかった。セリヌンティウスは、縄打たれた。メロスは、すぐに出発した。初夏、満天の星である。

メロスはその夜、一睡もせず十里の路を急ぎに急いで、村へ到着したのは、翌る日の午前、陽は既に高く昇って、村人たちは野に出て仕事をはじめていた。メロスの十六の妹も、きょうは兄の代りに羊群の番をしていた。よろめいて歩いて来る兄の、疲労困憊の姿を見つけて驚いた。そうして、うるさく兄に質問を浴びせた。

「なんでも無い。」メロスは無理に笑おうと努めた。「市に用事を残して来た。またすぐ市に行かなければならぬ。あす、おまえの結婚式を挙げる。早いほうがよかろう。」

妹は頬をあからめた。

「うれしいか。綺麗な衣裳も買って来た。さあ、これから行って、村の人たちに知らせて来い。結婚式は、あすだと。」

1. 順序付きリスト、ol要素です。
2. リストの項目はli要素で表します。
3. リストは入れ子にすることも出来ます。
   1. ol要素の中にol要素を入れました。
      1. ol要素の中のol要素にol要素を入れました。（その1）
      2. ol要素の中のol要素にol要素を入れました。（その2）
      3. ol要素の中のol要素にol要素を入れました。（その3）
   2. 入れ子にする時は注意が必要です。
      1. ol要素の直下はli要素しか配置できません。
      2. ol要素の直下にol要素を入れないようにしましょう。
      3. 入れ子の階層はほどほどが良いでしょう。
   3. 順序無しリスト（ul要素）との入れ子も可能です。
      • ol要素の中のol要素にul要素を入れました。（その1）
      • ol要素の中のol要素にul要素を入れました。（その2）
      • ol要素の中のol要素にul要素を入れました。（その3）
4. リストのマーカーがアラビア数字であるとは限りません。
5. 本質的に列挙すべきものなら、項目が一つだけでも構わないと思います。

• 順序無しリスト、ul要素です。
• リストの項目はli要素で表します。
• リストは入れ子にすることも出来ます。
  • ul要素の中にul要素を入れました。
    • ul要素の中のul要素にul要素を入れました。（その1）
    • ul要素の中のul要素にul要素を入れました。（その2）
    • ul要素の中のul要素にul要素を入れました。（その3）
  • 入れ子にする時は注意が必要です。
    • ul要素の直下はli要素しか配置できません。
    • ul要素の直下にul要素を入れないようにしましょう。
    • 入れ子の階層はほどほどが良いでしょう。
  • 順序付きリスト（ol要素）との入れ子も可能です。
    1. ul要素の中のul要素にol要素を入れました。（その1）
    2. ul要素の中のul要素にol要素を入れました。（その2）
    3. ul要素の中のul要素にol要素を入れました。（その3）
• リストのマーカは環境によって変わります。
• 本質的に列挙すべきものなら、項目が一つだけでも構わないと思います。

これは説明される用語です（dt要素）

そしてこれは用語に対する説明です。（dd要素）

関連リストの入れ子について（dt要素）

質問（dt要素）

関連リストは入れ子にすることができますか？（dd要素）

回答（dt要素）

はい、関連リストは入れ子にすることができます。（dd要素）

一つのdt要素の後に二つのdd要素が続く場合（dt要素）

一つ目のdd要素はdt要素に対応します。（dd要素）

二つ目のdd要素もdt要素に対応します。（dd要素）

dt要素が二つ連続して出現する場合（dt要素）

dt要素が連続出現したらどうなる？（dt要素）

後に続くdd要素がそれぞれのdt要素に対応します。（dd要素）

dt要素とdd要素がそれぞれ連続して出現する場合（dt要素）

それぞれ連続出現するのは仕様で示されている？（dt要素）

dt要素とdd要素が両方連続する例は仕様に載っていません。（dd要素）

こういうマークアップが良いのか悪いのかは分かりません。（dd要素）

関連リストの用途

• 用語集は関連リストで決まりです。
• 手順をマークアップする例が仕様で示されています。
• 会話の表現に使うのは駄目みたいです。

関連リストの作り方

1. 始めにdl要素を記述します。
2. そしてdt要素を記述します。
3. 最後にdd要素を記述します。

まずは整形済みテキストの例：

<!DOCTYPE html>
<title>Sample HTML Document</title>

続いて画像の例：

例：これは強調された部分です。

例：これはさらに強調された部分です。（ネストしたem要素）

例：これは重要な部分です。

例：これはさらに重要な部分です。（ネストしたstrong要素）

例：これは細目です。

例：これは重要な細目です。（strong要素の中のsmall要素）

例：HTML5でsmall要素は再定義されました（HTML4では物理マークアップに使われます）。

例：これは不正確な部分です。

例：HTML5でs要素は再定義されました（HTML4では非推奨要素です）。

例：この文書はW3CのHTML5を参考にしています。

例：q要素は引用部分が短く、インラインで引用したい場合に使用されます。

例：マークアップ言語のHTML4はSGMLアプリケーションです。

例：マークアップ言語のXMLはSGMLのサブセットです。（abbr要素を含んだdfn要素）

例：代表的なマークアップ言語としてSGMLが挙げられます。

例：昼休みは12:00から始まります。

例：HAL9000は、映画では1992年1月12日に、小説では1997年1月12日に稼働状態に入りました。

例：COBOLのDISPLAY命令はCのprintf()関数に相当します。

例：引数のfooとbarはそれぞれコピー元とコピー先のファイル名で置き換えます。

例1：このプログラムは標準出力にhello, worldという文字列を出力します。

例：改行するにはEnterを押します。

例：困ったときはCtrl+Alt+Deleteで何とかします。（ネストしたkbd要素）

例：hostnameコマンドで調べたlocalhost.localdomainを入力して下さい。（samp要素を含んだkbd要素）

例1：私にはE=mc²という数式が理解できません。

例：座標(x₁₀, y₁₀)を設定しました。

例：彼は同じ名前空間のまま別の意味を持たせるなんて無理矢理だと思いました。

例：HTMLとTeXとではdevice indipendentの考え方が異なります。

例：現存する戦列艦はHMS Victoryだけです。（abbr要素を含んだi要素）

例：ポケットの中にあるどら焼きで体力を回復することが出来ます。

例：サーブのJAS39はグリペンの愛称で知られています。

例：訂正を意味する英単語はcollectではありません。

例：これはマークされた部分です。

例：これはルビを振られるテキスト（ルビとなるテキスト）です。

例：日本語では漢（かん）字（じ）、平（ひら）仮名（がな）、片（カタ）仮名（カナ）を使います。

例：ルビにはアルファベット(alphabet)を振っても構わないでしょう。

例：ルビは印刷用語に由来し、もともとは約5.5pt（ポイント）の活字のことをいいます。

例：ルビは対応していない環境で見ると、あまりエレガント（優美）ではありません。

例：これは双方向アルゴリズムを周囲から分離した部分です。

例：これは左から右へと表記するよう明示的に指定された部分です。（dir属性にltrを指定したbdo要素）

例：これは右から左へと表記するよう明示的に指定された部分です。（dir属性にrtlを指定したbdo要素）

例：これは何からの範囲として示された部分です。（title属性を持つspan要素）

例：色を意味する英単語の綴りは、イギリス英語ではcolourですが、アメリカ英語ではcolorです。（lang属性を持つspan要素）

例：ここは改行前です。
ここは改行後です。

例：www.example.org ※ピリオドの後にwbr要素があります。

例：ins要素にはflow contentを含めることが出来ます。ただし、場合によってはphrasing contentしか含めることが出来ません。

例：del要素には如何なる場合でもflow contentを含めることが出来ます。del要素にflow contentを含めることが出来ない場合もあります。

例：進捗中

例：進捗状況0パーセント

例：進捗状況50パーセント

例：進捗状況100パーセント

例：数量0

例：数量半分

例：数量最大