3
2

More than 1 year has passed since last update.

Qiitaなどで本文中の見出しにh1要素は使わずh2要素から始めたほうがいい

Last updated at Posted at 2023-05-03

Qiitaなどで、本文中の見出しにh1要素は使わずh2要素から始めたほうがいいよね、という話です。
Qiitaに限らず、記事のような形態のコンテンツを扱うあらゆるプラットフォームに対しても、同じことが言えます。

本文中の見出しにh1要素を使わないほうがいい理由

Qiitaなどの記事ページでは、タイトルにh1要素が使われていることが多いです。

スクリーンショット 2023-05-03 10.36.38.png

そのような状況で本文中の見出しにh1要素を使うと、それらの見出しがタイトルと同じレベルになってしまいます。
これは、HTMLのセマンティクスに反しています。

また、MDNの見出し要素についてのページでも、1つのページには1つのh1要素を置くのが一般的であるとされています。

1 つのページに複数の <h1> 要素を使用することは HTML 標準では認められていますが(入れ子でない限り)、これはベストプラクティスとはみなされません。1 つのページには、ページの内容を説明する 1 つの <h1> 要素(ドキュメントの <title> 要素と同様)を置くのが一般的です。

どうすればいいのか

記事のタイトルにh1要素が使われている以上、本文中の見出しにはh2要素以下の見出し要素を使うべきでしょう。

<h2></h2>

Markdownの場合は、##になります。

## 例

エディタの書式バーで見出しを設定する場合も、h2要素に相当するものを選びましょう。
「見出し1」から並んでいるとついつい「見出し1」を使いたくなるかもしれませんが、そこはぐっとこらえて「見出し2」を使ってください。
ただし、「見出し1」がh2要素に相当する場合はその限りではありません。

各プラットフォームにおける扱い

参考までに、各プラットフォームにおける見出しの扱いを見てみましょう。

Qiita

QiitaではMarkdown記法がそのまま紹介されており、本文中の見出しにh1要素を使うことの是非については触れられていません。

Zenn

ZennではMarkdown記法としての#の存在は紹介しつつも、##から始めることが推奨されています。

はてなブログ

はてなブログで使えるはてな記法では、もっとも大きい「大見出し」がh3要素となっています。
それはそれでh1要素の次がいきなりh3要素になってしまうので、はてな記法ではなくHTMLやMarkdownで書いたほうがよさそうです。

note

noteで使える見出しは「大見出し」と「小見出し」の2種類のみで、「大見出し」がh2要素、「小見出し」がh3要素となっています。
ユーザーにHTMLに関する知識がなくても、自然と正しいマークアップになるのがいいですね。

Scrapbox

Markdownではなく独自記法を採用しているScrapboxには、そもそも見出しをつくる機能がありません。
これはこれで潔いですね。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2