Modern HTML 1-3｜見出し・文章・コンテンツの意味設計｜見た目ではなく意味からHTMLを選ぶ

この回で分かること

Modern HTML 1-2では、section・article・divやheader・nav・main・aside・footerなどを使い、ページ全体の構造を意味から考えました。

Modern HTML 1-3では、その考え方をさらに細かなコンテンツへ進めます。

今回考えるのは、

文章やコンテンツそのものが「何を意味しているのか」

です。

• 見出しを文字サイズではなく文書構造から考える
• strong・em・b・iの違いを整理する
• mark・small・s・del・insを意味から使い分ける
• time・abbrで情報へ意味を持たせる
• code・pre・kbd・sampを使い分ける
• blockquote・q・citeで引用を表現する
• ul・ol・dlを内容の関係から選ぶ
• figure・figcaptionを適切に使う

今回も共通しているのは、

見た目をどうしたいかではなく、「この内容は何なのか？」からHTMLを選ぶ

という考え方です。

前回のミニチェック｜Modern HTML 1-2 の 回答・解説

Modern HTML 1-2では、section・article・divをはじめ、ページ全体の構造を意味から考えました。

ここで、前回のミニチェック3問を振り返ります。

Q1｜「最新記事」全体と各記事カードは何が候補？

前回の問題では、「最新記事」というまとまりの中に、独立した記事カードが5件ある場合を考えました。

答え：「最新記事」全体はsection、各記事カードはarticleが候補です。

sectionは、1つのテーマを持った関連コンテンツのまとまりを表します。

「最新記事」というテーマで複数の記事をまとめる領域であれば、sectionとして考えやすい例です。

一方、各記事カードは、それぞれが1つの記事として独立して成立するコンテンツなので、articleが候補になります。

大切なのは、見た目がカードだからarticleを使うのではなく、

その内容が独立したコンテンツとして成立するか

から判断することです。

Q2｜補足プロフィールにasideは使える？

答え：はい。記事本文を補足する内容であれば、asideは候補になります。

asideは「ページの右側に置く要素」という意味ではありません。

本文に関連しているものの、主要な内容そのものではない補足情報を表す場合に使えます。

例えば「この記事を書いた人」というプロフィールが、記事本文を補足する情報として配置されているなら、asideとして考えられるケースがあります。

つまり、配置場所ではなく、

その情報が主要コンテンツなのか、補足コンテンツなのか

から判断します。

Q3｜sectionの中なら見出しレベルは自動調整される？

答え：いいえ。ブラウザが見出しレベルを自動的に正しい階層へ変更してくれるわけではありません。

sectionを入れ子にしたからといって、h2が自動的にh3相当になるわけではありません。

h1〜h6は、ページ全体の文書構造を考えながら、自分で適切なレベルを選びます。

HTML要素の入れ子と、見出しの階層設計は別々に考える必要があります。

見出しは文字を大きくするための要素ではない

Modern HTML 1-2でも確認しましたが、見出しはページの文書構造を表します。

h1・h2・h3などを、

「一番大きな文字にしたいからh1」

「少し小さくしたいからh3」

という理由で選ぶものではありません。

見出しレベルは、

ページの中でその内容がどの階層にあるのか

を考えて選びます。

例えば、記事タイトルの下に大きなテーマがあり、その中にさらに小さなテーマがあるなら、階層に合わせて見出しを組み立てます。

<article>
  <h1>Modern HTML 1-3</h1>

  <section>
    <h2>文章の意味を考える</h2>

    <section>
      <h3>strongとemの違い</h3>
      <p>見た目ではなく意味から選びます。</p>
    </section>
  </section>
</article>

<article>
  <h1>Modern HTML 1-3</h1>

  <section>
    <h2>文章の意味を考える</h2>

    <section>
      <h3>strongとemの違い</h3>
      <p>見た目ではなく意味から選びます。</p>
    </section>
  </section>
</article>

上記のコードでは、見出しを見た目ではなく文章構造として組み立てています。

strong・em・b・iを意味から使い分ける

文章の一部を強く見せたいとき、strong・em・b・iのどれを使うべきか迷うことがあります。

