<?xml version="1.0" encoding="iso-2022-jp"?>
<?xml-stylesheet href="tutorial-html.ja.xsl" type="text/xsl" media="all"?>
<!DOCTYPE document [
  <!ENTITY html5.ns "http://www.w3.org/1999/xhtml">
  <!ENTITY xhtml1.ns "http://www.w3.org/1999/xhtml">
  <!ENTITY xhtml2.ns "http://www.w3.org/2002/06/xhtml2/">
  <!ENTITY tutorial.ns "http://suika.fam.cx/~wakaba/archive/2005/7/tutorial#">
  
  <!ATTLIST a xmlns CDATA "&html5.ns;">
  <!ATTLIST abbr xmlns CDATA "&html5.ns;">
  <!ATTLIST appendix xmlns CDATA "&tutorial.ns;">
  <!ATTLIST b xmlns CDATA "&tutorial.ns;">
  <!ATTLIST cite xmlns CDATA "&html5.ns;">
  <!ATTLIST code xmlns CDATA "&html5.ns;" xml:lang CDATA "en">
  <!ATTLIST cp xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST cssCode xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST dfn xmlns CDATA "&html5.ns;">
  <!ATTLIST div xmlns CDATA "&xhtml1.ns;">
  <!ATTLIST declaration xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST dl xmlns CDATA "&html5.ns;">
  <!ATTLIST ed xmlns CDATA "&tutorial.ns;">
  <!ATTLIST em xmlns CDATA "&html5.ns;">
  <!ATTLIST example xmlns CDATA "&tutorial.ns;">
  <!ATTLIST exercise xmlns CDATA "&tutorial.ns;">
  <!ATTLIST fig xmlns CDATA "&tutorial.ns;">
  <!ATTLIST h xmlns CDATA "&xhtml2.ns;">
  <!ATTLIST ha xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST he xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST htmlCode xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST i xmlns CDATA "&html5.ns;">
  <!ATTLIST iref xmlns CDATA "&tutorial.ns;">
  <!ATTLIST iw xmlns CDATA "&tutorial.ns;">
  <!ATTLIST keyPoints xmlns CDATA "&tutorial.ns;">
  <!ATTLIST keyword xmlns CDATA "&tutorial.ns;">
  <!ATTLIST lang-tag xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST li xmlns CDATA "&html5.ns;">
  <!ATTLIST m xmlns CDATA "&html5.ns;">
  <!ATTLIST markRef xmlns CDATA "&tutorial.ns;">
  <!ATTLIST miniColumn xmlns CDATA "&tutorial.ns;">
  <!ATTLIST ol xmlns CDATA "&html5.ns;">
  <!ATTLIST note xmlns CDATA "&tutorial.ns;">
  <!ATTLIST p xmlns CDATA "&html5.ns;">
  <!ATTLIST postamble xmlns CDATA "&tutorial.ns;">
  <!ATTLIST preamble xmlns CDATA "&tutorial.ns;">
  <!ATTLIST presection xmlns CDATA "&tutorial.ns;">
  <!ATTLIST q xmlns CDATA "&html5.ns;">
  <!ATTLIST quote xmlns CDATA "&tutorial.ns;">
  <!ATTLIST ruby xmlns CDATA "&xhtml1.ns;">
  <!ATTLIST section xmlns CDATA "&html5.ns;">
  <!ATTLIST span xmlns CDATA "&html5.ns;">
  <!ATTLIST snip xmlns CDATA "&tutorial.ns;">
  <!ATTLIST syntax xmlns CDATA "&tutorial.ns;">
  <!ATTLIST tag xmlns CDATA "&tutorial.ns;">
  <!ATTLIST todo xmlns CDATA "&tutorial.ns;">
  <!ATTLIST ul xmlns CDATA "&html5.ns;">
  <!ATTLIST unit-number xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST uri xmlns CDATA "&tutorial.ns;" xml:lang CDATA "en">
  <!ATTLIST var xmlns CDATA "&html5.ns;">
  <!ATTLIST weak xmlns CDATA "&tutorial.ns;">
  
  <!ATTLIST tree:root doc:nodeType CDATA "element">
  <!ATTLIST tree:node doc:nodeType CDATA "element">
  <!ATTLIST tree:leaf doc:nodeType CDATA "element">
  
  <!ENTITY css '<i xml:lang="en" doc:name="css"><abbr 
    title="Cascading Style Sheets">CSS</abbr></i>'>
  <!ENTITY this-document "この文書">
  <!ENTITY html '<i xml:lang="en" doc:name="html"><abbr 
    title="Hypertext Markup Language">HTML</abbr></i>'>
  <!ENTITY uri '<i xml:lang="en" doc:name="uri"><abbr 
    title="Uniform Resource Identifiers">URI</abbr></i>'>
  <!ENTITY web-pages '<i xml:lang="en" doc:name="web-page">Web 頁</i>'>
  <!ENTITY _xml-names '<i doc:name="xml-namespace"
        ><abbr xml:lang="en" title="Extensible Markup Language">XML</abbr>
        名前空間</i>'>
]>
<document xmlns="&tutorial.ns;"
    xml:lang="ja"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:doc="&tutorial.ns;"
    xmlns:tree="http://pc5.2ch.net/test/read.cgi/hp/1101043958/564"
    published-year="2005">
  
  <h>&web-pages;制作入門</h>
  
  <preamble>
    <p>&this-document;では、初めて &web-pages;を作ってみようという人を対象として、
    &web-pages;の記述に使用されている &html; と &css; 
    の基本を紹介します。</p>
    <p>&this-document;は読者が &web-pages;とはどのようなものか知っていること
    <weak>(<i xml:lang="en">Web</i> の利用経験があること)</weak> と、
    基本的な<i>ファイル</i>操作や<i>テキスト・ファイル</i
    >の編集の方法などが分かっていることを前提にしています。</p>
    
    <todo>
      <p>この辺の文章をもうちょっと何とかする。</p>
    </todo>
    
    <ed>
      <ul>
        <li>よい題名があれば、それを採用したい。</li>
        <li>2段組は、もう少しどうにかならないものか。</li>
        <li>文書型宣言、名前空間宣言、言語指定は HTML5 / XHTML5
        の規定に従って書き直すべき。 HTML5 vs XHTML5 の説明はどこに入れるのが適切か?
        (XHTML5 はいっそなくてもよい??)</li>
        <li>完成版では、章ごとに別の HTML 文書にした方がよい。</li>
      </ul>
    </ed>
    
    <ed>
      <p>この文書は、2005年の前半に書き始めた HTML と CSS
      の入門者のための手引きです。</p>
      <ul>
        <li>計算機の基本的な操作と概念は習得していることと、
        利用者としてはある程度 Web に関する知識を有することを読者に求めますが、
        Web 技術に関する知識はなくとも読めることを目指しています。</li>
        <li>文書には構造と表現があり、著者はそれを必要に応じて記述
        (マーク付けおよびスタイル付け) することで HTML + CSS
        が完成するとの立場を採っています。
        不思議マーク付け的解説のような表現一辺倒とも、
        いわゆるストリクター的解説のような構造・意味傾倒とも異なるものを目指しています。
        その具体的な手段として、 HTML と CSS を交互に解説する形を試みました。</li>
        <li>文書の構造こそが本質であって、タグはその serialization
        に過ぎないことが自然に理解できるように努めています。</li>
        <li>この文書は入門編であり、 HTML や CSS のすべてを網羅するどころか、
        ほんの一部分だけを厳選しています。今あるだけでもまだ多いかもしれません。
        続編として、 JavaScript, DOM, HTTP, URI, SVG, XBL2
        まで含めた Web 技術を (個別ではなく)
        体系的に習得できる文書群を整備することが望ましいと考えています。</li>
        <li>用語やプロトコル要素は、定義的部分にリンクし、
        読者がいつでも参照できるようにしています。</li>
        <li>各章には演習問題を用意し、すべてに解答例を載せています。</li>
      </ul>
      <p>著者はいろいろ忙しいので、当分の間続きの執筆の時間が取れません。
      勝手に続きを書いてくださる人がいれば、是非どうぞ。
      (suika.fam.cx の CVS 等を使いたければ w@suika.fam.cx
      までご連絡下さい。)</p>
    </ed>
  </preamble>
  
  <presection xml:id="guide">
    <h>&this-document;の流れ</h>
    <p>まず<iref section="paragraphs"/>で簡単な<i>文章</i
    >の例を取り上げながら &html; の考え方を学びます。 &html;
    の基本は<iref section="paragraphs">この章</iref>だけで理解できてしまいます。
    残りの章は順番に読み進めていただいても構いませんし、
    必要な章だけを選んで読んでいただいても構いません。</p>
    <p><iref section="lists"/>、<iref section="phrases"/>、
    <iref section="hyperlinks"/>では普段よく使われる表現が &html;
    でどう表されるのかを学びます。<iref section="text-decorations"
    />では<i>文章</i>の見た目を指定する方法を学びます。</p>
    <p><iref section="sections"/>、<iref section="tables"/>、
    <iref section="box-model"/>、<iref section="styling-lists"/>、
    <iref section="xphrases"/>、<iref section="extension"/>、
    <iref section="selectors"/>は内容を分かりやすく、効果的に、
    そして魅力的に伝えるための様々な技法を学びます。</p>
    <p><iref section="next-steps"/>では、&this-document;の内容に満足され、
    次のステップへ進まれたい方のために、秀逸で参考になる <i doc:name="web-site"
    xml:lang="en">Web サイト</i>を紹介しています。
    <iref section="appendix-notes"/>では、
    本文を理解する上で参考になると思われることを説明しています。
    各章の途中で案内があった部分に目を通してみてください。</p>
    <p>各章の最後には、理解をより深めるための演習問題を用意しています。
    すべての問題に<iref section="answers"/>に解答例を用意しています。</p>
    <p>最後に<iref section="index"/>を用意しています。また、
    本文中でも以前に出てきた単語は最初に出た場所に<i xml:lang="ja"
    >リンク</i>しています。<weak>(マウス・ポインタを乗せると、<q xml:lang="ja"
    >ヘルプ</q>の形になります。)</weak> 用語の意味が分からなくなった時はもう
    1度戻って読み直してみてください。</p>
  </presection>
  
  <presection xml:id="toc">
    <h>目次</h>
    <insert content="toc"/>
  </presection>
    
  <presection xml:id="toc-detail">
    <h>詳細目次</h>
    <insert content="toc-detail"/>
  </presection>
    
  <presection xml:id="figures">
    <h>図表一覧</h>
    <insert content="list-of-figures"/>
  </presection>
    
  <presection xml:id="columns">
    <h>コラム一覧</h>
    <insert content="list-of-columns"/>
  </presection>
    
  <presection xml:id="keypoints">
    <h><q>まとめ</q>拾い読み</h>
    <insert content="list-of-keypoints"/>
  </presection>
  
  <presection xml:id="copyright-notice">
    <h>著作権に関しての注釈</h>
    <insert content="gnu-fdl-summary"/>
  </presection>
  
  <section xml:id="paragraphs">
    <h><i>文章</i>の<i>マーク付け</i></h>
    <keyword><i>段落</i></keyword>
    <keyword><i>見出し</i></keyword>
    <keyword><i>題名</i></keyword>
    
    <preamble>
      <p><iw name="web-page" key="ヱブ・ページ"
      en="Web page" xml:lang="en">Web <ruby><rb>頁</rb><rt>ページ</rt
      ></ruby></iw>は、普通 <dfn xml:lang="en" doc:name="html"><abbr 
      title="Hypertext Markup Language">HTML</abbr></dfn>
      (<dfn xml:lang="en" doc:name="hypertext-markup-language"><em
      class="abbr">H</em>yper<em class="abbr"
      >t</em>ext <em class="abbr">M</em>arkup <em class="abbr">L</em>anguage</dfn> :
      ハイパーテキスト・マーク付け言語) とよばれる<iw name="markup-language"
      key="マークづけ・げんご">マーク付け言語</iw>で記述します。</p>
    
      <p><q>ハイパー<em>テキスト</em></q>という名前からも分かるように、
      &html; では<iw name="bunshou" key="ぶんしょう">文章</iw
      >が基本となります。この章では、 &html;
      で<i>文章</i>をどのように記述するのかをみていきます。</p>
    </preamble>
    
    <section xml:id="paragraphs-analysis">
      <h><i>文章</i>の構造の分析</h>
      
      <p>わたしたちは日頃、様々な<i>文章</i>を読んだり書いたりします。
      普段あまり意識することはないかもしれませんが、
      <i>文章</i>は単なる<i>文字</i>や図形の羅列ではなく、
      何らかの構造により整理されています。その構造を通して<i>著者</i
      >が伝えたいことを表現したり、<i>読者</i>がそれを理解したりするのです。
      もちろん &html; を使って記述する<i>ハイパーテキスト</i>も、
      その例外ではありません。そこで、<iref quote="paragraphs-6th-example"
      >簡単な例文</iref>を通して<i>文章</i
      >が持つ構造を理解することからはじめましょう。</p>
      
      <note>
        <p><q><i>ハイパーテキスト</i></q>の一体何が<q>ハイパー</q>なのかは、
        <iref section="hyperlinks"/>で明らかになります。
        それまでは<q>ハイパー</q>でない普通な話が続きますが、
        ご容赦ください。</p>
      </note>
      
      <quote xml:id="paragraphs-6th-example">
        <quoteBody>
          <h doc:markName="paragraphs-6th-example-h1">第六夜</h>
          <b doc:markName="paragraphs-6th-example-b1">
          <p doc:markName="paragraphs-6th-example-p1"
          >運慶が護国寺の山門で仁王を刻んでいると云う評判だから、
          散歩ながら行って見ると、自分より先にもう大勢集まって、
          しきりに下馬評をやっていた。</p>
          <p doc:markName="paragraphs-6th-example-p2"
          >山門の前五六間の所には、大きな赤松があって、
          その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。
          松の緑と朱塗の門が互いに照り合ってみごとに見える。
          その上松の位地が好い。門の左の端を眼障にならないように、
          斜に切って行って、
          上になるほど幅を広く屋根まで突出しているのが何となく古風である。
          鎌倉時代とも思われる。</p>
          <p doc:markName="paragraphs-6th-example-p3"
          >ところが見ているものは、みんな自分と同じく、明治の人間である。
          その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。</p>
          <doc:snip doc:markName="paragraphs-6th-example-p4"
          />
          <p doc:markName="paragraphs-6th-example-p5"
          >自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、
          仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。
          三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、
          どれもこれも仁王を蔵しているのはなかった。
          ついに明治の木にはとうてい仁王は埋っていないものだと悟った。
          それで運慶が今日まで生きている理由もほぼ解った。</p>
          </b>
        </quoteBody>
        <quoteCredit>
          <dc:title>夢十夜</dc:title>
          <dc:creator>夏目漱石</dc:creator>
          <!-- 出典: <http://www.aozora.gr.jp/cards/000148/files/799_14972.html> -->
        </quoteCredit>
      </quote>
      
      <p>まず<markRef mark="paragraphs-6th-example-h1">最初の<q>第六夜</q
      >の部分</markRef>。
      これは<markRef mark="paragraphs-6th-example-b1">以後の<i>文章</i></markRef
      >を短く説明した<dfn doc:name="heading" doc:en="heading" doc:key="みだし"
      >見出し</dfn> <weak>(あるいは<iw name="title" en="title" key="だいめい"
      >題名</iw>)</weak> として機能しています。</p>
      
      <p>次の<markRef mark="paragraphs-6th-example-p1"><q>運慶が<doc:snip
      />やっていた。</q></markRef>
      の部分。これは<i>文章</i>の内容の一単位である<dfn doc:name="paragraph"
      doc:en="paragraph" doc:key="だんらく">段落</dfn>です。
      日本語の<i>文章</i>の印刷の慣習では、<i>段落</i>の最初の<i>行</i
      >は1<i>文字</i>分<iw
      name="indent" en="indentation" key="じさげ">字下げ</iw>し、
      <i>段落</i>と<i>段落</i>の間では<i>行</i>を改めることになっています。</p>
      
      <p>そしてその次の<markRef mark="paragraphs-6th-example-p2"
      ><q>山門の</q>で始まる部分</markRef>も同じく<i>段落</i>のようです。
      という調子で考えていくと、この<i>文章</i
      >の構造は<iref fig="paragraphs-example-tree-prose"
      />のようにまとめることができます。</p>
      
      <fig xml:id="paragraphs-example-tree-prose">
        <figBody>
          <tree:root>
            <tree:content><i>文章</i></tree:content>
            <tree:leaf><i>見出し</i> <q>第六夜</q></tree:leaf>
            <tree:leaf><i>段落</i> <q>運慶が<doc:snip/></q></tree:leaf>
            <tree:leaf><i>段落</i> <q>山門の<doc:snip/></q></tree:leaf>
            <tree:leaf><i>段落</i> <q>ところが<doc:snip/></q></tree:leaf>
            <tree:leaf><i>段落</i> <q>自分は<doc:snip/></q></tree:leaf>
          </tree:root>
          <note>
            <p>以後、<markRef mark="paragraphs-6th-example-p4"
            >途中の省略の部分</markRef>は無視しています。</p>
          </note>
        </figBody>
        <caption><dc:title>第六夜</dc:title>の構造</caption>
      </fig>
      
      <p>つまり、この<i>文章</i>は5つの<dfn doc:name="element"
      doc:en="element" doc:key="ようそ">要素</dfn
      >から構成されていると考えることができます。そして<q><i>見出し</i></q
      >や<q><i>段落</i></q>というのはこの5つの<i>要素</i>の種類 (分類)
      だといえます。<i>要素</i>の種類のことを、<dfn doc:name="element-type"
      doc:en="element type" doc:key="ようそがた">要素型</dfn>といいます。</p>
      
      <keyPoints>
        <li><i>文章</i>は<i>要素</i>で構成されます。</li>
        <li><i>要素</i>の種類を<i>要素型</i>といいます。</li>
      </keyPoints>
    </section>
    
    <section xml:id="paragraphs-element-types">
      <h><i>文章</i>の構造と<i>要素型名</i></h>
      
      <p>ところで、<iref section="paragrahs-analysis">前の節</iref
      >では<i>要素型</i>として<q
      ><i>見出し</i></q>や<q><i>段落</i></q>という言葉を使いましたが、
      <q><i>見出し</i></q>とよく似た言葉に<q>題 (名)</q>があります。
      ですから、<q>第六夜</q>の部分を<q>題名</q>と分類しても間違いとは言えません。
      <q><i>段落</i></q>もアメリカ人が見たら <q xml:lang="en">paragraph</q>
      だと言うかもしれません。もちろんそれも間違いとは言えません。</p>
      
      <p>しかし、<q><i>見出し</i></q>と呼ぼうが<q>題名</q>と呼ぼうが、
      <q>第六夜</q>の3文字のこの<i>文章</i>における位置付けは変わりません。
      変わりないのならどちらで呼んでも良いように思うかもしれませんが、
      どちらでも良いことにしてしまうと、今度は<q>それなら<q xml:lang="en">タイトル</q
      >と呼んでも変わらないよね</q>などと言い出す人が出てくるかもしれません。
      そうすると収拾が付かなくなります。</p>
      
      <p>そこで、<q><i>見出し</i></q>や<q><i>段落</i></q
      >などの<i>文章</i>を構成する<i>要素</i>の種類 (<i>要素型</i>) 
      に共通の<i>名前</i> (<dfn doc:name="element-type-name"
      doc:en="element type name" doc:key="ようそ・がた・めい">要素型名</dfn>)
      を決めておくと便利です。そのような<i>名前</i>群の一種が &html;
      です。 &html; では、 <q><i>見出し</i></q>を <dfn
      doc:name="html-h1"><he>h1</he></dfn> と呼び、 <q><i>段落</i></q>は <dfn
      doc:name="html-p"><he>p</he></dfn> と呼びます。</p>
      
      <note>
        <p>実は<q><i>見出し</i></q>を表す &html; の<i>要素型</i>には <he>h1</he>
        の他に <he>h2</he>, <he>h3</he>, <he>h4</he>, <he>h5</he>, <he>h6</he>
        があります。この数字にどんな意味があるのかは、
        <iref section="sections"/>で説明します。</p>
      </note>
      
      <p>&html; の<i>要素型</i>を使って<iref
      fig="paragraphs-example-tree-prose">先程の図</iref>を書き直すと、
      <iref fig="paragraphs-example-tree-html"/>のようになります。</p>
      
      <fig xml:id="paragraphs-example-tree-html">
        <figBody>
          <tree:root>
            <tree:content doc:markName="paragraphs-example-tree-html-text"
            ><i>文章</i></tree:content>
            <tree:leaf><he>h1</he> <q>第六夜</q></tree:leaf>
            <tree:leaf><he>p</he> <q>運慶が<doc:snip/></q></tree:leaf>
            <tree:leaf><he>p</he> <q>山門の<doc:snip/></q></tree:leaf>
            <tree:leaf><he>p</he> <q>ところが<doc:snip/></q></tree:leaf>
            <tree:leaf><he>p</he> <q>自分は<doc:snip/></q></tree:leaf>
          </tree:root>
        </figBody>
        <caption><dc:title>第六夜</dc:title>の構造 (&html; <i>要素型</i>)</caption>
      </fig>
      
      <keyPoints>
        <li>&html; は<i>要素型</i>の<i>名前</i>
        (<i>要素型名</i>) を決めています。</li>
        <li><he>h1</he> は<q><i>見出し</i></q>を意味する<i>要素型名</i>です。</li>
        <li><he>p</he> は<q><i>段落</i></q>を意味する<i>要素型名</i>です。</li>
      </keyPoints>
    </section>
    
    <section xml:id="paragraphs-markup">
      <h><i>文章</i>の構造のマーク付け</h>
      
      <p>さて、ここまで<i>文章</i>の構造を調べてきて、
      <i>文章</i>の内容を <he>h1</he> (<i>見出し</i>)
      や <he>p</he> (<i>段落</i>) の<iw
      name="element" key="ようそ">要素</iw>に分けることができました。
      <q><i>見出し</i></q>や<q><i>段落</i></q>なんて何を当たり前なことを、
      と思われたかもしれません。しかし、
      機械は文を読んで意味を理解することができませんから、
      どこからどこまでが<i>見出し</i>で、どこからどこまでが<i>段落</i>なのか、
      誰かが教えてやらなければ分からないのです。そして、
      それを分からせるための印 (<dfn doc:name="mark"
      doc:en="markup">マーク</dfn>) を付けることこそが<dfn
      doc:name="mark-up" doc:en="mark up" doc:key="マークづけ">マーク付け</dfn>
      (&html; の <q xml:lang="en">M</q>) なのです。</p>
      
      <note>
        <p><i>マーク付け</i>の意義と必要性については、
        <iref section="appendix-notes"/>でも説明しています。
        興味のある方はこの章を一通り読まれた後、<iref section="appendix-why-markup"
        />をご覧下さい。</p>
      </note>
      
      <p>&html; の<i>マーク付け</i>はとても簡単です。<i>要素</i>のはじめには
        <syntax><htmlCode><tag>&lt;<var xml:lang="ja"><i>要素型名</i></var
        >&gt;</tag></htmlCode></syntax>
      と書きます。これを<dfn doc:name="start-tag"
      doc:en="start tag" doc:key="かいし・タグ">開始タグ</dfn>といいます。
      <i>要素</i>の終わりには
        <syntax><htmlCode><tag>&lt;/<var xml:lang="ja"><i>要素型名</i></var
        >&gt;</tag></htmlCode></syntax>
      と書きます。これを<dfn doc:name="end-tag"
      doc:en="end tag" doc:key="しゅうりょう・タグ">終了タグ</dfn>といいます。
      つまり、 <he>h1</he> (<i>見出し</i>) <i>要素</i>のはじめには 
      <htmlCode><tag>&lt;<he>h1</he>&gt;</tag></htmlCode> と書き、終わりには
      <htmlCode><tag>&lt;/<he>h1</he>&gt;</tag></htmlCode>
      と書きます。 <he>p</he> (<i>段落</i>) <i>要素</i>のはじめには 
      <htmlCode><tag>&lt;<he>p</he>&gt;</tag></htmlCode> と書き、終わりには 
      <htmlCode><tag>&lt;/<he>p</he>&gt;</tag></htmlCode>
      と書きます。なお、<i>開始タグ</i>と<i>終了タグ</i>をあわせて<dfn
      doc:name="tag" doc:en="tag" doc:key="タグ">タグ</dfn>といいます。</p>
      
      <p>先程の例文を<i>マーク付け</i>する <weak>(<i>タグ</i>を書き加える)</weak> と、
      <iref fig="paragraphs-markup-result-1"/>のようになります。</p>
      
      <example xml:id="paragraphs-markup-result-1">
        <caption><dc:title>第六夜</dc:title>の<i>マーク付け</i>結果</caption>
        <figBody><htmlCode xml:space="preserve"><!--
              --><m><tag>&lt;<he>h1</he>></tag></m>第六夜<m><tag>&lt;/<he>h1</he>></tag></m>
