HTMLの要素とその子要素の制約についての解説【ウェブデザイン技能検定 1級学科範囲】

2024年6月24日 2024年6月25日 8分34秒

タスラ t3l

ウェブデザイン技能検定の過去問をもとに、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要素: