Webサイトの「会社概要」ページによくある構成といえば、次のような情報を並べる形式です：
代表者：サンプル太郎
設立：2022年
所在地：東京都このような情報の並べ方、実装方法としては主に2つあります。
- ✅
<table>：表形式の情報を整理して表示 - ✅
<dl>：用語と説明のペアを示す定義リスト
果たしてどちらを使うのが正解なのでしょうか？
それぞれの特徴と使いどころを比較しながら、最適な選択を探っていきましょう。
📊 <table>を使う場合：構造化された表としての意味があるときに
<table>
<tbody>
<tr>
<th>代表者</th>
<td>サンプル太郎</td>
</tr>
<tr>
<th>設立</th>
<td>2022年</td>
</tr>
<tr>
<th>所在地</th>
<td>東京都</td>
</tr>
</tbody>
</table>✅ メリット：
- 明確なラベルと値のペアとして表示でき、整列も簡単
- テーブル支援技術（スクリーンリーダーなど）での意味解釈も安定
- CSSでの装飾がしやすい（ボーダーや列幅の調整など）
⚠ デメリット：
- セマンティックな意味で「表」ではない内容の場合、意味的に過剰になる可能性がある
- テーブルレイアウトに縛られがち（レスポンシブ対応が難しいことも）
🗂 <dl>を使う場合：用語とその説明の関係を表すときに
<dl>
<dt>代表者</dt>
<dd>サンプル太郎</dd>
<dt>設立</dt>
<dd>2022年</dd>
<dt>所在地</dt>
<dd>東京都</dd>
</dl>
✅ メリット：
- ラベルと説明の**“定義関係”を自然に表現**
- テキスト構造がシンプルで、HTML自体も読みやすい
- レスポンシブに強く、縦並びや横並びなど柔軟なレイアウトが可能
⚠ デメリット：
- 項目が多いとスタイリングが複雑化しやすい（横並びにしたい場合など）
- 一部の古いブラウザではレンダリングが崩れる可能性があった（※現在はほぼ解消）
🧭 どう使い分けるべきか？
| 利用シーン | 適したタグ | 理由 |
|---|---|---|
| 定型的な表（数値、項目など） | <table> | 表示の安定性・意味づけが明確 |
| 用語とその内容の説明 | <dl> | 意味的に自然。定義リストとして正しい |
| レスポンシブ重視、装飾自由度高め | <dl> | 柔軟なCSSで対応しやすい |
| 音声読み上げなど支援技術の配慮が必要 | <table>または適切なaria属性 | 意図通りに読み上げられやすい |
✅ 結論：セマンティクスを意識して選ぶのがベスト
- 見た目だけで選ばず、「その情報の意味は何か？」を考えるのが正解
- 「定義的な内容」「説明的な関係」であれば**
<dl>** - 「並列の情報を行と列で整理したい」場合は**
<table>**
どちらも間違いではありませんが、文脈に合ったタグを使うことでSEOやアクセシビリティにも配慮できます。
💡 実践ヒント：見た目はCSSで調整できる！
もし「<dl>だと整列しづらい」と感じる場合でも、CSSで横並びにしたり、ボーダーをつけてテーブル風に見せることが可能です。
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 16px;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
}
📝 まとめ：
会社概要はただの「デザイン要素」ではなく、情報設計の第一歩。
意味あるHTMLで書くことで、検索エンジンにも、人間にも伝わるページになります！
