Qiitaなどで、本文中の見出しにh1要素は使わずh2要素から始めたほうがいいよね、という話です。
Qiitaに限らず、記事のような形態のコンテンツを扱うあらゆるプラットフォームに対しても、同じことが言えます。
本文中の見出しにh1要素を使わないほうがいい理由
Qiitaなどの記事ページでは、タイトルにh1要素が使われていることが多いです。
そのような状況で本文中の見出しに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には、そもそも見出しをつくる機能がありません。
これはこれで潔いですね。