React で h1-h6 を正しく使い分ける

Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を３つずつご紹介します。 尚、この記事で紹介するコードスニペットは GitHub リポジトリに動作する状態で公開しておりますので、併せてご参照ください。 前提知識 読者のみなさまは、HTMLの要素 h1-h6 にどのような役割があるか説明できますか？ 大きい文字を出したかったらh1を使って、それより少し小さい文字を出したかったらh2を使う...わけではありませんでした。h1-h6 は 「見出し要素」 と呼ばれ、文章の見出しとなるテキストをマークアップするのに用いられて

[miki3k]

ハイパーテキストをマークアップするために作られた仕様なので

[mayumayu_nimolove]

webデザイナー経験者は無意識にやっちゃうけど webアプリケーションでは必要ないだろと思ったけどアクセシビリティで使うのか。

[otchy210]

タイトル読んで「Context 使ってインクリメントかな？」と思ったので、答えが合っていて嬉しかった。

[mohritaroh]

“MDNでは１つのウェブページ内ではh1要素を１つだけ使うことがベストプラクティスとして紹介されています。”

[chocodoughnut]

見出しレベルを問わない見出しタグが欲しい

[ejointjp]

ウェブアプリはもうセマンティックHTMLとは別の概念で作れるようにすべきでは

[programmablekinoko]

亡霊のように蘇るマークアップ要素。そのうちセマンティックスは属性で指定する方が良いのでは感

[yasu-log]

自動hタグに相当するDocument Outline Algorithmとしてほとんどブラウザや支援技術に実装されなかったから、自前で頑張るのが現在は望ましく、ReactのContext APIで工夫する手段が紹介されている。

[repon]

lintでやるしか無いんじゃないかな

[ultimatebreak]

h1何個でもオッケーだったの消されてたのか

[neco_modoki]

ここまで徹底しないといけないほど大事な要素なのか…奥深いマークアップの世界

[shishikaba]

このご時世hに数字はもう要らないよなぁってなる

[kvx]

h1-6はhtml側でどうにかして欲しいなー。↓の-1,0,+1方式はいいな。

[hirata_yasuyuki]

section で解決出来ないのか。厳しい…

[azukiazusa]

見出しレベルを Context API で管理する、なるほど…

[mominis]

直前の見出し要素のレベルを基準に-1, 0, +1したレベルの見出しとして扱われるような要素があれば解決できるのかなこれは