htmlのタグで<h1>とか<h2>とかプロは使うの？

Question

htmlのタグで<h1>とか<h2>とかプロは使うのですか。このタグは見出し等に使う様ですなんか曖昧な感じがします。cssで文字サイズと指定できるし、使いづらい印象です。

Answer 1

htmlのタグで<h1>とか<h2>とかプロは使うのですか。

使います。むしろプロこそ使います。

cssで文字サイズと指定できるし、使いづらい印象です。

まずここから既に間違ってます。
HTMLはあくまで文書の「情報構造」を定義するためのものであり、見た目を定義するものではありません。
特に見出しはその文書の「骨格」とも言うべきアウトラインを形作る役割をもっており、
数あるHTML要素の中でも特に重要な意味を持つものであると言えます。

上図のように、見出し要素はその文書の主題を表すh1を頂点として、
h2→h3→...→h6 と、情報の階層構造に合わせてレベルを下げていく使い方をします。
原則としてこの順番を入れ替えることはできません。（h2より先にh3が現れるといった使い方はNG）

見出し要素は、その見出しが現れたところから、次に同じレベルの見出しが現われるところまでを
ひとつの情報の固まり（=セクション）としてみなします。
したがって、情報の階層構造に合わせて正しく見出しレベルを設定すれば、
基本的にそれだけで情報のツリー構造＝アウトラインが作られる仕組みとなっています。
（＝暗黙のアウトライン生成）

HTML5では更にこのひとかたまりのセクション（見出しとそれに伴うコンテンツの固まり）を

<section>などのセクション要素で囲むことで、明示的にアウトライン構造を示すこともできるようになっています。

見出しに限らず全てのHTML要素には意味があり、ただのテキストデータの固まりを、
機械からでも読み取りやすい文書情報として意味付けするのが役割です。
そうやってHTMLによって文書構造の土台をきちんと作り、その上で見た目に関してはCSSを使って
自由にデザインをする、というのが今のWebの作り方です。

なので当然プロこそ見出しはちゃんと使います。

Answer 2

htmlのタグで<h1>とか<h2>とかプロは使うの？

そりゃ、使うでしょう。

小説家だから、「話す」とか「見る」とか、
基本的な単語を使わないわけではないでしょう。

状況によってマイナーなタグでもより適切に使う、
という違いなら出てくると思いますが。

---

使いづらい印象

ただ、お気持ちは分かります。HTMLの登場自体は画期的でしたが、
HTMLのタグが使いやすいかというと微妙です。

そもそもインターネット自体が若い技術だし、あか抜けないところがあります。
凝ったデザインだと、Divばかりゴチャゴチャして、分かりにくいとか。

---

しかし、HTML5時代になって、セマンティック面が強化されました。

実践！すぐに導入できるセマンティックなマークアップ、4つのパターン

詳細は上記事に譲るとして、「article」は本文といったように、
自然言語の意味を表すように進化しています。

最近はあまり流行らなくなりましたが、かつて注目された
セマンティックWEBとかオントロジーといった流れは、
RDFなどを通じてまだ続いているわけで、その延長線上の進歩です。

質問者の方のご不満が、今すぐ解決するわけでもないでしょうが、
タグが不自然で使いづらいという問題は、発展的に解消していくと思います。

Answer 3

タグの存在意義に関しては、歴史を追うと分かりやすいと思います。
元々は研究機関の中で研究内容を統一したフォーマットにしてやり取りする為に作られた様式です。

今でこそ掲示板やSNS、果てはショッピングカートという想定外の使い方をし始めたので、
ニーズの変化に応じて拡張に拡張を重ねてHTML5という様式までバージョンが上がりましたが…

話をもどしますが、HTMLで用意されているタグは、
Wordの見出し行や本文、箇条書き、テーブル、グラフ（imgが該当）に相当しています。
文書の方は見た目ではなく、タグの意味を考えて名付けるようにしてみてください。

htmlのタグで<h1>とか<h2>とかプロは使うの？

使います。

ただし、下手に乱用すると文書として成立していないとみなされますので、
重要なここぞという文言に利用してください。
適切に利用出来れば人間にも分かりやすい上、Google等のサーチエンジンにも良い文書として評価してもらえます。

例えば見出しに相当するheading要素は
大見出し(h1)→中見出し(h2)→小見出し(h3)という括りで名付けられています。

大見出しもなく、いきなり小見出しから始まる記事や文書や資料は存在しますか？
答えはもちろんNO
h1から始まり、森を説明した後に木を説明する段階で小見出しになるh2以降を使いましょう。

逆にDIVやSPAN要素はCSSの初期値が反映されず使いやすいですが、
文書としては意味がない要素なので多用は避けましょう。

Answer 4

この質問のページで「ctrl + U」を押してみましょう。h1要素を使っていることが分かるはずです。
もちろん、teratailのエンジニアがド素人である、という可能性は捨てきれませんが。

参考：
HTML5でh1タグを正しく使う - Qiita

Comments

[退会済みユーザー]

本当だありますね。h1ってでかい文字を出すのに使うのかと思ってましたよ。qiita読んで正しい使い方を理解します。

Answer 5

H1などは大きい文字にするための要素ではなく、「見出しである」ことを意味付けするために使います。
それを「マークアップ」と呼ぶこともあります。
文字の大きさのような見た目についてはそれこそCSSでいくらでも調整が利くので、
「文字が大きくなり過ぎるから使わない」ということはないです。