<!--          --><m><tag>&lt;<he>p</he>></tag></m>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、
<!--          -->散歩ながら行って見ると、自分より先にもう大勢集まって、
<!--          -->しきりに下馬評をやっていた。<m><tag>&lt;/<he>p</he>></tag></m>
<!--          --><m><tag>&lt;<he>p</he>></tag></m>山門の前五六間の所には、大きな赤松があって、
<!--          -->その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。
<!--          -->松の緑と朱塗の門が互いに照り合ってみごとに見える。
<!--          -->その上松の位地が好い。門の左の端を眼障にならないように、
<!--          -->斜に切って行って、
<!--          -->上になるほど幅を広く屋根まで突出しているのが何となく古風である。
<!--          -->鎌倉時代とも思われる。<m><tag>&lt;/<he>p</he>></tag></m>
<!--          --><m><tag>&lt;<he>p</he>></tag></m>ところが見ているものは、みんな自分と同じく、明治の人間である。
<!--          -->その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。<m><tag>&lt;/<he>p</he>></tag></m>
<!--          --><m><tag>&lt;<he>p</he>></tag></m>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、
<!--          -->仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。
<!--          -->三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、
<!--          -->どれもこれも仁王を蔵しているのはなかった。
<!--          -->ついに明治の木にはとうてい仁王は埋っていないものだと悟った。
<!--          -->それで運慶が今日まで生きている理由もほぼ解った。<m><tag>&lt;/<he>p</he>></tag></m><!--
        --></htmlCode></figBody>
      </example>
      
      <keyPoints>
        <li><i>要素</i>のはじめは<i>開始タグ</i> (<htmlCode><tag
        >&lt;<var xml:lang="ja"
        ><i>要素型名</i></var>&gt;</tag></htmlCode>)
        で表します。</li>
        <li><i>要素</i>の終わりは<i>終了タグ</i>
        (<htmlCode><tag>&lt;/<var xml:lang="ja"><i>要素型名</i></var
        >&gt;</tag></htmlCode>) で表します。</li>
      </keyPoints>
    </section>
    
    <section xml:id="paragraphs-page">
      <h><i doc:name="web-page"><span xml:lang="en">Web</span> 頁</i>全体の構造</h>
      
      <p>さて、ここまであえて無視してきましたが、まだ一つ問題が残っています。
      <iref fig="paragraphs-example-tree-html">構造の図</iref
      >をもう一度見てください。</p>
      
      <doc:figClone of="paragraphs-example-tree-html"/>
      
      <p><q><i>見出し</i></q>や<q><i>段落</i></q>を &html; では 
      <he>h1</he> や <he>p</he> という名前で呼ぶことは分かりました。
      では、<markRef mark="paragraphs-example-tree-html-text"
      >その上にある<q><i>文章</i></q></markRef>、
      これは一体どうすればよいのでしょうか。</p>
      
      <p>実は &html; では (これから説明していくような) 色々なものを扱えるように、
      もう少し複雑な構造を採用しています。<iref 
      fig="paragraphs-example-tree-html-full"/>を見てください。</p>
      
      <fig xml:id="paragraphs-example-tree-html-full">
        <figBody>
          <tree:root doc:markName="paragraphs-example-tree-html-full-html">
            <tree:content><he>html</he></tree:content>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            doc:markName="paragraphs-example-tree-html-full-lang"
            ><ha>lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q></tree:leaf>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            doc:markName="paragraphs-example-tree-html-full-xml-lang"
            ><ha>xml:lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q
            ></tree:leaf>
            <tree:node doc:markName="paragraphs-example-tree-html-full-head">
              <tree:content><he>head</he></tree:content>
              <tree:leaf doc:markName="paragraphs-example-tree-html-full-title"
              ><he>title</he> <q>『夢十夜』より「第六夜」</q></tree:leaf>
            </tree:node>
            <tree:node doc:markName="paragraphs-example-tree-html-full-body">
              <tree:content><he>body</he></tree:content>
              <tree:leaf><he>h1</he> <q>第六夜</q></tree:leaf>
              <tree:leaf><he>p</he> <q>運慶が<doc:snip/></q></tree:leaf>
              <tree:leaf><he>p</he> <q>山門の<doc:snip/></q></tree:leaf>
              <tree:leaf><he>p</he> <q>ところが<doc:snip/></q></tree:leaf>
              <tree:leaf><he>p</he> <q>自分は<doc:snip/></q></tree:leaf>
            </tree:node>
          </tree:root>
        </figBody>
        <caption><dc:title>第六夜</dc:title>の &html; 構造 (完全)</caption>
      </fig>
      
      <p><i>文章</i>の<markRef mark="paragraphs-example-tree-html-full-body"
      ><dfn doc:name="body" doc:en="body"
      doc:key="ほんぶん">本文</dfn>全体</markRef>を表す<i>要素</i>の<i>要素型</i
      >を &html; では
      <dfn doc:name="html-body"><he>body</he></dfn> といいます。</p>
      
      <p>その <markRef mark="paragraphs-example-tree-html-full-body"><he>body</he
      ></markRef> と <markRef mark="paragraphs-example-tree-html-full-head"
      ><he>head</he></markRef> や <markRef 
      mark="paragraphs-example-tree-html-full-lang"><ha>lang</ha></markRef> や
      <markRef mark="paragraphs-example-tree-html-full-xml-lang"><ha>xml:lang</ha
      ></markRef> <weak>(後述)</weak> の上の階層にあたる
      <markRef mark="paragraphs-example-tree-html-full-html"><dfn 
      doc:name="html-html"><he>html</he></dfn></markRef> は、
      <i>文書</i>全体を表す<i>要素型</i>です。<dfn doc:name="document"
      doc:en="document" doc:key="ぶんしょ">文書</dfn
      >というのは<i>情報</i>を表現するひとまとまりの集合体です。
      <q>遠足のお知らせ</q>や<q>旅行の記念写真</q>や<q
      >7月の家計簿</q>などが<i>文書</i>の例です。
      そしてここまで扱ってきた<q><dc:title>夢十夜</dc:title>の第六夜</q
      >も1つの<i>文書</i>です。</p>
      
      <note>
        <p><q><iw name="document" en="document" key="ぶんしょ"
        ><ruby><rb>文書</rb><rt>ぶんしょ</rt
        ></ruby></iw></q>と<q><iw
        name="bunshou" key="ぶんしょう"><ruby><rb>文章</rb><rt>ぶんしょう</rt
        ></ruby></iw></q>は、
        よく似ていますが違う言葉ですので注意して下さい。
        <q>文書</q>は専門用語ですが、<q>文章</q>は一般的な意味で使っています。</p>
      </note>
      
      <note>
        <p><i>文書</i>という意味の<i>要素型名</i>がなぜ &html; では <he>html</he>
        なのでしょうか? <i>文書</i>という意味の英語の <q xml:lang="en">document</q>
        の方が分かりやすそうです。</p>
        <p>実は <he>html</he> という<i>要素型名</i
        >が選ばれたのに深い理由はありません。
        かといって後から名前を変えてしまうと混乱してしまうので、
        おかしな<i>要素型名</i>がそのまま使われているのです。</p>
      </note>
      
      <p><markRef mark="paragraphs-example-tree-html-full-body"><he>body</he
      ></markRef> の前にある <markRef 
      mark="paragraphs-example-tree-html-full-head"><dfn doc:name="html-head"
      ><he>head</he></dfn></markRef> は、<i>文書</i>に関する情報を持っている<i
      >要素</i> (<dfn doc:name="header" doc:en="header" doc:key="かしら"
      ><ruby><rb>頭</rb><rt>かしら</rt></ruby></dfn>) です。
      その中に <markRef mark="paragraphs-example-tree-html-full-title"
      ><dfn doc:name="html-title"><he>title</he></dfn>
      という<i>要素</i></markRef>がありますが、これは<i>文書</i>の題名
      (タイトル) です。題名には<i>文書</i
      >全体を一行程度でまとめるに相応しい言葉を選びます。
      &html; では、<em>すべての<i>文書</i>が必ず1つ題名 (<he>title</he>)
      を持つ</em>ことになっています。</p>
      
      <note>
        <p><q><he>head</he></q> は<q>頭</q>、 <q><he>body</he></q> は<q
        >体</q>という意味です。
        &html; に限らず色々なところで、<i>文書</i
        >を動物の体に模した表現が使われています。</p>
      </note>
      
      <p><markRef mark="paragraphs-example-tree-html-full-head"><i>頭</i> 
      (<he>head</he>)</markRef> の前にある <markRef 
      mark="paragraphs-example-tree-html-full-lang"><dfn
      doc:name="html-attr-lang"><ha>lang</ha></dfn></markRef> と
      <markRef mark="paragraphs-example-tree-html-full-xml-lang"
      ><dfn doc:name="html-attr-xml:lang"><ha>xml:lang</ha></dfn></markRef>
      は<i>要素</i>ではなく、<dfn doc:name="attribute"
      doc:en="attribute" doc:key="ぞくせい">属性</dfn>といいます。
      <i>属性</i>はその上位にある<i>要素</i> (ここでは<i>文書</i>を表す
      <he>html</he> <i>要素</i>) に関する情報を提供します。
      この2つの<i>属性</i>はどちらも<iw name="language"
      en="language" key="げんご">言語</iw>を表します。
      <dfn doc:name="attribute-value" doc:en="attribute value"
      doc:key="ぞくせい・ち">属性値</dfn>は 
      <dfn doc:name="lang-ja"><lang-tag>ja</lang-tag></dfn>
      となっていますが、これは<q>日本語</q>という意味です。
      つまり、<q>この<i>文書</i>は日本語で書かれています</q>と説明しているのが
      <ha>lang</ha> <i>属性</i>と <ha>xml:lang</ha> <i>属性</i>なのです。
      </p>
      
      <note>
        <p><q><i>言語</i></q>を表すという同じ目的で <ha>lang</ha> と
        <ha>xml:lang</ha> の2つの<i>属性</i
        >があるのは歴史的な事情によるものです。</p>
        <p>ある時新しい仕組みができたとしても、
        世界中のシステムが瞬時に新しいものに置き換わるわけではありませんから、
        どちらにも対応できるようにと、この2つの<i>属性</i>の場合のように、
        両方併用しなければならないことがよくあります。</p>
      </note>
      
      <p>それではこの完全な構造に基づきもう一度、<iref section="paragraphs-markup"
      />で行ったように<i>マーク付け</i>してみましょう。
      <i>開始タグ</i>と<i>終了タグ</i>を<i>要素</i
      >の中身を囲むように書き足していくのは同じですが、
      今度は<i>属性</i>もあります。<i>属性</i>は、
      所属している <weak>(すぐ上の階層の)</weak> <i>要素</i>の<iw
      name="start-tag" key="かいし・タグ">開始タグ</iw>に
        <syntax><htmlCode><var xml:lang="ja"><i>属性名</i></var
        >="<var xml:lang="ja"><i>属性値</i></var>"</htmlCode></syntax>
      という形式で記述します。</p>
      
      <example xml:id="paragraphs-markup-result-2">
        <caption><dc:title>第六夜</dc:title>のマーク付け結果 (全体)</caption>
        <figBody><htmlCode xml:space="preserve"><!--
              --><m><tag>&lt;<he>html</he> <ha>lang</ha>="<i><lang-tag>ja</lang-tag
            ></i
                   >" <ha>xml:lang</ha>="<i><lang-tag>ja</lang-tag
            ></i>"></tag></m>