見た目だけを見ると似た表示になる場合がありますが、意味は同じではありません。

strongは重要性を表す

strongは、内容の重要性、重大性、緊急性などを表します。

単に文字を太くしたいから使うのではなく、

この内容は重要である

という意味を持たせたい場合に使います。

emは強勢を表す

emは、文章の中でどこを強く読ませるかという強勢を表します。

同じ文章でも、どの単語をemにするかによってニュアンスが変わることがあります。

bは注意を引く

bは、その内容へ視線を向けたいものの、strongのような重要性やemのような強勢を追加しない場合に使えます。

キーワードや、文中で注意を向けたい語などが候補になります。

iは別の声や用語などを表す

iは、通常の文章とは異なる声、専門用語、他言語の表現などに使われることがあります。

他言語を示す場合には、必要に応じてlang属性も合わせて考えます。

下記を見てください。

<p>
  <strong>必ずバックアップを作成してください。</strong>
</p>

<p>
  私が言いたいのは、<em>HTMLから考える</em>ということです。
</p>

<p>
  この章では <b>Semantic HTML</b> というキーワードを扱います。
</p>

<p>
  HTMLでは <i lang="en">semantic</i> という考え方が重要です。
</p>

<p>
  <strong>必ずバックアップを作成してください。</strong>
</p>

<p>
  私が言いたいのは、<em>HTMLから考える</em>ということです。
</p>

<p>
  この章では <b>Semantic HTML</b> というキーワードを扱います。
</p>

<p>
  HTMLでは <i lang="en">semantic</i> という考え方が重要です。
</p>

mark・small・s・del・insも意味が違う

文章には、重要性や強勢以外にもさまざまな状態があります。

markは現在の文脈で注目する部分

markは、現在の文脈で特に関連がある部分や、注目させたい部分を表します。

例えば検索結果の中で、検索した語句に該当する部分を強調するような場面です。

単に黄色い背景を付けたいから使うものではありません。

smallは細則・注記などを表す

smallは、細則、免責事項、著作権表記など、主となる文章に対する補足的な情報に使えます。

単に文字サイズを小さくするための要素ではありません。

sは現在では正確でない・関連性がなくなった内容

sは、以前は正しかったものの、現在は正しくない・有効ではない内容などを表します。

例えば、終了したセールの旧価格などが候補です。

delとinsは変更履歴を表せる

delは削除された内容。

insは追加された内容を表します。

単に取り消し線を付けたい場合と、

文書上「削除された内容」であることを示したい場合

は分けて考えます。

下記を見てください。

<p>
  検索結果：
  <mark>Modern HTML</mark>の記事が見つかりました。
</p>

<p>
  商品価格：3,980円
  <small>※送料は別途かかります。</small>
</p>

<p>
  旧価格：<s>5,980円</s>
</p>

<p>
  <del>公開日は8月20日です。</del>
  <ins>公開日は8月28日です。</ins>
</p>

<p>
  検索結果：
  <mark>Modern HTML</mark>の記事が見つかりました。
</p>

<p>
  商品価格：3,980円
  <small>※送料は別途かかります。</small>
</p>

<p>
  旧価格：<s>5,980円</s>
</p>

<p>
  <del>公開日は8月20日です。</del>
  <ins>公開日は8月28日です。</ins>
</p>

日時・略語・コード・入力・出力を意味で分ける

文章中には、人間が読むだけでなく、HTMLとして意味を持たせられる情報があります。

代表的なのが、

• 日時
• 略語
• コード
• 整形済みテキスト
• ユーザー入力
• プログラムからの出力

です。

timeは日時を表す

timeは日時を表します。

datetime属性を組み合わせることで、人間向けの表示とは別に、機械が扱いやすい日時を指定できます。

abbrは略語を表す

abbrは略語や頭字語を表します。

必要な場合はtitle属性を使って正式名称を補足できます。

ページ内に登場する略語をすべてabbrにするのではなく、説明する意味がある場所で使います。

codeはコンピューターコードを表す

codeは、プログラムコードやファイル名、コマンドなど、コンピューターに関係するコードを表します。

