XHTMLタグ解説
XHTMLは「タグ」で文章に構造や意味を持たせます。タグには「ブロックレベル要素」と「インラインレベル要素」があり、XHTMLの場合は<body>から</body>の間にインラインレベル要素を置くことはできません。インラインレベル要素は必ずブロックレベル要素内に含める必要があります。
ブロックレベル要素
h1からh6
見出し(heading)を表します。見出しはh1〜h6までの6段階です。
XHTMLソースコード:
<h3>ブロックレベル要素</h3>
表示例:
ブロックレベル要素
p
段落(paragraph)を表します。
XHTMLソースコード:
<p>XHTMLは「タグ」で文章に構造や意味を持たせます。</p>
表示例:
XHTMLは「タグ」で文章に構造や意味を持たせます。
div
特に意味を持ちません。divタグで囲まれた部分にCSSを適用したり、IDを指定してリンク先として使用されます。
XHTMLソースコード:
<div class="example"> <h3>見出しと文字の大きさ</h3> <p class="ex1">見出しと文字の大きさ</p> </div>
table
表を表します。レイアウトのためにtableタグを使用するべきではありません。また、tableの中にtableを入れ子にする事は出来ません。
XHTMLソースコード:
<table summary="点数表"> <caption>期末テスト集計(60点満点)</caption> <tbody> <tr> <th>名前</th> <th>国語</th> <th>算数</th> <th>理科</th> <th>社会</th> <th>英語</th> <th>合計</th> <th>平均</th> </tr> <tr> <td>まさふみ</td> <td>40</td> <td>39</td> <td>50</td> <td>35</td> <td>38</td> <td>202</td> <td>40.4</td> </tr> <tr> <td>のりこ</td> <td>48</td> <td>35</td> <td>46</td> <td>50</td> <td>45</td> <td>224</td> <td>44.8</td> </tr> <td>みき</td> <td>28</td> <td>48</td> <td>46</td> <td>34</td> <td>60</td> <td>216</td> <td>43.2</td> </tr> </tbody> </table>
表示例:
| 名前 | 国語 | 算数 | 理科 | 社会 | 英語 | 合計 | 平均 |
|---|---|---|---|---|---|---|---|
| まさふみ | 40 | 39 | 50 | 35 | 38 | 202 | 40.4 |
| のりこ | 48 | 35 | 46 | 50 | 45 | 224 | 44.8 |
| みき | 28 | 48 | 46 | 34 | 60 | 216 | 43.2 |
枠線はCSSを使用して描画します。
このほかにもたくさんのタグがあります。詳しくはW3Cのウェブサイトをご参照ください。
ol
順番付きリスト(Ordered List)を表します。olに包含できる要素はliのみです。
XHTMLソースコード:
<ol> <li>電源を入れ、コンピュータを起動します。</li> <li>デスクトップ上のSigtuna DAR3 JPをダブルクリックします。</li> <li>「ファイル」メニューから「新規」を選択します。</li> </ol>
表示例:
- 電源を入れ、コンピュータを起動します。
- デスクトップ上にあるSigtuna DAR3 JPをダブルクリックします。
- 「ファイル」メニューから「新規」を選択します。
ul
順番なしリスト(Unordered List)を表します。ulに包含できる要素はliのみです。
XHTMLソースコード:
<ul> <li>Sigtuna DAR 3 JP</li> <li>MyStudioPC</li> </ul>
表示例:
- Sigtuna DAR 3 JP
- MyStudioPC
hr
水平方向の罫線(Horizontal Rule)を表します。hrタグも他のタグと同様にタグを閉じる必要がありますが、空要素であるため<hr />として開始タグを />で閉じます。
XHTMLソースコード:
<hr />
表示例:
インラインレベル要素
インラインレベル要素は<body>から</body>の中に置くことはできません。必ず上記ブロック要素内に含める必要があります。
文字列
本文中の文字列はインラインレベル要素です。
XHTMLソースコード:
<p>インラインレベル要素は<body>〜</body>の中に置くことはできません。</p>
acronym
頭文字を意味します。Webアクセシビリティガイドラインでは、略語や頭文字にはacronymにtitle属性を付けて内容を展開します。
XHTMLソースコード:
<p><acronym title="Digital Accessible Information System">DAISY</acronym>とは・・・</p>
表示例:
DAISYとは・・・
emとstrong
共に強調を表します。strongはem(emphasis)よりも強い強調を表します。
XHTMLソースコード:
<p>HTMLでは、<em>見やすく作る事も大切</em>ですが、 きちんと<strong>意味を持たせる事はもっと大切</strong>です。</p>
表示例:
HTMLでは、見やすく作る事も大切ですが、きちんと意味を持たせる事はもっと大切です。
span
特に意味を持ちません。spanタグで囲まれた部分にCSSを適用したり、IDを指定してリンク先として使用されます。divタグと違い、タグの前後に改行は入りません。
XHTMLソースコード:
<p><span id="xdai_0106">録音は、内蔵マイクを使用しても、外付けマイクを使用してもできます。</span>
br
改行(BReak)を表します。brタグも他のタグと同様にタグを閉じる必要がありますが、空要素であるため<br />として開始タグを />で閉じます。
XHTMLソースコード:
<p>brタグを連続して使用するとたくさん空間が出来ますが<br /> このような場合はCSSのmargin等で調整します。</p>
表示例:
brタグを連続して使用するとたくさんの空間が出来ますが
このような場合はCSSで空間を調整します。
img
画像を挿入します。imgタグを使用する場合は、画像が見えない場合や表示できない場合に代替テキストを表すalt属性は必須となります。また、imgタグも他のタグと同様にタグを閉じる必要がありますが、空要素であるため<img src="〜.jpg" alt="〜" />として開始タグを />で閉じます。
XHTMLソースコード:
<p><img src="hoge.png" alt="ほげほげ" width="75" height="42" /></p>
表示例:
他にもたくさんのタグがあります。詳しくはW3Cのウェブサイトをご参照ください。
その他
- XHTMLでは、タグを全て小文字で書かなければなりません。
- XHTMLで使用するCSSの属性名や要素名は小文字で記述します。
- HTMLでページ内リンクを指定する
name属性は廃止予定なので、代わりにid属性を使用します。 centerやborder属性は使用できませんので、CSSで指定します。