<!--          -->  <m><tag>&lt;<he>head</he>></tag></m>
<!--          -->    <m><tag>&lt;<he>title</he>></tag><span
                 xml:lang="ja">『夢十夜』より「第六夜」</span
                 ><tag>&lt;/<he>title</he>></tag></m>
<!--          -->  <m><tag>&lt;/<he>head</he>></tag></m>
<!--          -->  <m><tag>&lt;<he>body</he>></tag></m>
<!--          -->    <tag>&lt;<he>h1</he>></tag>第六夜<tag>&lt;/<he>h1</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、
<!--          -->    散歩ながら行って見ると、自分より先にもう大勢集まって、
<!--          -->    しきりに下馬評をやっていた。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>山門の前五六間の所には、大きな赤松があって、
<!--          -->    その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。
<!--          -->    松の緑と朱塗の門が互いに照り合ってみごとに見える。
<!--          -->    その上松の位地が好い。門の左の端を眼障にならないように、
<!--          -->    斜に切って行って、
<!--          -->    上になるほど幅を広く屋根まで突出しているのが何となく古風である。
<!--          -->    鎌倉時代とも思われる。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>ところが見ているものは、みんな自分と同じく、明治の人間である。
<!--          -->    その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、
<!--          -->    仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。
<!--          -->    三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、
<!--          -->    どれもこれも仁王を蔵しているのはなかった。
<!--          -->    ついに明治の木にはとうてい仁王は埋っていないものだと悟った。
<!--          -->    それで運慶が今日まで生きている理由もほぼ解った。<tag>&lt;/<he>p</he>></tag>
<!--          -->  <m><tag>&lt;/<he>body</he>></tag></m>
<!--          --><m><tag>&lt;/<he>html</he>></tag></m><!--
        --></htmlCode></figBody>
      </example>
      
      <keyPoints>
        <li><i>文書</i> (<he>html</he>) は<i doc:name="header">頭</i> (<he>head</he>)
        と<i>本文</i> (<he>body</he>) で構成されます。</li>
        <li><i doc:name="header">頭</i> (<he>head</he>) には<i>題名</i>
        (<he>title</he>) が含まれます。</li>
        <li><i>本文</i> (<he>body</he>) には<i>見出し</i> (<he>h1</he>) 
        や<i>段落</i> (<he>p</he>) が含まれます。</li>
        <li><i>文書</i> (<he>html</he>) には<i>言語</i>
        (<ha>lang</ha>, <ha>xml:lang</ha>) <i>属性</i>があります。</li>
        <li><i>属性</i>は<i>開始タグ</i>内に 
          <htmlCode><var xml:lang="ja"><i>属性名</i></var>="<var xml:lang="ja"
          ><i>属性値</i></var>"</htmlCode>
        の形で記述します。</li>
      </keyPoints>
      
      <miniColumn xml:id="paragraphs-heading-title">
        <caption>見出しと題名</caption>
        <p><i>題名</i> (<he>title</he>) は<i>文書</i
        >を簡単にまとめたものだと説明しました。
        これと同じような<i>要素型</i>を前にも紹介しました。
        <i>見出し</i> (<he>h1</he>) です。<i>題名</i>と<i>見出し</i
        >は何が違うのでしょうか。</p>
        <p><i>見出し</i> (<he>h1</he>) は、<i>本文</i>
        (<he>body</he>) を構成する一部分となります。それに対して<i>題名</i
        > (<he>title</he>) は<i>本文</i> (<he>body</he>) の一部ではなく、
        <i>文書</i>全体のラベルのような働きをします。
        本の題名やビデオ・テープのラベルを思い浮かべるとよいかもしれません。
        一般に<i>題名</i
        >はそれだけを取り出しても最低限の意味が通じるものがよいとされています。</p>
        <p>ただ、<i>題名</i>も<i>見出し</i>もどちらも似たようなものなので、
        必然的に同じになってしまうこともあります。例えば欧州を旅行した感想を述べた<i
        >文書</i>は<i>題名</i>も<i>見出し</i>も<q>欧州旅行記</q
        >となるかもしれません。</p>
      </miniColumn>
    </section>
    
    <section xml:id="paragraphs-doctype">
      <h>&html; <i>文書</i>のしるし</h>
      
      <p>いよいよ最後の仕上げです。<i>文書</i>には &html;
      に限らず色々な表現方法があります。その中で &html;
      を採用したと示すために2つの<ruby><rb>印</rb><rt>しるし</rt></ruby
      >をつける必要があります。</p>
      
      <p>1つ目は<dfn doc:name="doctype-declaration"
      doc:en="document type declaration" doc:key="ぶんしょ・がた・せんげん"
      >文書型宣言</dfn>で、 &html; <i>文書</i>の最初には必ず
        <syntax><declaration>&lt;!<dfn doc:name="html-doctype"><code>DOCTYPE</code
        ></dfn> <he>html</he>></declaration></syntax>
      と書きます。<i>タグ</i>と似ていますが、<i>タグ</i>とは違って何かの<i>要素</i
      >を表すのではなく、<q>これは &html; で書かれています</q
      >という宣言になります。</p>
      
      <note>
        <p><i>文書型宣言</i>は <iw name="sgml"><abbr
        xml:lang="en" title="Standard Generalized Markup Language">SGML</abbr></iw>
        に由来し、<i>マーク付け言語</i>の規約を<iw name="document-type-definition"
        en="document type definition" key="ぶんしょ・がた・ていぎ"
        >文書型定義</iw>として<i>形式的</i>に記述するために使われていました。</p>
      </note>
      
      <p>2つ目は<dfn doc:name="namespace-attribute"
      doc:en="namespace attribute" doc:key="なまえくうかん・ぞくせい"
      >名前空間属性</dfn>で、 <he>html</he> <i>要素</i>の特別な<i>属性</i
      >として
        <syntax><htmlCode><dfn doc:name="html-attr-xmlns"><ha>xmlns</ha></dfn
        >="<dfn doc:name="html-xmlns-uri"><uri>http://www.w3.org/1999/xhtml</uri
        ></dfn
        >"</htmlCode></syntax>
      と書きます。</p>
      
      <note>
        <p><i>名前空間属性</i>は <iw name="xml-namespace"
        en="XML namespace" key="エックス・エム・エル・なまえくうかん"
        ><abbr xml:lang="en" title="Extensible Markup Language">XML</abbr>
        名前空間</iw>という仕様の一部で、<i>要素型名</i
        >を大域的に一意に識別するためなどに使います。
        詳しくは<iref section="extension-xml-names"/>で紹介します。</p>
      </note>
      
      <p>完成した &html; <i>文書</i>はこうなります。</p>
      
      <example xml:id="paragraphs-markup-result-3">
        <caption><dc:title>第六夜</dc:title>のマーク付け結果 (完成)</caption>
        <figBody><htmlCode xml:space="preserve"><!--
              --><m><declaration>&lt;!<i>DOCTYPE</i> <he>html</he>></declaration
              ></m>
