h1タグは複数使っても良いのですか？

Question

コーディング上達のために、こちらの模写を作成しています。
https://pas-pol.jp/

上記のサイトのソースコードをみて自分のと照らし合わせてみていました。
それでいくつかきになるところがあります。

・h1タグを複数使っているって問題ないですか？
h1タグは基本的に1個、複数使っても良いが関連があるものだけみたいなイメージでしたが、コンセプト以外にも
product、NEWSといった小見出しにも使っていてこれって正しいのかなと思いました。

・h2タグの位置が僕の書いたコードと違う
僕はproduct/NEWSといった小見出しにh2を入れましたが、こちらは記事のタイトルなどにh2を入れています。
h2はどういう理由で普通どこにつけるべきなのかということを知りたいです！

もちろん何が正解とかはないと思いますし、僕が素人なだけなんですが、
何が最適なのかは知りたいのでコーディング詳しい方教えてください。

h2タグの位置が僕の書いたコードと違うは↓のような感じです。
※productにh2をかけています。

<section>
	<div>
		<h2>PRODUCT</h2>
		<a href="#">MORE</a>
	</div>
	
	<div>
		<ul>
			<li>
				<a href="#">
					<img src="image/banner_thumb1.png" alt="365日 北海道 絶景日めくりカレンダーの画像">
					<p>365日 北海道 絶景日めくりカレンダー</p>
				</a>
			</li>
			
			<li>
				<a href="#">
					<img src="image/thumb_gokkaido.png" alt="365日 北海道 絶景の旅の画像">
					<p>365日 北海道 絶景の旅</p>
				</a>
			</li>
			
			<li>
				<a href="#">
					<img src="image/thumb_fes.png" alt="海外の音楽フェス完全ガイドの画像">
					<p>The World Festival Guide -海外の音楽フェス完全ガイド-</p>
			
				</a>
			</li>
			
			<li>
				<a href="#">
					<img src="image/banner_サムネイル21.png" alt="この世界で死ぬまでにしたいこと2000の画像">
					<p>この世界で死ぬまでにしたいこと2000</p>
				</a>
			</li>
			
			<li>
				<a href="#">
					<img src="image/365日本カレンダー_サムネイル1.png" alt="365日日本一周 絶景日めくりカレンダーの画像">
					<p>365日日本一周 絶景日めくりカレンダー</p>
				</a>
			</li>
			
			<li>
				<a href="＃#">
					<img src="image/passportnotebook-thumb11.png" alt="PASSPORT NOTEBOOK seriesの画像">
					<p>PASSPORT NOTEBOOK series</p>
				</a>
			</li>
		</ul>
	</div>
</section>	
<!--//プロダクトエリア-->
コード

Answer 1

これは、HTMLのアウトラインに関わる話なので、よく調べられるとよいかと。

結論を書くと、
HTML5限定でh1要素の複数出現が許可されています。
ただし、セクショニング要素内で一回のみというルールになります。
ようは、同アウトライン上に一回、ということです。

しかし、HTML5.1以降は、再び、
同ページ内で、h1要素の出現は一回が望ましい、と従来のアウトライン方式に戻りました。

よって、
ダメではないけど、望ましくはなく、ブラウザ、または検索ロボットが、正しく解釈してくれるよう、一回の出現にすべき
であると言えます。

Answer 2

h1タグを複数使っているって問題ないですか？

⇒問題ないです。
サイトの制作者がどの意図でそのタグを使っているかによりますが、
このサイトを作った人は恐らくタイトルくらいの意味合いで使っているのではないかなと思います。

別にこのh1タグの部分が pタグや spanタグでもCSSで大きさなどはいくらでも変えられますし、
制作者以外の人がソースコードを見たときにどこがタイトルなのか理解できるようにh1タグ使っているだけです。

h2タグの位置が僕の書いたコードと違う

⇒これも上記と同じで、質問者さんは中くらいのサイズはh2にしようと思ってコーディングしただけであって、
見本サイトを作った制作者さんは大きめのタイトルは全部h1でいいやという考えでコーディングしてるのかもしれません。

Newsなどが h2タグになるなら、記事のタイトルは h3タグで質問者さんは書くんでしょうかね。

---

まとめますが、別にh1タグなどは使わなくてもコーディングは出来ます。

が、他の人がソースコードを見たときにこれがタイトルだとわかりやすくするために h1タグや h2タグを使っているだけです。

Comments

[miyabi_pudding]

文法上問題なくても、HTML5.1以降では望ましくないとされています。
なので、大手を振って問題ない、という回答はよろしくありません。

[miyabi_pudding]

> 他の人がソースコードを見たときにこれがタイトルだとわかりやすくするために h1タグや h2タグを使っているだけです。

これが大きく間違っています。
要素には固有の仕様と、ブラウザなどが解釈する意味が存在します。

要素のセマンティクスは、人間側が解釈するためではなく、
アプリケーション側にそのWebページの意図を正しく解釈させるために存在してます。
よって見た目や、人間側の解釈を理由に止めるのはあまりにも軽率です。

[Daregada]

HTMLの話をするときには、タイトルと見出しの用語は注意深く扱いましょう。