noteを書いている皆さんはnoteを書く上で、
どのくらい見出しを意識して使用しているだろうか？

noteの見出しの選択肢にある「h2」「h3」ってなんだろうと疑問に思った人はいるだろうか？

今日は、noteの見出しについて
思ったことを書いてみる。

ちなみに先に断っておくが、noteの仕様に文句があるわけではなく、同じことを思っていた人がいたらそれがスッキリしたらいいなと思っている。

私はwebデザイナーを生業としている。
webデザイナーと一口に言っても、デザインメインの人もいるし、コーディングといって実際にサイトのコードを構築し、起こしたデザインをweb上で見られるようにするwebデザイナーもいる。
私はデザインもコーディングも対応するタイプのwebデザイナーなので、コードの中身が気になってしまったので、思い立ってnoteに書き記す。

見出しの選択に「h1」がない

noteを書いていて、「T」の選択肢があったので押すとでてくるのが下記、見出しの選択スライドだ。

これを見てまず思ったのが
「h1がないじゃないか」という点だ。

そもそもこの「h1」「h2」「h3」というのは、HTMLというwebサイトを構成するタグの１つで、細かいことは省略するが、タイトルを表すタグだ。hタグという。(headingの略だ)
そしてこのタグは、検索をした際に引っかかるための重要なキーワードだ。

話を戻して、選択肢にh1がない…
と思った数秒後にnoteのタイトル自体がh1であることに気づく。
ただ、なんとなく、h2とh3の選択肢があってh1がない点が少し気持ち悪かった…。

ちなみにHTMLのルールとして、「h1」のタグは基本的に1つにすることが決まっている。
複数あっても問題は出ないのだが、ルール上あまりよろしくはない。
なので、選択肢として選択できないのも当然のことであることに気がつき、納得した。
(ちなみにh2やh3は複数使用可能だ)

「h2」と「h3」の違いはなんなのか

さて、そうなると残るは
「h2」と「h3」の違いについて。

noteの見出しの定義として、
h2→大見出し
h3→小見出し
としているが、h1を含めてもう少し詳細に説明するとすると下記のようになる。

基本的に
h1→ページ全体の見出し(このページがどういうページなのか簡潔に書いておく)
h2→項目の見出し
h3→h2項目の内容をさらに分割したい場合に使う見出し
となるのが美しいコードだと考えている。h2をすっ飛ばしてh3を見出しとすること自体は、問題はないのだが、美しくはないなと思ってしまう。
(HTMLというのはルールこそあるが、なんとなくでもブラウザが補完してくれたりして形にはなってくれたりする)
noteはスマホのアプリやブラウザで読む人が多いだろうから、文字数が多くなりすぎると読みづらくなるので、h3まで使う必要はあまりないかなあとも思う。

つまり、基本的に文書の中で使うときは
h2を選択するのがおすすめだ。

ほとんどの人が特に意識していないことかもしれないが、少し意識するとより正しいコードで投稿され、検索されたときに検索の順位が上がってアクセスされやすくなる…と思う。
(検索順位については、このhタグの工夫だけで上がるほど簡単ではないので、もう少し興味がある人は「SEO対策」など検索すると良いだろう。)

まとめ

長々と書いたが、きっとほとんどの人が見出しの選択にある「h2」「h3」がなんなのかよくわからず使っているのだろう。

わからなくてもなんの問題もないのだけど
わかって使うとなんとなく気持ちの良いものだと思う。

もし、この投稿読んで、
なるほど〜と思っていただけたら
嬉しいです。

最後までお読みいただき
ありがとうございました。

eri