HTML講座 / テキストの意味を表すem・strong・引用・コード

HTMLでは、強調、重要性、引用、略語、コード、利用者のキー入力などを専用の要素で表せます。太字や斜体に見せたいから選ぶのではなく、その文章が持つ意味に合わせてem、strong、q、codeなどを使い分けます。

emとstrongの違い

emは語句への強勢による強調、strongは重要性、重大性、緊急性を表します。次の最初の文では保存する順番を強調し、二つ目ではパスワードを共有しないという重要な注意を示しています。

<p>Save the file <em>before</em> refreshing the browser.</p>
<p><strong>Do not share your password.</strong></p>

初期状態で斜体や太字になることはありますが、見た目だけを目的に選びません。装飾だけを変える場合はCSSを使います。重要な文をすべてstrongで囲むと、どこが特に重要か分かりにくくなります。

qとblockquoteで引用を表す

文章中の短い引用にはq、独立した引用部分にはblockquoteを使います。引用符や字下げの初期表示はブラウザーやCSSによって変わります。

<p>The notice says <q>Save your changes</q>.</p>
<blockquote>
  <p>Plan the document structure before writing its content.</p>
</blockquote>

引用元がある場合は、読者が確認できる出典を近くに示します。cite属性にURLを書いても、出典リンクが自動的に画面へ表示されるわけではありません。単に字下げしたい文章を引用扱いにせず、実際の引用と自分の説明を区別します。

abbrで略語を説明する

abbrは略語を表し、titleに正式名称を記述できます。ただし、マウスを載せて表示する補足だけに頼ると、タッチ操作やキーボードでは情報を得にくい場合があります。初出では本文にも正式名称を書きます。

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) defines the structure of a web page.</p>

この例ではHyperText Markup Languageという正式名称とHTMLという略語を対応させています。後続の文章では、読者が意味を理解できる範囲で略語を使えます。

codeとkbdを使い分ける

codeはコードや識別子など、kbdは利用者が入力するキーや入力内容を表します。次の例ではファイル名と保存操作を区別しています。

<p>Save <code>index.html</code> with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

キーボード操作はOSやアプリで違う場合があります。説明する環境に合わせて、必要ならMacの保存操作なども補足します。複数行のコードでは、preで空白と改行を保ち、その中のコードをcodeで表す方法もあります。MDNのcode要素に内容の定義があります。

完全な文書で意味と表示を比べる

次のコードをindex.htmlとして保存し、ブラウザーで開いてください。強調、重要な注意、引用、略語、キー入力を一つの文書で比較できます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text semantics practice</title>
</head>
<body>
  <h1>A short notice</h1>
  <p>Check the result <em>after</em> saving the file.</p>
  <p><strong>Keep the original file.</strong></p>
  <p>A fictional instruction reads <q>Save your changes</q>.</p>
  <p>This uses HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Save with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Example sentence&lt;/p&gt;</code></pre>
</body>
</html>

各要素の文字サイズや色だけでなく、文章中の役割が合っているかを確認します。CSSを無効にしたり変更したりして見た目が変わっても、引用や重要性という意味はHTMLに残ります。例文を変えるときは、その意味に合う要素も見直してください。

文章の役割から要素を選ぶ

強く読ませたい語句なのか、重要な警告なのか、他の資料からの引用なのかを先に判断します。見出しや段落の整理には見出しと段落を使い、意味を追加する必要がある語句にだけ適切な要素を付けます。用途に迷ったらMDNのHTML要素一覧で定義と使用条件を確認できます。