<!--          --><tag>&lt;<he>html</he> <ha>lang</ha>="<i><lang-tag>ja</lang-tag
            ></i
                     >" <ha>xml:lang</ha>="<i><lang-tag>ja</lang-tag
            ></i>"
<!--          -->    <m><ha>xmlns</ha>="<i><uri>http://www.w3.org/1999/xhtml</uri></i
                     >"</m>></tag>
<!--          -->  <tag>&lt;<he>head</he>></tag>
<!--          -->    <tag>&lt;<he>title</he>></tag>『夢十夜』より「第六夜」<tag>&lt;/<he>title</he>></tag>
<!--          -->  <tag>&lt;/<he>head</he>></tag>
<!--          -->  <tag>&lt;<he>body</he>></tag>
<!--          -->    <tag>&lt;<he>h1</he>></tag>第六夜<tag>&lt;/<he>h1</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、
<!--          -->    散歩ながら行って見ると、自分より先にもう大勢集まって、
<!--          -->    しきりに下馬評をやっていた。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>山門の前五六間の所には、大きな赤松があって、
<!--          -->    その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。
<!--          -->    松の緑と朱塗の門が互いに照り合ってみごとに見える。
<!--          -->    その上松の位地が好い。門の左の端を眼障にならないように、
<!--          -->    斜に切って行って、
<!--          -->    上になるほど幅を広く屋根まで突出しているのが何となく古風である。
<!--          -->    鎌倉時代とも思われる。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>ところが見ているものは、みんな自分と同じく、明治の人間である。
<!--          -->    その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、
<!--          -->    仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。
<!--          -->    三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、
<!--          -->    どれもこれも仁王を蔵しているのはなかった。
<!--          -->    ついに明治の木にはとうてい仁王は埋っていないものだと悟った。
<!--          -->    それで運慶が今日まで生きている理由もほぼ解った。<tag>&lt;/<he>p</he>></tag>
<!--          -->  <tag>&lt;/<he>body</he>></tag>
<!--          --><tag>&lt;/<he>html</he>></tag><!--
        --></htmlCode></figBody>
      </example>
      
      <keyPoints>
        <li>&html; <i>文書</i>のはじめには、<i>文書型宣言</i>
        (<declaration>&lt;!<i>DOCTYPE</i> <he>html</he>></declaration>)
        を書きます。</li>
        <li><he>html</he> <i>要素</i>の<i>開始タグ</i>には特別な<i>属性</i>
        <htmlCode><ha>xmlns</ha>="<i><uri>http://www.w3.org/1999/xhtml</uri
        ></i>"</htmlCode>
        を書きます。</li>
      </keyPoints>
    </section>
    
    <exercise>
      <problem xml:id="paragraphs-q-tree-hime">
        <p>次の<i>文章</i>について、
        <iref fig="paragraphs-example-tree-html-full"
        />のような構造の図をかけ。</p>
        
        <quote xml:id="paragraphs-maihime-example">
          <quoteBody>
            <h>舞姫</h>
            <p>石炭をば早や積み果てつ。中等室の卓のほとりはいと静にて、
            熾熱燈の光の晴れがましきも徒なり。
            今宵は夜毎にこゝに集ひ来る骨牌仲間も 「ホテル」 に宿りて、
            舟に残れるは余一人のみなれば。</p>
            <p>五年前の事なりしが、平生の望足りて、洋行の官命を蒙り、
            このセイゴンの港まで来し頃は、目に見るもの、耳に聞くもの、
            一つとして新ならぬはなく、
            筆に任せて書き記しつる紀行文日ごとに幾千言をかなしけむ、
            当時の新聞に載せられて、世の人にもてはやされしかど、
            今日になりておもへば、穉き思想、身の程知らぬ放言、
            さらぬも尋常の動植金石、さては風俗などをさへ珍しげにしるしゝを、
            心ある人はいかにか見けむ。こたびは途に上りしとき、
            日記ものせむとて買ひし冊子もまだ白紙のまゝなるは、
            独逸にて物学びせし間に、一種の 「ニル、アドミラリイ」
            の気象をや養ひ得たりけむ、あらず、これには別に故あり。</p>
            <p>げに東に還る今の我は、西に航せし昔の我ならず、
            学問こそ猶心に飽き足らぬところも多かれ、浮世のうきふしをも知りたり、
            人の心の頼みがたきは言ふも更なり、
            われとわが心さへ変り易きをも悟り得たり。
            きのふの是はけふの非なるわが瞬間の感触を、筆に写して誰にか見せむ。
            これや日記の成らぬ縁故なる、あらず、これには別に故あり。</p>
            <p>嗚呼、ブリンヂイシイの港を出でゝより、早や二十日あまりを経ぬ。
            世の常ならば生面の客にさへ交を結びて、旅の憂さを慰めあふが航海の習なるに、
            微恙にことよせて房の裡にのみ籠りて、同行の人々にも物言ふことの少きは、
            人知らぬ恨に頭のみ悩ましたればなり。此恨は初め一抹の雲の如く我心を掠めて、
            瑞西の山色をも見せず、伊太利の古蹟にも心を留めさせず、中頃は世を厭ひ、
            身をはかなみて、腸日ごとに九廻すともいふべき惨痛をわれに負はせ、
            今は心の奥に凝り固まりて、一点の翳とのみなりたれど、文読むごとに、
            物見るごとに、鏡に映る影、声に応ずる響の如く、
            限なき懐旧の情を喚び起して、幾度となく我心を苦む。嗚呼、
            いかにしてか此恨を銷せむ。若し外の恨なりせば、
            詩に詠じ歌によめる後は心地すがすがしくもなりなむ。
            これのみは余りに深く我心に彫りつけられたればさはあらじと思へど、
            今宵はあたりに人も無し、
            房奴の来て電気線の鍵を捩るには猶程もあるべければ、いで、
            その概略を文に綴りて見む。</p>
          </quoteBody>
          <quoteCredit>
            <dc:title>舞姫</dc:title>冒頭
            <!-- <http://www.aozora.gr.jp/cards/000129/card2078.html> -->
          </quoteCredit>
        </quote>
        
        <answer>
          <p>最初の<q>舞姫</q>は<i>見出し</i>で、残りは<i>段落</i>です。
          <i>題名</i>と<i>言語</i>情報を補うと、
          
          <tree:root>
            <tree:content><he>html</he></tree:content>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q></tree:leaf>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>xml:lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q
            ></tree:leaf>
            <tree:node>
              <tree:content><he>head</he></tree:content>
              <tree:leaf><he>title</he> <q>舞姫</q></tree:leaf>
            </tree:node>
            <tree:node>
              <tree:content><he>body</he></tree:content>
              <tree:leaf><he>h1</he> <q>舞姫</q></tree:leaf>
              <tree:leaf><he>p</he> <q>石炭をば早や積み果てつ。<doc:snip
              />舟に残れるは余一人のみなれば。</q></tree:leaf>
              <tree:leaf><he>p</he> <q>五年前の事なりしが、<doc:snip
              />これには別に故あり。</q></tree:leaf>
              <tree:leaf><he>p</he> <q>げに東に還る今の我は、<doc:snip
              />これには別に故あり。</q></tree:leaf>
              <tree:leaf><he>p</he> <q>嗚呼、<doc:snip
              />その概略を文に綴りて見む。</q></tree:leaf>
            </tree:node>
          </tree:root>
            となります。
          </p>
        </answer>
      </problem>
      
      <problem xml:id="paragraphs-q-markup-hime">
        <p><iref problem="paragraphs-q-tree-hime"/>の<i>文章</i>を
        &html; により<i>マーク付け</i>せよ。</p>
        
        <answer>
          <p>構造が分かれば、後は機械的に<i>タグ</i>を書き足すだけです。</p>
          <htmlCode xml:space="preserve"><!--
              --><declaration>&lt;!<i>DOCTYPE</i> <he>html</he>></declaration>
