HTML5　テキストの論理構造(2)

HTML

【HTML5課題05】

  • TPOを定義語として表示させなさい。
<body>
<h1>TPOを定義語としての記述</h1>
<p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場合と場所にあった服装や振る舞いをすることであると定義されています。</p>
</body>

【HTML5課題06】

  • USAを略語として表示させなさい。
<body>
<h1>USAを略語として記述</h1>
<p><abbr title="United States of America">USA</abbr>はアメリカ合衆国の略称です。</p>
</body>

【HTML5課題07】

  • ルビをふって表示させなさい。
  • ruby（ルビ：漢字の読みがな）
<body>
<h1>地名にルビをふる</h1>
<p>
<ruby>
日本橋<rt>日本橋</rt>
</ruby>
</p>
</body>
  • rp要素は、ruby要素に対応していないブラウザに、ルビテキストに括弧をつける（Firefoxの場合）
<body>
<h1>ルビに対応していないブラウザでも見えるようにする</h1>
<p>
<ruby>
日本橋<rp>(</rp><rt>にほんばし</rt><rp>)</rp>
茅場町<rp>(</rp><rt>かやばちょう</rt><rp>)</rp>
</ruby>
</p>
</body>

【HTML5課08】

  • 二酸化炭素の化学式を表示させなさい。
  • sub要素：下線付き文字
<body>
<h1>化学式を表示</h1>
<p>二酸化炭素の化学式はCO<sub>2</sub>です。</p>
</body>


【HTML課題09】

  • 面積の単位を表示させなさい。
  • sub要素：上付き文字
<body>
<h1>面積の単位を表示</h1>
<p>1辺の長さが1メートルの正方形の面積は、1m<sup>2</sup>と表します。</p>
</body>


【HTML課題10】

  • 引用を表示させなさい。
<body>
<h1>読書メモ</h1>
<p>本のタイトルや気になったフレーズなどをメモしていきます。</p>
<cite>引用：グスコーブドリの伝記</cite>
</body>
  • cute要素：引用元の作品名を残す。


<body>
<h1>読書メモ</h1>
<p>本のタイトルや気になったフレーズなどをメモしていきます。</p>
<cite>引用：グスコーブドリの伝記</cite>
<p>グスコーブドリは、<q>イーハトーヴの大きな森の中に生まれました。</q></p>
</body>
  • q要素：フレーズの引用を表す。
  • quote(引用)
<blockquote>
グスコーブドリは、イーハトーヴの大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。
ブドリにはネリという妹があって、二人は毎日森で遊びました。ごしっごしっとおとうさんの木を挽ひく音が、やっと聞こえるくらいな遠くへも行きました。二人はそこで木いちごの実をとってわき水につけたり、空を向いてかわるがわる山鳩の鳴くまねをしたりしました。するとあちらでもこちらでも、ぽう、ぽう、と鳥が眠そうに鳴き出すのでした。
</blockquote>
  • blockquote要素：まとまったかたまりの引用を表す。