preは空白や改行を保持する

preは、入力した空白や改行を保持して表示する整形済みテキストを表します。

複数行のプログラムコードでは、

preとcodeを組み合わせる

形がよく使われます。

kbdはユーザー入力

kbdは、ユーザーが入力する内容を表します。

例えばキーボード操作などです。

sampはシステムからの出力

sampは、プログラムやコンピューターシステムが返した出力例を表します。

まず、timeとabbrの例を下記で確認します。

<p>
  公開日：
  <time datetime="2026-08-28">2026年8月28日</time>
</p>

<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  はWebページの意味や構造を表します。
</p>

<p>
  公開日：
  <time datetime="2026-08-28">2026年8月28日</time>
</p>

<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  はWebページの意味や構造を表します。
</p>

続いて、code・pre・kbd・sampの例を下記で確認します。

<p>
  ビルドするときは
  <code>npm run build</code>
  を実行します。
</p>

<pre><code>npm run build
npm run start</code></pre>

<p>
  保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押します。
</p>

<p>
  成功すると <samp>Build completed</samp> と表示されます。
</p>

<p>
  ビルドするときは
  <code>npm run build</code>
  を実行します。
</p>

<pre><code>npm run build
npm run start</code></pre>

<p>
  保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押します。
</p>

<p>
  成功すると <samp>Build completed</samp> と表示されます。
</p>

引用・リスト・figureもコンテンツの意味から選ぶ

HTMLでは、文章の一部分だけでなく、コンテンツのまとまりそのものにも意味を持たせられます。

今回確認するのは、

• 引用
• リスト
• 図版やコード例

です。

blockquote・q・citeで引用を表す

ほかの情報源から文章を引用する場合も、引用の形によって使う要素が変わります。

blockquoteはブロック単位の引用

長めの文章などを、独立した引用ブロックとして扱う場合はblockquoteが候補になります。

qは文中の短い引用

通常の段落の中で、短い言葉や文章を引用する場合はqが候補になります。

citeは作品名を表す

cite要素は、書籍、記事、映画、Webページなど、作品や著作物のタイトルを表すために使います。

人名を機械的にciteで囲むものではありません。

下記を見てください。

<blockquote cite="https://example.com/source/">
  <p>これは外部の情報源から引用した文章です。</p>
</blockquote>

<p>
  著者は
  <q>HTMLは意味から選ぶ</q>
  と説明しています。
</p>

<p>
  参考：
  <cite>HTML解体新書</cite>
</p>

<blockquote cite="https://example.com/source/">
  <p>これは外部の情報源から引用した文章です。</p>
</blockquote>

<p>
  著者は
  <q>HTMLは意味から選ぶ</q>
  と説明しています。
</p>

<p>
  参考：
  <cite>HTML解体新書</cite>
</p>

ul・ol・dlは「箇条書きだから」で選ばない

リストにも意味の違いがあります。

ulは順番に意味がないリスト

項目の順番が入れ替わっても意味が変わらない場合に使います。

olは順番に意味があるリスト

操作手順やランキングなど、順序そのものに意味がある場合に使います。

dlは名前と説明や値の組

dlは用語集だけではありません。

名前と説明、項目と値などの組み合わせを表現できます。

下記を見てください。

<h2>必要なもの</h2>

<ul>
  <li>エディター</li>
  <li>ブラウザ</li>
  <li>HTMLファイル</li>
</ul>

<h2>確認手順</h2>

<ol>
  <li>HTMLを書く</li>
  <li>保存する</li>
  <li>ブラウザで確認する</li>
</ol>

<h2>用語</h2>

<dl>
  <dt>HTML</dt>
  <dd>コンテンツの意味や構造を表します。</dd>

  <dt>CSS</dt>
  <dd>見た目やレイアウトを担当します。</dd>
</dl>

<h2>必要なもの</h2>

<ul>
  <li>エディター</li>
  <li>ブラウザ</li>
  <li>HTMLファイル</li>
</ul>

<h2>確認手順</h2>

<ol>
  <li>HTMLを書く</li>
  <li>保存する</li>
  <li>ブラウザで確認する</li>