<!--          --><tag>&lt;<he>html</he> <ha>lang</ha>="<i><lang-tag>ja</lang-tag
            ></i
                     >" <ha>xml:lang</ha>="<i><lang-tag>ja</lang-tag
            ></i>"
<!--          -->    <ha>xmlns</ha>="<i><uri>http://www.w3.org/1999/xhtml</uri></i>"></tag>
<!--          -->  <tag>&lt;<he>head</he>></tag>
<!--          -->    <tag>&lt;<he>title</he>></tag>舞姫<tag>&lt;/<he>title</he>></tag>
<!--          -->  <tag>&lt;/<he>head</he>></tag>
<!--          -->  <tag>&lt;<he>body</he>></tag>
<!--          -->    <tag>&lt;<he>h1</he>></tag>舞姫<tag>&lt;/<he>h1</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>石炭をば早や積み果てつ。<doc:snip
              />舟に残れるは余一人のみなれば。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>五年前の事なりしが、<doc:snip
              />これには別に故あり。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>げに東に還る今の我は、<doc:snip
              />これには別に故あり。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>嗚呼、<doc:snip
              />その概略を文に綴りて見む。<tag>&lt;/<he>p</he>></tag>
<!--          -->  <tag>&lt;/<he>body</he>></tag>
<!--          --><tag>&lt;/<he>html</he>></tag><!--
        --></htmlCode>
        </answer>
      </problem>
      
      <problem xml:id="paragraphs-intro-markup">
        <p>自分の住んでいる街を紹介する簡単な<i>文章</i>を書き、
        それを &html; で<i>マーク付け</i>せよ。 (ヒント:
        はじめは原稿用紙に書くつもりで考えるとよい。)</p>
        
        <answer>
          <todo>
            <p>解答例</p>
          </todo>
        </answer>
      </problem>
    </exercise>
    
    <postamble>
      <p>この章では基本的な &html; <i>文書</i>の構成の方法を学びました。
      <iref section="lists">次の章</iref>では<i>箇条書き</i
      >を記述する方法を紹介します。</p>
      <p><iref section="lists">次の章</iref>以降でも説明のために<iref 
      fig="paragraphs-example-tree-html-full"/>のような構造の図を使います。
      <iref fig="paragraphs-example-tree-html-full">この図</iref
      >のような構造は<i>木</i>と呼ばれており、<i>計算機科学</i
      >の世界では非常によく使われている重要な概念です。
      <i>木</i>構造についての知識が無い方は、<iref section="lists">次の章</iref
      >に進む前に<iref section="appendix-trees"/>をお読み下さい。</p>
    </postamble>
  </section>
  
  <section xml:id="lists">
    <h><i>箇条書き</i>の<i>マーク付け</i></h>
    
    <preamble>
      <p>この章では、<i>箇条書き</i>の<i>マーク</i>の付け方について学びます。
      <i>箇条書き</i>は、同列に並んだ複数の項目を列挙する際や、
      物事の手順を説明する際に、
      読者にとっても著者にとっても簡単で分かりやすく内容を記述できる有効な表現手段です。
      &html; で記述した &web-pages; でも<i>箇条書き</i>はよく用いられています。</p>
    </preamble>
    
    <section xml:id="lists-unordered">
      <h>並列列挙の<i>マーク付け</i></h>
      
      <p>まず、あるテーマに沿った物事を列挙した<iw
      name="kajou-gaki" key="かじょう・がき">箇条書き</iw
      >が含まれている<i>文書</i>について考えましょう。</p>
      
      <quote xml:id="lists-example-wonders">
        <quoteBody>
          <h doc:markName="lists-example-wonders-h1">世界の七不思議</h>
          <p doc:markName="lists-example-wonders-p1"
          >世界の七不思議とは元々次の7つのものを指していたといわれています。</p>
          <ul doc:markName="lists-example-wonders-l1">
            <li>ギザのピラミッド</li>
            <li>バビロンの空中庭園</li>
            <li>ロードス島の巨像</li>
            <li>オリンピアのゼウス像</li>
            <li>エフェソスのアルテミス神殿</li>
            <li>ハリカルナッソスのマウソロスの霊廟</li>
            <li>アレクサンドリアの大灯台</li>
          </ul>
        </quoteBody>
        <quoteCredit>
          <dc:title>世界の七不思議</dc:title>
          <!-- 参考 <http://ja.wikipedia.org/wiki/%E4%B8%96%E7%95%8C%E4%B8%83%E4%B8%8D%E6%80%9D%E8%AD%B0> -->
        </quoteCredit>
      </quote>
      
      <p><iref quote="lists-example-wonders">今回の例</iref
      >は、<markRef mark="lists-example-wonders-h1"><i>見出し</i>1つ</markRef>、
      <markRef mark="lists-example-wonders-p1"><i>段落</i>1つ</markRef>、
      <markRef mark="lists-example-wonders-l1"><i>箇条書き</i>1つ</markRef
      >で構成されています。そして<markRef mark="lists-example-wonders-l1"
      ><i>箇条書き</i></markRef>には<iw name="item" en="item" key="こうもく"
      >項目</iw>が7つ含まれています。
      この<i>木</i>構造を図にすると<iref fig="lists-wonders-tree-prose"
      />のようになります。</p>
          <note><p>ここでは<markRef mark="lists-wonders-tree-prose-body"
          ><i>本文</i></markRef>より上の階層は省略しました。</p></note>
      
      <fig xml:id="lists-wonders-tree-prose">
        <figBody>
          <tree:root doc:markName="lists-wonders-tree-prose-body">
            <tree:content><i>本文</i></tree:content>
            <tree:leaf><i>見出し</i> <q>世界の七不思議</q></tree:leaf>
            <tree:leaf><i>段落</i> <q>世界の七不思議とは<doc:snip/></q></tree:leaf>
            <tree:node>
              <tree:content><i>箇条書き</i></tree:content>
              <tree:leaf>項目 <q>ギザのピラミッド</q></tree:leaf>
              <tree:leaf>項目 <q>バビロンの空中庭園</q></tree:leaf>
              <tree:leaf>項目 <q>ロードス島の巨像</q></tree:leaf>
              <tree:leaf>項目 <q>オリンピアのゼウス像</q></tree:leaf>
              <tree:leaf>項目 <q>エフェソスのアルテミス神殿</q></tree:leaf>
              <tree:leaf>項目 <q>ハリカルナッソスのマウソロスの霊廟</q></tree:leaf>
              <tree:leaf>項目 <q>アレクサンドリアの大灯台</q></tree:leaf>
            </tree:node>
          </tree:root>
        </figBody>
        <caption><dc:title>世界の七不思議</dc:title>の構造</caption>
      </fig>
      
      <p><i>要素型</i>を &html; では <he>body</he> (<i>本文</i>)、
      <he>h1</he> (<i>見出し</i>)、 <he>p</he> (<i>段落</i>)
      と呼ぶことは既に<iref section="paragraphs">前の章</iref>で学びました。
      新たに登場した<q><i>箇条書き</i></q>は 
      <dfn doc:name="html-ul"><he>ul</he></dfn>、<q>項目</q>は
      <dfn doc:name="html-li"><he>li</he></dfn>
      が &html; の<i>要素型名</i>になります。</p>
      
      <note>
        <p><q><he>ul</he></q> は <q xml:lang="en">unordered list</q>
        (順序付けされていない<iw name="list" en="list" key="リスト">リスト</iw>)
        の略です。<q>順序付けられていない</q
        >というのは後述の<q>順序付けられている</q><i>リスト</i>
        (<he>ol</he>) との対比で、列挙した順序に元々深い意味が無い
        (順不同である) ことを示しています。</p>
        <p><q><he>li</he></q> は <q xml:lang="en">list item</q>
        (<i>リスト</i>の項目) の略です。</p>
      </note>
      
      <p>&html; の<i>要素型名</i>に書き換え、更に<i>本文</i>
      (<he>body</he>) より上の階層も補うと、
      <i>木</i>は<iref fig="lists-wonders-tree-html"/>のようになります。</p>
      
      <fig xml:id="lists-wonders-tree-html">
        <figBody>
          <tree:root>
            <tree:content><he>html</he></tree:content>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q></tree:leaf>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>xml:lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q
            ></tree:leaf>
            <tree:node>
              <tree:content><he>head</he></tree:content>
              <tree:leaf><he>title</he> <q>世界の七不思議</q></tree:leaf>
            </tree:node>
            <tree:node>
              <tree:content><he>body</he></tree:content>
              <tree:leaf><he>h1</he> <q>世界の七不思議</q></tree:leaf>
              <tree:leaf><he>p</he> <q>世界の七不思議とは<doc:snip/></q></tree:leaf>
              <tree:node>
                <tree:content><he>ul</he></tree:content>
                <tree:leaf><he>li</he> <q>ギザのピラミッド</q></tree:leaf>
                <tree:leaf><he>li</he> <q>バビロンの空中庭園</q></tree:leaf>
                <tree:leaf><he>li</he> <q>ロードス島の巨像</q></tree:leaf>
                <tree:leaf><he>li</he> <q>オリンピアのゼウス像</q></tree:leaf>
                <tree:leaf><he>li</he> <q>エフェソスのアルテミス神殿</q></tree:leaf>
                <tree:leaf><he>li</he> <q>ハリカルナッソスのマウソロスの霊廟</q
                ></tree:leaf>
                <tree:leaf><he>li</he> <q>アレクサンドリアの大灯台</q></tree:leaf>
              </tree:node>
            </tree:node>
          </tree:root>
        </figBody>
        <caption><dc:title>世界の七不思議</dc:title>の &html; 構造</caption>
      </fig>
      
      <p>そしてこの<i>木</i>構造から今までと全く同じ方法で &html;
      で<i>マーク付け</i>された<i>文書</i>を作ることができます。</p>
      
      <example xml:id="lists-wonders-markup-result">
        <caption><dc:title>世界の七不思議</dc:title>のマーク付け結果</caption>
        <figBody><htmlCode xml:space="preserve"><!--
              --><declaration>&lt;!<i>DOCTYPE</i> <he>html</he>></declaration>
