ウェブデザイン技能検定の過去問をもとに、HTMLの各要素が持つ子要素の制約について解説します。
特に、<dl>, <table>, <ul>, <ol>などの要素について詳しく見ていきます。
定義リスト (<dl>) の子要素
正しい子要素:
<dt>: 定義される用語<dd>: 用語の定義
例:
<dl>
<dt>用語1</dt>
<dd>説明1</dd>
<dt>用語2</dt>
<dd>説明2</dd>
</dl>テーブル (<table>) の子要素
正しい子要素:
<caption>: テーブルのキャプション<colgroup>: 列グループ<col>: 列<thead>: テーブルのヘッダー<tbody>: テーブルの本体<tfoot>: テーブルのフッター<tr>: テーブルの行
例:
<table>
<caption>テーブルのタイトル</caption>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
順序付きリスト (<ol>) の子要素
正しい子要素:
<li>: リスト項目<script>: スクリプト<template>: テンプレート
例:
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>無順序リスト (<ul>) の子要素
正しい子要素:
<li>: リスト項目<script>: スクリプト<template>: テンプレート
例:
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>その他の要素の子要素制約
<select>
- 正しい子要素:
<option>,<optgroup>
例:
<select>
<option>選択肢1</option>
<option>選択肢2</option>
</select><optgroup>
- 正しい子要素:
<option>
例:
<optgroup label="グループ1">
<option>選択肢1</option>
<option>選択肢2</option>
</optgroup><map>
- 正しい子要素:
<area>, ブロックレベル要素,<script>,<template>
例:
<map name="sample-map">
<area shape="rect" coords="34,44,270,350" href="example.html" alt="Example">
</map>
<audio>
- 正しい子要素:
<source>,<track>, ブロックレベル要素
例:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
お使いのブラウザはオーディオタグをサポートしていません。
</audio><video>
- 正しい子要素:
<source>,<track>,<script>,<template>
<video controls>
<source src="movie.mp4" type="video/mp4">
お使いのブラウザはビデオタグをサポートしていません。
</video>
SVGのルール・構造
SVG（Scalable Vector Graphics）は、ベクターグラフィックスを描画するためのXMLベースの言語です。SVGには独自の要素と構造があります。
普段あまり目にしないタグなどを多々使用するため、おまけとして記載してみました。
SVGの基本構造
例:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>主要なSVG要素:
<svg>: ルート要素<circle>: 円を描画<rect>: 矩形を描画<line>: 線を描画<polyline>: 折れ線を描画<polygon>: 多角形を描画<path>: 任意の形状を描画<text>: テキストを描画<g>: 要素をグループ化<defs>: 定義済みオブジェクトを格納<use>: 定義済みオブジェクトを再利用
まとめ
特定の子要素しか含められない制約があるコードがあります。
これらの制約を守ることで、文法的に正しいHTML文書を作成することができます。
また、SVGの構造についても基本的な理解が必要です。
きれいで制約が守られたコーディングは検索エンジンにも好かれますので、SEOにもつながります。
ウェブデザイン技能検定でも正しい制約を理解しているかを確かめるような問題がでてきますが、基本的なものが多く見受けられますので、今回の記事は特に理解しておいて損はない内容です。
この記事がHTMLおよびSVGの要素とその子要素の制約に関する理解に役立てば幸いです。