</ol>

<h2>用語</h2>

<dl>
  <dt>HTML</dt>
  <dd>コンテンツの意味や構造を表します。</dd>

  <dt>CSS</dt>
  <dd>見た目やレイアウトを担当します。</dd>
</dl>

figureは「画像を囲むためだけ」の要素ではない

figureは画像専用の要素ではありません。

本文から参照でき、独立して扱える図・例・素材

などをまとめる場合に使えます。

例えば、

• 画像
• 図表
• コード例
• 図解
• 写真

などが候補になります。

figcaptionを使えば、そのfigureに対するキャプションを付けられます。

ただし、すべての画像を必ずfigureへ入れる必要はありません。

下記を見てください。

<figure>
  <pre><code><button type="button">
  保存
</button></code></pre>

  <figcaption>
    button要素を使った操作ボタンの例
  </figcaption>
</figure>

<figure>
  <pre><code><button type="button">
  保存
</button></code></pre>

  <figcaption>
    button要素を使った操作ボタンの例
  </figcaption>
</figure>

実務ではどこで使う？

今回扱った要素は、実際のWeb制作でも頻繁に使います。

技術記事を書くとき

ToshiLabのようなプログラミング記事では、code・pre・kbd・samp・figure・figcaptionなどを使う場面があります。

更新履歴を見せるとき

価格変更や文章修正では、s・del・insを内容に応じて使い分けられます。

FAQや手順を書くとき

順番に意味がある操作ならol。

順番を入れ替えても問題ない項目ならul。

名前と説明の組ならdl。

というように情報構造から選べます。

CMSやWordPressの記事設計

ビジュアルエディタでは見た目を先に考えやすいですが、元になるHTMLの意味を理解していると、ブロックを選ぶ基準も明確になります。

アクセシビリティと保守

意味のあるHTMLを使うことで、支援技術だけでなく、あとからコードを読む人にもコンテンツの役割を伝えやすくなります。

迷ったときの確認ポイント

今回できるようになったこと

Modern HTML 1-3 ミニチェック

Q1

「この操作は必ず保存してから終了してください」という、特に重要な注意書きがあります。

内容そのものの重要性を示したい場合、strong・bのどちらが候補になるでしょうか？

Q2

「Ctrl + Sを押すと、画面に『Saved successfully』と表示されます」

と説明します。

「Ctrl + S」と「Saved successfully」は、それぞれkbd・samp・codeのどれが候補になるでしょうか？

Q3

記事内にスクリーンショットが1枚あります。

すべての画像は必ずfigureで囲まなければならないでしょうか？

まとめ

Modern HTML 1-3では、ページ構造よりさらに細かな、文章とコンテンツの意味を考えました。

今回のポイントは、

• strong・em・b・iは見た目ではなく意味が違う
• mark・small・s・del・insにはそれぞれ役割がある
• time・abbrは情報そのものへ意味を持たせられる
• code・pre・kbd・sampは技術的な文字列の種類を区別できる
• blockquote・q・citeは引用の役割から選ぶ
• ul・ol・dlは順序や情報の関係から選ぶ
• figureは画像専用ではない

という点です。

HTMLを書くときに、

「どう見せたいか？」

より先に、

「この内容は何なのか？」

と考える。

この習慣がSemantic HTMLの土台になります。

前回を確認する

Modern HTML 1-2では、

section・article・div、header・nav・main・aside・footerなどを使ったセマンティックなページ構造

を整理しました。

Modern HTML 1-2

Modern HTML 1-2｜セマンティックHTMLとページ構造｜section・article・divを使い分ける

次に読む

次回は、

Modern HTML 1-4｜モダンなフォーム設計

へ進みます。

label・input・buttonなどの基本から、入力タイプ、ブラウザ標準のバリデーション、アクセシビリティまで、

フォームだからすぐJavaScriptへ進むのではなく、まずHTML標準で何ができるのか

を整理します。

ミニチェックの回答は1-4で掲載

Modern HTML 1-4｜モダンなフォーム設計｜HTML標準で使いやすいフォームを作る

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。