<!--          --><tag>&lt;<he>html</he> <ha>lang</ha>="<i><lang-tag>ja</lang-tag
            ></i
                     >" <ha>xml:lang</ha>="<i><lang-tag>ja</lang-tag
            ></i>"
<!--          -->    <ha>xmlns</ha>="<i><uri>http://www.w3.org/1999/xhtml</uri></i>"></tag>
<!--          -->  <tag>&lt;<he>head</he>></tag>
<!--          -->    <tag>&lt;<he>title</he>></tag>世界の七不思議<tag>&lt;/<he>title</he>></tag>
<!--          -->  <tag>&lt;/<he>head</he>></tag>
<!--          -->  <tag>&lt;<he>body</he>></tag>
<!--          -->    <tag>&lt;<he>h1</he>></tag>世界の七不思議<tag>&lt;/<he>h1</he>></tag>
<!--          -->    <tag>&lt;<he>p</he>></tag>世界の七不思議とは元々次の7つのものを指していたといわれています。<tag>&lt;/<he>p</he>></tag>
<!--          -->    <tag>&lt;<he>ul</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>ギザのピラミッド<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>バビロンの空中庭園<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>ロードス島の巨像<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>オリンピアのゼウス像<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>エフェソスのアルテミス神殿<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>ハリカルナッソスのマウソロスの霊廟<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>アレクサンドリアの大灯台<tag>&lt;/<he>li</he>></tag>
<!--          -->    <tag>&lt;/<he>ul</he>></tag>
<!--          -->  <tag>&lt;/<he>body</he>></tag>
<!--          --><tag>&lt;/<he>html</he>></tag><!--
        --></htmlCode></figBody>
      </example>
      
      <keyPoints>
        <li><i>箇条書き</i>は、<q><i>箇条書き</i>全体</q>と<q
        >その中の<i>項目</i></q>群という構造になっています。</li>
        <li><i>箇条書き</i>の<i>要素型名</i>は <he>ul</he> です。</li>
        <li><i>項目</i>の<i>要素型名</i>は <he>li</he> です。</li>
      </keyPoints>
    </section>
    
    <section xml:id="lists-recipe">
      <h>手順の<i>マーク付け</i></h>
      
      <p>次は順序のある<iw name="kajou-gaki" key="かじょう・がき">箇条書き</iw
      >の<i>マーク付け</i>を考えてみましょう。
      今回の題材は<iref quote="lists-recipe-kenchin">調理法の説明</iref>です。</p>
      
      <quote xml:id="lists-recipe-kenchin">
        <quoteBody>
          <h>けんちん汁の作り方</h>
          <ol>
          <li>大根、にんじんは <unit-number><number>5</number><unit>mm</unit
          ></unit-number> のイチョウ切り、ゴボウは皮をむき、
          ささがきにして水にさらす。</li>
          <li>里芋は皮をむいて <unit-number><number>1</number><unit>cm</unit
          ></unit-number> の輪切りにし、塩でもんでぬめりをとり、さっとゆでておく。
          蒟蒻は半分に切って <unit-number><number>5</number><unit>mm</unit
          ></unit-number> の小口切り、豆腐はふきんに包んで水気をしぼっておく。</li>
          <li>鍋に油を熱し、
          大根・にんじん・里芋・こんにゃく・豆腐・ゴボウの順に加えながら炒め、
          豆腐に油がなじんだら、だしを加える。</li>
          <li>煮立ったら火を弱めて、灰汁を取りながら煮て、柔らかくなったら、
          塩・醤油・酒で味を調える。</li>
          <li>盛り付けて季節の吸い口を添える。</li>
          </ol>
        </quoteBody>
        <quoteCredit>
          <dc:title>けんちん汁の作り方</dc:title>
          <weak>(<a href="http://ja.wikipedia.org/wiki/%E3%81%91%E3%82%93%E3%81%A1%E3%82%93%E6%B1%81#.E3.83.AC.E3.82.B7.E3.83.94"
          xml:lang="en">Wikipedia</a> より)</weak>
        </quoteCredit>
      </quote>

      <p><iref quote="lists-example-wonders">先の例</iref
      >と同じ単なる箇条書きですから、今度も
      &html; では <he>ul</he> と <he>li</he> を使って表すのだな、
      と思われるかもしれません。しかし、<iref
      quote="lists-example-wonders">先の例</iref>では<q>ギザのピラミッド</q
      >も<q>バビロンの空中庭園</q>もその他の<i>項目</i>も、
      どれが著しく優れているとか、
      どれが重要であるとかといった順序とは <weak>(一応は)</weak> 無縁のものでした。
      ところが<iref quote="lists-recipe-kenchin">今回の例</iref
      >のような調理法は、順序を無視することができません。</p>
      
      <p>&html; には <he>ul</he> とは別に <dfn doc:name="html-ol"><he>ol</he></dfn>
      という<i>要素型</i>があります。 <he>ol</he>
      は調理法のように<i>項目</i>の順序が重要な<i>箇条書き</i>で用います。
      それぞれの<iw name="item" en="item" key="こうもく">項目</iw
      >の<i>要素型</i>は <he>ul</he>
      の時と同じように <iw name="html-li"><he>li</he></iw> を使います。</p>
      
      <note>
        <p><q><he>ol</he></q> は <q xml:lang="en">ordered list</q>、
        すなわち<q>順序付けられた<iw xml:lang="en"
        name="list" en="list" key="リスト">リスト</iw></q>という意味です。</p>
      </note>
      
      <fig xml:id="lists-recipe-kenchin-tree-html">
        <figBody>
          <tree:root>
            <tree:content><he>html</he></tree:content>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q></tree:leaf>
            <tree:leaf doc:nodeType="&tutorial.ns;attribute"
            ><ha>xml:lang</ha> <q><code xml:lang="en"><i><lang-tag>ja</lang-tag
            ></i></code></q
            ></tree:leaf>
            <tree:node>
              <tree:content><he>head</he></tree:content>
              <tree:leaf><he>title</he> <q>けんちん汁の作り方</q></tree:leaf>
            </tree:node>
            <tree:node>
              <tree:content><he>body</he></tree:content>
              <tree:leaf><he>h1</he> <q>けんちん汁の作り方</q></tree:leaf>
              <tree:node>
                <tree:content><he>ol</he></tree:content>
                <tree:leaf><he>li</he> <q>大根、にんじんは<snip
                />水にさらす。</q></tree:leaf>
                <tree:leaf><he>li</he> <q>里芋は皮をむいて<snip
                />しぼっておく。</q></tree:leaf>
                <tree:leaf><he>li</he> <q>鍋に油を熱し、<snip
                />だしを加える。</q></tree:leaf>
                <tree:leaf><he>li</he> <q>煮立ったら火を弱めて、<snip
                />味を調える。</q></tree:leaf>
                <tree:leaf><he>li</he> <q>盛り付けて季節の吸い口を添える。</q
                ></tree:leaf>
              </tree:node>
            </tree:node>
          </tree:root>
        </figBody>
        <caption><dc:title>けんちん汁の作り方</dc:title>の &html; 構造</caption>
      </fig>
      
      <example xml:id="lists-kenchin-markup-result">
        <caption><dc:title>けんちん汁の作り方</dc:title>のマーク付け結果</caption>
        <figBody><htmlCode xml:space="preserve"><!--
              --><declaration>&lt;!<i>DOCTYPE</i> <he>html</he>></declaration>
<!--          --><tag>&lt;<he>html</he> <ha>lang</ha>="<i><lang-tag>ja</lang-tag
            ></i
                     >" <ha>xml:lang</ha>="<i><lang-tag>ja</lang-tag
            ></i>"
<!--          -->    <ha>xmlns</ha>="<i><uri>http://www.w3.org/1999/xhtml</uri></i>"></tag>
<!--          -->  <tag>&lt;<he>head</he>></tag>
<!--          -->    <tag>&lt;<he>title</he>></tag>けんちん汁の作り方<tag>&lt;/<he>title</he>></tag>
<!--          -->  <tag>&lt;/<he>head</he>></tag>
<!--          -->  <tag>&lt;<he>body</he>></tag>
<!--          -->    <tag>&lt;<he>h1</he>></tag>けんちん汁の作り方<tag>&lt;/<he>h1</he>></tag>
<!--          -->    <tag>&lt;<he>ol</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>大根、にんじんは<snip
                />水にさらす。<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>里芋は皮をむいて<snip
                />しぼっておく。<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>鍋に油を熱し、<snip
                />だしを加える。<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>煮立ったら火を弱めて、<snip
                />味を調える。<tag>&lt;/<he>li</he>></tag>
<!--          -->      <tag>&lt;<he>li</he>></tag>盛り付けて季節の吸い口を添える。<tag>&lt;/<he>li</he>></tag>
<!--          -->    <tag>&lt;/<he>ol</he>></tag>
<!--          -->  <tag>&lt;/<he>body</he>></tag>
<!--          --><tag>&lt;/<he>html</he>></tag><!--
        --></htmlCode></figBody>
      </example>
      
      <p>ここでは <he>ol</he> を手順を表すために使いましたが、
      一般に順序関係を持つものなら何にでも使えます。
      例えば<q>シドニー五輪の金メダル国別獲得数 (上位10ヶ国)</q
      >や<q><q>のぞみ</q>停車駅一覧</q>や<q
      >日本の歴代総理大臣</q>にも <he>ol</he> が使えます。</p>
      
      <keyPoints>
        <li>順序が重要な<i>箇条書き</i>では<i>要素型名</i>を
        <he>ol</he> とします。</li>
        <li>各<i>項目</i>の<i>要素型名</i>はやはり <he>li</he> です。</li>
      </keyPoints>
    </section>
    
    <section xml:id="lists-with-descriptions">
      <h>説明付き<i>リスト</i> (仮題)</h>
      <ed>
        <p>この節で登場する要素型: 
        <he>dl</he>, <he>dt</he>, <he>dd</he></p>
        <p>&html; 5 の仕様が確定するまで pending。</p>
      </ed>
    </section>
    
    <ed>
      <p>入れ子の<i>リスト</i>をここで扱うべきかどうか?</p>
    </ed>
    
    <postamble>
      <p>この章では、様々な<i>箇条書き</i>の<i>マーク</i>の付け方をみてきました。</p>
      <p>次の<iref section="phrases"/>では、<i>段落</i>や<i>箇条書き</i
      >の中の<i>語句</i>をどう扱うのかを説明します。</p>
      <p><iref section="tables"/>では、<i>箇条書き</i>よりも複雑な情報を
      2次元に整理した<q><i>表</i></q>を &html; でどう<i>マーク</i>するのか説明します。
      また、<iref section="styling-lists"/>では<i>箇条書き</i
      >や<i>表</i>の見た目を工夫する方法を説明します。</p>
    </postamble>
    
    <exercise>
      <problem>
        <todo>
          <p><he>ul</he> の問題。</p>
        </todo>
      </problem>
      
      <problem xml:id="lists-cabbage">
        <p>次の<i>文書</i>の構造の<i>木</i>を作れ。また、<i>マーク付け</i>せよ。</p>
        <quote xml:id="lists-cabbage-example">
          <quoteBody>
            <h>2004年産キャベツ年間出荷量上位5県</h>
            <ol>
              <li>群馬</li>
              <li>愛知</li>
              <li>千葉</li>
              <li>神奈川</li>
              <li>北海道</li>
            </ol>
          </quoteBody>
          <quoteCredit>
            <dc:title>2004年産野菜の統計 / キャベツ年間出荷量上位5県</dc:title>
            <!-- <http://www.maff.go.jp/toukei/sokuhou/data/sakutsuke-akifuyu2004/sakutsuke-akifuyu2004.pdf#page=29>
                 のデータより作成 -->
          </quoteCredit>
        </quote>
        
        <answer>
          <todo>
            <p>解答例</p>
          </todo>
        </answer>
      </problem>
      
      <problem>
        <todo>
          <p><he>dl</he> に関する問題を何か。</p>
        </todo>
      </problem>
      
      <problem>
        <ed>
          <p>街紹介の問題</p>
        </ed>
      </problem>
    </exercise>
  </section>
  
  <section xml:id="phrases">
    <h>語句の<i>マーク付け</i></h>
    <keyword><i>強調</i></keyword>
    <!-- <keyword><i>弱調</i></keyword> -->
    <keyword><i>略語</i></keyword>
    <keyword><i>ルビ</i></keyword>
    
    <preamble>
      <p>ここまでは<i>段落</i>や<i>箇条書き</i>のように、
      <i>文</i>よりも大きな単位を記述する方法をみてきました。
      この章では、逆に<i>文</i>の中の<i>語句</i
      >について説明を加えることを考えます。</p>
    </preamble>
    
    <section xml:id="phrases-emphasis">
      <h><i>語句</i>の<i>強調</i></h>
      
      <p><i>文</i>には通常いくつかの<i>語句</i>が含まれていますが、
      そのすべてが<q>対等</q>では必ずしもありません。
      ですから、特に重要な語には線を引いたり、赤字にしたり、
      読む時に特に大きな声を出したりします。</p>
      
      <p>&html; には<dfn doc:name="emphasis" doc:en="emphasis"
      doc:key="きょうちょう">強調</dfn>という意味の
      <dfn doc:name="html-em"><he>em</he></dfn> <i>要素型</i>があります。</p>
      
      <example xml:id="pharases-emphasis-example">
        <caption><i>強調</i>の例</caption>
        <figBody>
          <p>例えば
            <blockquote>
              <p>なんといっても重要なのは、<em>単純さ</em>ですよね。</p>
            </blockquote>
            という<i>段落</i>の構造を<i>木</i>にすると
            <tree:root>
              <tree:content><he>p</he></tree:content>
              <tree:leaf doc:nodeType="&tutorial.ns;text"
              ><q>なんといっても重要なのは、</q></tree:leaf>
              <tree:leaf><he>em</he> <q>単純さ</q></tree:leaf>
              <tree:leaf doc:nodeType="&tutorial.ns;text"
              ><q>ですよね。</q></tree:leaf>
            </tree:root>
            となり、 &html; では
            <htmlCode display="block"
            ><tag>&lt;<he>p</he>&gt;</tag><span xml:lang="ja"
            >なんといっても重要なのは、</span>
