いまこそ読むMDN Web Docs (5) - HTMLの見出しと段落、強調と重要性

はじめに

MDN Web Docs の HTML によるコンテンツの構造化 に関するページを読みます。

今回は、以下の 2 つのページを確認しました。

これまで読んだページのまとめは以下の通りです。

• いまこそ読む MDN Web Docs - HTML: ハイパーテキストマークアップ言語
• いまこそ読む MDN Web Docs (2) - HTML: コンテンツの作成
• いまこそ読む MDN Web Docs (3) - 基本的な HTML の構文
• いまこそ読むMDN Web Docs (4) - ヘッド部には何が入る? ウェブページのメタデータ

※ 読み進め方や、なぜ今あらためて MDN Web Docs を読んでいるのか については、以前の記事 に書いています。

1. 「見出しと段落」を読みながら確認したこと

まずは「見出しと段落」です。

1-1. <p> 要素、<h1> 〜 <h6> の使い方

見出しの要素が、<h1> 〜 <h6> で、段落の要素が <p> です。

<p>これは段落です。</p>

<h1>記事全体のタイトル</h1>
<h2>大きな章の見出し</h2>
<h3>章の中の小見出し</h3>

見出しの注意点としては以下のことが書いてあり、基本として押さえておくと良さそうです。

• できれば、 1 ページに 1 つの <h1> を使用するのが望ましい
• たとえば、<h3> 要素を使用した後に <h2> 要素を使用しない
• 利用できる 6 つの見出しレベルのうち、必要と思われる場合を除き、 1 ページにつき使用するのは 3 つまでにすることを目標とする

見た目（文字サイズや余白など）は CSS で調整し、HTML では文書の階層を正しく表す、という意識がここでも重要だと感じました。

1-2. なぜ構造が必要なのか

MDN では、構造がない文章はブラウザ上で 1 つの大きなテキストの塊のように見えてしまう、という例が紹介されていました。

• 見出しや段落などの構造がないと見づらい
• SEO の観点でも、見出しがないと検索エンジンはどんな記事か読み取ってくれない
• アクセシビリティの観点でも、目の不自由な人が使うスクリーンリーダーで、必要な情報を見つけることが難しくなる
• タグで構造化することで、CSS でスタイルを当てたり、JavaScript で動きをつけたりできる

人間、検索エンジン、スクリーンリーダーのために HTML で構造を作ることと、見た目を整える前の土台になるので、そのために構造は必要、ということを理解しました。

1-3. なぜ意味づけが必要なのか？

そのテキストがタイトルなのか本文なのか、などは適切なタグで意味づけすることで、検索エンジンやスクリーンリーダーなどは判断ができる、ということが書いてあります。

逆にいうと適切でないタグを使っていると、誤認させてしまうこともありうるということですので、注意したいところです。

説明には <span> 要素 をタイトルくらいの文字サイズにスタイルを当てて、見た目はタイトルっぽくする例示がありますが、この場合には検索エンジンなどはタイトルとしては受け取らないのでよくない、ということです。

2. 「強調と重要性」を読みながら確認したこと

続いて、「強調と重要性」です。

2-1. 強調

強調 は、話し言葉だと、強く発音したりして伝えたい意味を微妙に変えたりするときに使います。

以下は強調の有無の例です。

私は別に冷蔵庫の私のプリンを食べたことを怒ってないから。

私は別に冷蔵庫の私のプリンを食べたことを怒ってないから。

2つ目のように「別に」「怒ってない」に強調があると、ちょっと怒ってそうですね。

HTML で強調したいときは、<em> を使います。見た目は斜体になります。

<p>私は<em>別に</em>冷蔵庫の私のプリンを食べたことを<em>怒ってない</em>から。</p>

というように <em> 要素を使うと、スクリーンリーダーは異なるトーンの音声で話すようです。

<i> 要素や、<span> 要素に斜体のスタイルを当てても同じ見た目にはなりますが、スクリーンリーダーなどは強調の意味づけとしては受け取らない、という注意点があります。

2-2. 重要性

話し言葉では重要な言葉であるときにも強く発音したりして重要であることを伝えます。

HTML では <strong> 要素を使います。

<p>来週の月曜日は<strong>妻の誕生日</strong>だ。プレゼントを忘れるなんてことは<strong>絶対にあってはならない</strong>。</p>

というように、<strong> 要素を使うと、<em> 同様、スクリーンリーダーは異なるトーンの音声で話すようです。

<b> 要素でも太字にはなりますが、意味づけはされない、ということですね。

マークダウンでは 重要 は <b> なのか<strong> なのか

前回投稿した Qiita の記事で 重要 のマークダウンを使っているところを確認してみたところ、HTML の <strong> に変換されていました。

Qiita の場合はそうでしたが、常にそう変換されるかは確認が必要です。

2-3. 下線

下線を見ると人は、ハイパーリンクを連想してしまうので、リンク以外には使わないのが最善とあり、人が意味づけを持っている見た目にしない、というのは大事だと思いました。

確かに下線があるだけでハイパーリンクに見えてしまうのはわかります。

HTML の話ではないですが、日頃 Slack などで、引用やコードブロックを構造化に用いたりするのを見ることがありますが、意味づけに誤解を生むので、本来の使い方以外の使い方は避けたほうがいいと思えました。

おわりに

今回は、HTML によるコンテンツの構造化として、見出しと段落、強調と重要性について確認しました。

<p>、<h1> 〜 <h6>、<em>、<strong> などは、見た目を変えるためだけのものではなく、コンテンツの構造や意味を表すための要素です。

見出しを正しい階層で使うこと、強調には <em>、重要性には <strong> を使うことなど、基本的なことではありますが、アクセシビリティや SEO の観点でも重要だと分かりました。

見た目だけを同じにしても、HTML として同じ意味になるわけではないという点は意識しておきたいです。

HTML はブラウザに表示するためだけではなく、検索エンジン、スクリーンリーダー、CSS、JavaScript など、さまざまなものに情報を伝えるための土台なのだと感じました。

引き続き MDN を読みながら、基礎の理解を固めていきたいと思います。

ありがとうございました。