<!--      --><tag>&lt;<he>em</he>&gt;</tag><span xml:lang="ja">単純さ</span
            ><tag>&lt;/<he>em</he>&gt;</tag
            ><span xml:lang="ja">ですよね。</span
            ><tag>&lt;<he>/p</he>&gt;</tag></htmlCode>
            と表せます。
          </p>
        </figBody>
      </example>
    </section>
    
    <section xml:id="phrases-abbr">
      <h>略語とその完全形</h>
      
      <p>団体名や専門用語などで、長い正式名称ではなく略称が使われることがあります。
      しかし、たまに<i>文章</i>を読んでいて何の<i>略語</i>か分からなくなったり、
      違う意味で同じ<i>略語</i>が使われていて混乱したりすることもあります。</p>
      
      <p>&html; には、ある<i>語句</i>が<dfn doc:name="abbreviation"
      doc:en="abbreviation" doc:key="りゃくご">略語</dfn>であることを表す
      <dfn doc:name="html-abbr"><he>abbr</he></dfn> という<i>要素型</i
      >があります。また、 <he>abbr</he> <i>要素</i>の
      <dfn doc:name="html-abbr-title"><ha>title</ha></dfn>
      <i>属性</i>によって省略前の完全形を付記することができます。</p>
      
      <example xml:id="phrases-abbr-example">
        <caption><i>略語</i>の例</caption>
        <figBody>
          <p>
            例えば
            <blockquote>
              <p><abbr title="日本放送協会">NHK</abbr>, 
              <abbr title="日本民間放送連盟">民放連</abbr>, 
              <abbr title="et cetera" xml:lang="la">etc.</abbr></p>
            </blockquote>
            という例文は &html; で
            <htmlCode display="block"><!--
         --><tag>&lt;<he>p</he>&gt;</tag><tag>&lt;<he>abbr</he
            > <ha name="html-abbr-title">title</ha>="<span
            xml:lang="ja">日本放送協会</span>"&gt;</tag
            ><span xml:lang="ja">NHK</span><tag>&lt;/<he>abbr</he>&gt;</tag>,
<!--     --><tag>&lt;<he>abbr</he
            > <ha name="html-abbr-title">title</ha>="<span
            xml:lang="ja">日本民間放送連盟</span>"&gt;</tag
            ><span xml:lang="ja">民放連</span><tag>&lt;/<he>abbr</he>&gt;</tag>,
<!--     --><tag>&lt;<he>abbr</he
            > <ha name="html-abbr-title">title</ha>="<span
            xml:lang="la">et cetera</span>"&gt;</tag
            ><span xml:lang="la">etc.</span><tag>&lt;/<he>abbr</he>&gt;</tag
            ><tag>&lt;/<he>p</he>&gt;</tag></htmlCode>
            と表せます。
          </p>
        </figBody>
      </example>
      
      <note>
        <p><ha name="html-abbr-title">title</ha> <i>属性</i
        >に記述した完全形は、通常は<i>文章</i>の一部として扱われることはなく、
        文脈外の付加情報とみなされます。</p>
        <p>多くの <i doc:name="web-browser">Web ブラウザ</i>では、
        <he>abbr</he> <i>要素</i>の上にマウス・ポインタをあわせると
        <ha name="html-abbr-title">title</ha> <i>属性</i
        >の値が表示されます。紙の<i>文書</i>では実現できなかった、
        電子文書ならではの表現方法です。</p>
      </note>
    </section>
    
    <section xml:id="pharases-ruby">
      <h><i>ルビ</i>の<i>マーク付け</i></h>
      
      <p>漢字の読み方を<dfn doc:name="furigana" doc:key="ふり・がな">振り仮名</dfn
      >として上や右に小さく書き入れたり、
      人物の生没年を下に小さく載せたりすることがありますが、
      この種の表現をまとめて<dfn doc:name="ruby" doc:en="ruby" 
      doc:key="ルビ">ルビ</dfn>と呼びます。辞典では読み仮名を右に添える代わりに<i
      >行</i>中に<dfn doc:name="warichuu" doc:key="わり・ちゅう">割注</dfn
      >として記述されていたりもしますが、 &html; では都合上これも<i>ルビ</i
      >に含めます。</p>
      
      <p><i>ルビ</i>の &html; における表現方法は少し複雑です。
      まず、基本となる内容を<dfn doc:name="ruby-base"
      doc:en="ruby base" doc:key="ルビ・きてい">ルビ基底</dfn>
      <dfn doc:name="html-rb"><he>rb</he></dfn> と呼びます。
      そして補助的な内容を<dfn doc:name="ruby-text"
      doc:en="ruby text" doc:key="ルビ・ぶん">ルビ文</dfn>
      <dfn doc:name="html-rt"><he>rt</he></dfn> と呼びます。
      <i>振り仮名</i>の場合は漢字が<i>ルビ基底</i>で、
      仮名が<i>ルビ文</i>に当たります。<i>割注</i>として表示されることも考えて、
      <i>ルビ文</i>の周りには<i>括弧</i>
      <dfn doc:name="html-rp"><he>rp</he></dfn> を配置します。
      これら<i>ルビ</i>関連要素をまとめた<i>ルビ</i>付き<i>語句</i>の
      &html; での<i>要素型名</i>は <dfn doc:name="html-ruby"><he>ruby</he></dfn>
      です。</p>
      
      <p>言い換えると、 <he>ruby</he> <i>要素</i>の中に漢字が含まれる
      <he>rb</he> <i>要素</i>、仮名が含まれる <he>rt</he> <i>要素</i>、
      括弧が含まれる <he>rp</he> <i>要素</i>が入ります。</p>
      
      <example xml:id="pharses-ruby-example">
        <caption><i>ルビ</i>の例</caption>
        <figBody>
          <p>例えば
            <blockquote>
              <p>それは<ruby><rb>憂鬱</rb><rt>ゆううつ</rt></ruby>な日々だった。</p>
            </blockquote>
            という<i>段落</i>の<i>木</i>構造は
            <tree:root>
              <tree:content><he>p</he></tree:content>
              <tree:leaf doc:nodeType="&tutorial.ns;text"
              ><q>それは</q></tree:leaf>
              <tree:node>
                <tree:content><he>ruby</he></tree:content>
                <tree:leaf><he>rb</he> <q>憂鬱</q></tree:leaf>
                <tree:leaf><he>rp</he> <q>(</q></tree:leaf>
                <tree:leaf><he>rt</he> <q>ゆううつ</q></tree:leaf>
                <tree:leaf><he>rp</he> <q>)</q></tree:leaf>
              </tree:node>
              <tree:leaf doc:nodeType="&tutorial.ns;text"
              ><q>な日々だった。</q></tree:leaf>
            </tree:root>
            となり、 &html; では
            <htmlCode display="block"
            ><tag>&lt;<he>p</he>&gt;</tag><span xml:lang="ja">それは</span>
<!--      --><tag>&lt;<he>ruby</he>&gt;</tag><tag>&lt;<he>rb</he>&gt;</tag
            ><span xml:lang="ja">憂鬱</span><tag>&lt;/<he>rb</he>&gt;</tag>
<!--      --><tag>&lt;<he>rp</he>&gt;</tag>(<tag>&lt;/<he>rp</he>&gt;</tag
            ><tag>&lt;<he>rt</he>&gt;</tag><span xml:lang="ja">ゆううつ</span
            ><tag>&lt;/<he>rt</he>&gt;</tag
            ><tag>&lt;<he>rp</he>&gt;</tag>)<tag>&lt;/<he>rp</he>&gt;</tag
            ><tag>&lt;/<he>ruby</he>&gt;</tag>
<!--      --><span xml:lang="ja"
            >な日々だった。</span><tag
            >&lt;<he>/p</he>&gt;</tag></htmlCode>
            となります。
          </p>
        </figBody>
      </example>
      
      <note>
        <p>1つの <he>ruby</he> <i>要素</i> の中に <he>rt</he> <i>要素</i>は最大
        2つ含めることができます。 <he>rb</he> が人名であれば
        1つ目の <he>rt</he> を<i>振り仮名</i>、2つ目の <he>rt</he>
        を生没年に使ったり、1つ目を仮名表記、2つ目を<ruby><rb>羅馬</rb>
        <rt>ローマ</rt></ruby>字表記に使ったりするのが普通です。</p>
        <p>なお、ここで紹介したのは<dfn doc:name="simple-ruby"
        doc:en="simple ruby markup" doc:key="たんじゅん・ルビ">単純ルビ</dfn
        >と呼ばれるもので、より細かい記述が可能な<dfn
        doc:name="complex-ruby" doc:en="complex ruby markup"
        doc:key="ふくざつ・ルビ">複雑ルビ</dfn
        >という方法もあります。</p>
      </note>
    </section>
    
    <ed>
      <p>&html; 5 の仕様が固まれば、 <he>small</he>
      と <he>m</he> の説明をここに入れる。</p>
    </ed>

    <keyPoints>
      <li><i>強調</i>には <he>em</he> <i>要素型</i>を使います。</li>
      <li><i>略語</i>は <he>abbr</he> <i>要素</i>とし、
      完全形を <ha name="html-abbr-title">title</ha>
      <i>属性</i>で示すことができます。</li>
      <li><i>ルビ</i>付き語句は <he>ruby</he> <i>要素</i>とし、
      その中に主要な<i>ルビ基底</i>の <he>rb</he> <i>要素</i>、
      補助的な<i>ルビ文</i>の <he>rt</he> <i>要素</i>、
      括弧の <he>rp</he> 要素を配置します。</li>
    </keyPoints>
    
    <exercise>
      <todo>
        <p>演習問題を用意する。</p>
      </todo>
    </exercise>
    
    <postamble>
      <p>この章では<i>語句</i>についての<i>マーク付け</i>の方法を学びました。
      &html; にはこれ以外にも<i>語句</i>のための<i>語彙</i>が用意されていますが、
      それについては後の<iref section="xphrases"/>で取り上げます。
      これら<i>語句</i>の<i>マーク付け</i>を目に見える形にする
      <weak>(例えば<i>強調</i>を赤字で表示する)</weak>
      方法は<iref section="text-decorations"/>で説明します。</p>
      
      <p>次の<iref section="hyperlinks"/>では、いよいよ<i>ハイパーテキスト</i
      >の肝である<i>ハイパーリンク</i>の取り扱いについてみていきます。</p>
    </postamble>
  </section>
  
  <section xml:id="hyperlinks">
    <h><i>参照</i>の<i>マーク付け</i></h>
    <keyword><i>引用</i></keyword>
    <keyword><i>ハイパーリンク</i></keyword>
  
      <ed>
        <p>この章で登場する要素型: <he>blockquote</he>,
        <he>q</he>, <he>a</he>, <he>link</he></p>
      </ed>
  </section>
  
  <section xml:id="text-decorations">
    <h><i>文字</i>の装飾</h>
    <keyword><i>スタイル・シート</i></keyword>
    <keyword><i>色</i>付け</keyword>
    <keyword><i>文字</i>の<i>太さ</i></keyword>
    <keyword><i>下線</i></keyword>
      <ed>
        <p>この章で登場する特性: <cp>color</cp>, <cp>background-color</cp>,
        <cp>font-weight</cp>, <cp>text-decoration</cp></p>
      </ed>
  </section>
  
      <ed>
        <p>画像 (<he>img</he>) はどこで説明するべきか。</p>
      </ed>
  
  <section xml:id="sections">
    <h><i>章節</i>構造の<i>マーク付け</i></h>
      
      <ed>
        <p>この章で登場する要素型: <he>h2</he>〜<he>h6</he>,
        <he>section</he></p>
        <p>&html; 5 の仕様が固まった時、 <he>header</he>
        や <he>aside</he> などはこの章で説明するべきか、
        別の章を設けるべきか?</p>
      </ed>
  </section>
  
  <section xml:id="tables">
    <h>表の<i>マーク付け</i></h>
  
      <ed>
        <p>この章で登場する要素型: <he>table</he>, <he>tbody</he>,
        <he>thead</he>, <he>tfoot</he>, <he>colgroup</he>,
        <he>tr</he>, <he>td</he>, <he>th</he> <he>caption</he></p>
      </ed>
  </section>
  
  <section xml:id="box-model">
    <h><i>箱</i>の装飾</h>
    <keyword><i>枠線</i></keyword>
    <keyword><i>背景</i></keyword>
    <keyword><i>余白</i></keyword>
    <keyword><i>字下げ</i></keyword>
      <ed>
        <p>この章で登場する特性: <cp>border</cp>, <cp>background</cp>,
        <cp>margin</cp>, <cp>text-indent</cp></p>
      </ed>
  </section>
  
  <section xml:id="styling-lists">
    <h><i>箇条書き</i>と<i>表</i>の装飾</h>
      <ed>
        <p>ここには、
          <ul>
          <li>リスト項目マーカーの替え方 (<cp>list-style</cp>)</li>
          <li>ありがちな表の構造と枠線 (<cp>border</cp>) の指定方法</li>
          </ul>
        などを書く。</p>
      </ed>
  </section>
  
  <section xml:id="xphrases">
    <h>語句 (上級) (仮題)</h>
    <keyword>定義語</keyword>
    <!-- <keyword>実現値</keyword> -->
    <keyword>コード片</keyword>
    <keyword>変化部</keyword>
    <keyword>編集履歴</keyword>
      <todo>
        <p>適当な章名を考える。</p>
      </todo>
      <ed>
        <p>この章で登場する要素型: <he>dfn</he>, <he>code</he>,
        <he>var</he>, <he>ins</he>, <he>del</he></p>
        <p>&html; 5 の仕様が固まれば <he>i</he> の説明をここに。</p>
      </ed>
  </section>
  
  <section xml:id="extension">
    <h>&html; の拡張</h>
    <keyword><i>級</i></keyword>
    <keyword><i>名前空間</i></keyword>
    
    <section xml:id="extension-classes">
      <h><i>級</i>による分類</h>
      <ed>
        <p>この章で登場する要素型: <he>div</he>, <he>span</he></p>
        <p>この章で登場する属性: <ha>class</ha></p>
        <p>XOXO について</p>
        <p>図のマーク付け</p>
      </ed>
    </section>
    
    <ed>
      <p>Dublin Core <he>meta</he> について</p>
    </ed>
    
    <section xml:id="extension-xml-names">
      <h>&_xml-names;を使った拡張</h>
      <todo>
        <p>続きを書く。</p>
      </todo>
    </section>
  </section>
  
  <section xml:id="selectors">
    <h><i>箱</i>の選択</h>
    <keyword><i>選択子</i></keyword>
    <keyword><i>媒体</i></keyword>
      <ed>
        <p>この章の内容: 要素型選択子、要素級選択子、属性選択子、
        子孫、親子、隣接、既訪未訪擬似級、 <cssCode>:first-child</cssCode>,
        <cssCode>:last-child</cssCode>, <cssCode>::first-line</cssCode>,
        <cssCode>::first-letter</cssCode>, <cssCode>@media</cssCode></p>
      </ed>
  </section>
  
  <section xml:id="next-steps">
    <h>更に学ぶために</h>
  
  <ed>
    <p>触れていない &html; の機能: フォーム、スクリプト, <he>canvas</he>
    → Web 応用入門,
    <ha>profile</ha>, <ha>rel</ha>, hCalendar, hCard → semantic web 入門 ??,
    <he>samp</he>, <he>strong</he>, <he>address</he>,
    <he>base</he>, <ha>xml:base</ha>, <ha>xml:id</ha>, <ha>id</ha>,
    <he>map</he>, <he>area</he>, <he>object</he>, <he>param</he>,
    <he>col</he>, <he>rbc</he>, <he>rtc</he>, <he>cite</he>, <he>kbd</he>,
    <he>br</he>, <he>hr</he>, <he>pre</he>,
    代替スタイル,
    歴史的なもの</p>
    <p>触れていない CSS の機能: 継承, 段階,
    輸入, 頁媒体, 音声, フォント, 位置指定, 視覚整形モデル、生成内容</p>
    <p>周辺技術: URI &amp; HTTP → REST 体系様式入門,
    XML, MathML, SVG, RDF, Atom, DOM, ECMAScript, Ajax, XBL</p>
    <p>HTML vs XHTML について : どこでどの程度触れるべきか?</p>
  </ed>
  </section>
  
  <appendix xml:id="appendix-notes">
    <h>補足説明</h>
    <keyword><i>木</i></keyword>
    <keyword>&uri;</keyword>
    
    <section xml:id="appendix-why-markup">
      <h>なぜ<i>マーク</i>を付けるのか</h>
      <todo>
        <p>書く。</p>
      </todo>
      
      <ed>
        <p><q>文</q>のマーク付け : 文は句点で既にマーク付けされている。</p>
      </ed>
    </section>
    
    <section xml:id="appendix-character-references">
      <h><i>文字実体参照</i></h>
      <todo>
        <p>書く。</p>
      </todo>
      <ed>
        <p><i>定義済実体参照</i>の紹介。</p>
        <p><i>十六進数文字参照</i>も紹介するべきか否か。
        要らない気がしているが。</p>
      </ed>
    </section>
    
    <section xml:id="appendix-trees">
      <h><i>木</i>構造</h>
      
      <p>&this-document;では<q>構造の図</q>と称して<i>文書</i>を構成する<i
      >要素</i>の関係を
        <tree:root>
          <tree:content><i>根</i>0</tree:content>
          <tree:node>
            <tree:content><i>節点</i>1</tree:content>
            <tree:leaf><i>葉</i>2</tree:leaf>
            <tree:leaf><i>葉</i>3</tree:leaf>
            <tree:node>
              <tree:content><i>節点</i>4</tree:content>
              <tree:leaf><i>葉</i>5</tree:leaf>
            </tree:node>
          </tree:node>
          <tree:leaf><i>葉</i>6</tree:leaf>
        </tree:root>
      のように示してきましたが、このような構造を一般に<dfn
      doc:name="tree" doc:en="tree" doc:key="き">木</dfn>と呼びます。</p>
      
      <note>
        <p><q><i>根</i></q>から<i>枝</i
        >が分かれて広がっていく様子を自然界の木に喩えています。
        普通は木と言えば根が下にあり、葉は上にあるものですが、
        <i>計算機科学</i>の世界では<i>根</i>を上に、
        <i>葉</i>を下に書くのが慣習になっています。
        <i>計算機</i>の<i>ソフトウェア</i>では場所の都合などのために<i
        >根</i>を左上に、<i>葉</i>を右側に表示することが多いです。
        &this-document;では便宜上この<i>根</i>を左上、
        <i>葉</i>を右側に書く方法を採用しています。</p>
      </note>
      
      <p><i>木</i>を構成する要素それぞれを<dfn
      doc:name="node" doc:en="node" doc:key="せってん">節点</dfn>といいます。
      <i>節点</i>のうち、一番<q>根元</q> (左上) にあるものを特に<dfn
      doc:name="root" doc:en="root" doc:key="ね">根</dfn>といいます。</p>
      
      <p><i>節点</i>には上下関係があります。家族の関係に見立てて上を<dfn
      doc:name="parent" doc:en="parent" doc:key="おや">親</dfn>、下を<dfn
      doc:name="child" doc:en="child" doc:key="こ">子</dfn>といいます。この例では、
      <q><i>根</i>0</q>が<i>親</i>だとすれば<q><i>節点</i>1</q>と<q><i>葉</i>6</q
      >が<i>子</i>です。また、<q><i>節点</i>1</q>を<i>親</i>とすれば<q
      ><i>葉</i>2</q>、<q><i>葉</i>3</q>、<q><i>節点</i>4</q>の3つの<i>節点</i
      >が<i>子</i>です。<i>子</i>がいない<i>節点</i>のことを<dfn
      doc:name="leaf" doc:en="leaf" doc:key="は">葉</dfn>といいます。</p>
      
      <p><i>木</i>に属する<i>節点</i>同士の関係は<i>親</i><i>子</i
      >以外も家族の関係を表す言葉を使って表します。
      <i>親</i>が同じ<i>子</i>同士は互いに<dfn
      doc:name="sibling" doc:en="sibling" doc:key="きょうだい">兄弟</dfn
      >であるといいます。<i>親</i>や<i>親</i>の<i>親</i>などをまとめて<dfn
      doc:name="ancestor" doc:en="ancestor" doc:key="せんぞ">先祖</dfn>といいます。
      逆に<i>子</i>や<i>子</i>の<i>子</i> (<dfn
      doc:name="grandchild" doc:en="grandchild" doc:key="まご">孫</dfn>)
      などをまとめて<dfn doc:name="descendant" doc:en="descendant"
      doc:key="しそん">子孫</dfn>といいます。</p>
    </section>
    
    <section xml:id="appendix-uris">
      <h>&uri;</h>
      <todo>
        <p>続きを書く。</p>
      </todo>
    </section>
  </appendix>
  
  <appendix xml:id="answers">
    <h>演習問題の解答例</h>
    <insert content="answers"/>
  </appendix>
  
  <appendix xml:id="index">
    <h>索引</h>
    <insert content="index-aiueo"/>
  </appendix>
  
  <appendix xml:id="license">
    <h>著作権に関する完全な声明</h>
    <insert content="gnu-fdl"/>
    
    <ed>
      <p>著者はクリエイティブ・コモンズのライセンスに変更することも検討しています。
      ご意見がございましたら著者までご連絡下さい。</p>
    </ed>
  </appendix>
</document>
