Q&A
> 特に明確な理由が示されておらず
説明部分にリンクが入っていましたが、その内容は確認されましたでしょうか？
Do not use multiple
<h1>elements on one page
MDNの英語版では現在、上記のように「h1を複数使ってはならない」と書かれています。
これまでの仕様でも「h1要素はページに1つだけ」といった言及はされていないはずですが、なぜこのように「h1要素は1つだけ」と言われるようになったのでしょうか。
特に明確な理由が示されておらず疑問に思っています。これについて何かご存知でしたら教えて頂けると幸いです。
はい。読んでいますが、アウトラインアルゴリズムの廃止はall-h1アプローチを否定するだけであって、h1を複数書いてはならないことの理由にはなっていないと考えています。
MDNには「h1を複数書くのはベストプラクティスではない」とも書かれていますが根拠が不明です。
> 根拠が不明です。
「was allowed in older versions of the HTML specification」とわざわざ書いてあるということは、現在のHTML specificationでは問題視されていることを暗示しているようにも読めますが、そちらの確認はしてみましたか？
（何を調べたかが書かれていないと、回答者が調べたのに「それは知った上での質問です」となって無駄が大きくなります）
恐れ入ります。仕様書等にはある程度目を通しております。
h1を一つだけにすべきだとは思っていないため、理由があるのだとしたらそれをお聞きしたい次第でした。
回答4件
9
以下で質問されてますが、MDNの記事についてメンテナは根拠を明確に示されてないみたいですね
https://github.com/mdn/mdn-community/discussions/232
投稿2022/10/27 11:50
編集2022/10/27 13:37
総合スコア913
8
ベストアンサー
HTML Standard
これまでの仕様でも「h1要素はページに1つだけ」といった言及はされていないはずですが、
@arcxor さんがご認識の通り、HTML文書内にh1要素が複数存在しても良いとHTML Standardで規定されています。
文書は、複数のトップレベルの見出しを含めることができる：
html
1<!DOCTYPE HTML> 2<html lang=en> 3<title>Alphabetic Fruit</title> 4<h1>Apples</h1> 5<p>Pomaceous.</p> 6<h1>Bananas</h1> 7<p>Edible.</p> 8<h1>Carambola</h1> 9<p>Star.</p>
上記HTMLはW3CのValidatorで問題なく、通ります。
MDN(英語)
以下、MDN英文の日本語訳。
「アウトライン アルゴリズムの概念を含む古いバージョンの HTML 仕様では、1 つのページで複数の <h1> を使用することが許可されていました。
ただし、これはベスト プラクティスとは見なされませんでした。詳細については、ドキュメント アウトライン アルゴリズムが存在しないを参照してください。」
「古いバージョンのHTML仕様」は素直に読むと下記のいずれかと思われます。
- HTML Living Standardの古いバージョン
- HTML 5の古いバージョン
- HTML 4.01
ただ、<!DOCTYPE html> を宣言している限りは古いバージョンを気にする必要はなく、MDNの意図は不明です。
MDN(英語)の意図は後述参照。
MDN(日本語)
MDN日本語に理由が書かれていました。
複数の <h1> を使用することは HTML の仕様では認められていますが、ベストプラクティスとは見なされていません。<h1> を 1 つだけ使用することは、スクリーンリーダーの利用者にとって有益です。
HTML の仕様には、<section> 要素で形成されるアウトラインという概念があります。もしこれが実装されれば、複数の <h1> 要素の使用が可能になり、スクリーンリーダーを含むユーザーエージェントが、セクションの中にネストされた <h1> が小見出しであると理解することができるようになります。しかし、この機能はまだ実装されていません。したがって、見出し要素を適切に使用して文書の概要を記述することが重要です。
スクリーンリーダがHTML仕様を正しく実装するまでの過渡期の暫定策として、h1要素の複数使用が推奨されていないようです。
見出しレベルの解釈
問題は見出しレベルの解釈の仕方にあると理解しています。
(1) アウトラインの概念がないUser-Agent
User-Agentは見出しレベルを「h1-h6要素」に与えられた見出しレベルで解釈します。
h1要素はトップレベルの見出しの為、同じ文書内にh1要素が複数出現することは構造的に正しくありません。
(2) アウトラインの概念があるUser-Agent
User-Agentは各々のアウトラインの中に見出しレベルがあると解釈します。
見出しレベルはアウトライン毎に独立している為、アウトラインが異なるなら、文書内にh1要素が複数存在しても問題ありません。
MDN(日本語)では、スクリーンリーダーが (1) に該当する為、h1要素を複数使用すべきではない、と説明しているのでしょう。
MDN(英語)では、MDN(日本語)の説明も加味すると、下記のように読めます。
- User-Agentがアウトラインアルゴリズムの概念を持つ前提でHTMLをマークアップするのはベストプラクティスではない
- アウトラインアルゴリズムが存在しない古いバージョンのHTML仕様を意識してマークアップすべきである
つまり、問題の根幹はh1要素ではなく、アウトラインアルゴリズムに依存してマークアップすべきではないになると思います。
2018/03/27時点でもh1要素が複数存在できるHTML5規定があった事を踏まえると、スクリーンリーダがアウトラインを解釈できるようになる時はかなり先になりそうです。
A document can contain multiple top-level headings:
昔はIE6がWeb制作で新しい技術を使えない要因でしたが、現在ではスクリーンリーダが足枷になっているようですね…。
投稿2022/10/27 10:23
編集2022/10/28 03:04
総合スコア18194
追記しました。
おそらく、MDN(日本語)の説明が答えだと思います。
詳細なコメントありがとうございます。
提示いただいたMDN日本語訳は、英語版の1つ古いバージョンであると認識しています。
> スクリーンリーダがHTML仕様を正しく実装するまでの
これはどのような仕様のことを指しているのでしょうか。（理解できておらずすみません）
> HTML の仕様には、<section> 要素で形成されるアウトラインという概念があります。もしこれが実装されれば、複数の <h1> 要素の使用が可能になり、
これはアウトラインアルゴリズムの話だと思いますが、このall-h1アプローチの話と、（section要素を伴わない）複数のh1要素の使用の話は別であると理解しております。
前者が廃止されたことを理由に、後者を否定するのは理由として成り立っていないと考えています。
私が何を疑問に思っているのかについてうまく説明できておらず恐縮です。
＠arcxor さん
親記事に「見出しレベルの解釈」を追記しましたので、ご確認ください。
追記ありがとうございます。
「アウトラインの概念」というのは「アウトラインアルゴリズム」のことでしょうか。そうだとすると、やはり話がall-h1アプローチの是非に戻ってしまっているように思えてしまいます。
結論の「アウトラインアルゴリズムに依存してマークアップすべきではない」が意味することは、アウトラインアルゴリズムが廃止された事実に関わらず、廃止されていなかった時期でも不適切であるというようなことでしょうか。それが廃止された現在では自明なように思えてしまいました。
根幹の所ですが「h1要素はトップレベルの見出しの為、同じ文書内にh1要素が複数出現することは構造的に正しくありません」という言及の意味が分かりませんでした。トップレベルのために1つのみしか許されないというのは何の仕様（制約）によるものなのでしょうか。
> 2018/03/27時点でもh1要素が複数存在できるHTML5規定があった事を踏まえると
すみません、現在のHTML規定ではh1は複数存在できないのでしょうか。もしそのような事実があれば詳しく教えていただけると私の疑問が解消されるかもしれません。
...h1の複数使用に纏わるこのあたりの内容の解釈が難しく、何度も質問返しのようになってしまい恐縮ですが以上ご返信させていただきます。（上記への回答が難しければ無視していただいて構いません）
@arcxor さん
> これはアウトラインアルゴリズムの話だと思いますが、このall-h1アプローチの話と、（section要素を伴わない）複数のh1要素の使用の話は別であると理解しております。
すみませんが、@arcxor さんがMDNの文章をどのように読み解いたのか、私には理解できませんでした。
「HTML の仕様には、<section> 要素で形成されるアウトラインという概念があります。もしこれが実装されれば、複数の <h1> 要素の使用が可能になり」という文章からは「アウトラインの概念があれば、複数のh1要素を使用可能」としか私には読み取れず、著者が関係性のある概念と理解しているように私には読み取れます。
この文章をどのように解釈して著者が「アウトライン」と「h1要素の複数使用」が別概念(関係性がない)と説明している、と受け取ったのでしょうか。
> 結論の「アウトラインアルゴリズムに依存してマークアップすべきではない」が意味することは、アウトラインアルゴリズムが廃止された事実に関わらず、廃止されていなかった時期でも不適切であるというようなことでしょうか。それが廃止された現在では自明なように思えてしまいました。
アウトラインアルゴリズムは廃止されていません。
「スクリーンリーダがアウトラインアルゴリズムを実装していない為に使用すべきではない」という、クロスブラウザの問題と私は受け取りました。
> 根幹の所ですが「h1要素はトップレベルの見出しの為、同じ文書内にh1要素が複数出現することは構造的に正しくありません」という言及の意味が分かりませんでした。トップレベルのために1つのみしか許されないというのは何の仕様（制約）によるものなのでしょうか。
いいえ。
HTML 4.01仕様にはh1要素が複数使用できない規定はありませんでした。
あくまで私が確認した範囲であり、それ以前のバージョンのHTML仕様には何かあるかもしれませんが、そこまでは調べておりません。
「アウトラインアルゴリズムが存在しない古いバージョンのHTML仕様を意識してマークアップすべきである」がどこにかかっているか、については私も正確には理解しておりません。
追加コメントありがとうございます。
> この文章をどのように解釈して著者が「アウトライン」と「h1要素の複数使用」が別概念(関係性がない)と説明している、と受け取ったのでしょうか。
関係がないというよりは、関係はあっても、アウトラインの概念だけに結びついているものではないという解釈でした。というのは、要するにHTML5以前から「h1要素の複数使用」は可能だったという話です。
> アウトラインアルゴリズムは廃止されていません。
これは失礼しました。アウトラインアルゴリズムの見出し関連の大幅な変更のことを意味していました。これはMDNの記事内からもリンクされている [There Is No Document Outline Algorithm — Adrian Roselli](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html) のことです。
多少私の勘違いがあったようで、混乱させてしまい申し訳ありません。
@arcxor さん
> 関係がないというよりは、関係はあっても、アウトラインの概念だけに結びついているものではないという解釈でした。というのは、要するにHTML5以前から「h1要素の複数使用」は可能だったという話です。
「アウトラインの概念だけに結びついているものではない」はMDNの文章のどこをどのようにして読み解いたのでしょうか。
…という質問を繰り返していますが、こちらの質問の意図は伝わっているでしょうか。
念のため、前提を書いておきますが、私の質問の意図は「MDNの文章の読解」です。
「文章を読解した上で、他の情報源を踏まえた自分の見解」を「解釈」と言っているわけではありません。
@arcxorさんが言う「解釈」と私の言う「解釈」にずれがあるように感じますが、認識は一致していますか。
> これは失礼しました。アウトラインアルゴリズムの見出し関連の大幅な変更のことを意味していました。これはMDNの記事内からもリンクされている [There Is No Document Outline Algorithm — Adrian Roselli](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html) のことです。
私が「廃止」と書いたのは「HTML Living Standard仕様でアウトラインアルゴリズムが廃止されていない」の意味です。
https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html
は個人サイトに見えますが、HTML仕様に関わる重要な情報源なのでしょうか。
もしくは、別の仕様で「廃止」なのでしょうか。
「廃止」を決定した仕様や規格の公式文書としてのURLを共有頂けませんか。
> 「アウトラインの概念だけに結びついているものではない」はMDNの文章のどこをどのようにして読み解いたのでしょうか。
> …という質問を繰り返していますが、こちらの質問の意図は伝わっているでしょうか。
MDNの文章を読み解いたのではなく、私のもともとの理解がそうだったという話をしてしまっていました。MDNの記述はアウトラインの概念だけを根拠にh1の複数使用について触れていて、それはおかしいのではないかというのが私の考えでした。
> @arcxorさんが言う「解釈」と私の言う「解釈」にずれがあるように感じますが、認識は一致していますか。
この点、ご指摘の通りずれていたようです。失礼しました。
> 「廃止」を決定した仕様や規格の公式文書としてのURLを共有頂けませんか。
私の勘違いだったら恐縮ですが、公式の情報源としては次のURLでしょうか。
https://twitter.com/htmlstandard/status/1542725809848434688
廃止ではなく変更と言った方が適切だったかもしれません。このあたりの事情を少し誤解して廃止と言ってしまいました。
2
これについて何かご存知でしたら教えて頂けると幸いです。
HTML LSに明記されています。
If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.
投稿2022/10/27 07:34
総合スコア146493
> If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.
「もし文書が1つ以上の見出し要素を持っている場合、アウトライン内の少なくとも1つの見出し要素は h1 でなければならない」
と書かれていますよね。これはむしろ h1 が複数書かれることを想定している説明のように思うのですが、h1を複数書いてはいけない理由は一体何なのかというのが疑問です。
「見出しタグ書くなら最低1つは<h1>にするべき」という説明なので、質問者様の質問の趣旨とは違うと思うのですがいかがでしょうか🙇
> と書かれていますよね。
いえ、「headingタグを使う場合、『1つだけのh1タグを入れる』という条件は最低限満たすべきである」と読むのではないでしょうか。
（続く文に「The outline is all headings in a document」とありますので、1つのHTML内に複数のoutlineが存在する、という可能性もありません）
@maisumakun さん
「4.3.11.1 Sample outlines」から少し下にスクロールすると、"A document can contain multiple top-level headings:" と書かれています。
情報提供ありがとうございます。
「文法的に可能ではあるけどベストプラクティス的にはよろしくない」という程度の話かなとは思います（上の方で少し間違っていた箇所は修正しました）。
コメントありがとうございます。解釈が難しくこちらへのコメントが遅れてしまいました。
> 「文法的に可能ではあるけどベストプラクティス的にはよろしくない」という程度の話かなとは思います
MDNの主張は、このような雰囲気でされているらしいことがなんとなく読み取れました。
0
初期のHTML5には
「articleやsection要素で区切り、その配下はまたh1から使うようにすれば良いんじゃね？」という
「セクショニングコンテンツ」という考え方がありました。
しかし、その思想は人類には早すぎたようです。
記事全体としての表題がどのh1から取り出せるのか、
Webサイト開設者のマークアップのスキルに依存することになりました。
スキルの低い人が作ったHTMLの多重・並列のsectionの入れ子から、記事全体を要約する唯一のh1タグを取り出すことは不可能です。
こっからは予想ですが、検索エンジンのアルゴリズム作るのに難儀する等の話で、
議論の末セクショニングコンテンツごと闇に葬られてしまったんじゃないかと思います。
だから現状推奨されているマークアップとして、
「HTMLファイル1個につき、h1要素は1個」というのが推奨されているわけですね。
この辺の流れが下記の記事から読み取れました。
私の回答は又聞き程度の信憑性のものなので、
興味があるなら参照元から追いかけてみてはいかがでしょう？
投稿2022/11/01 01:50
総合スコア21362
回答ありがとうございます。
> 記事全体としての表題がどのh1から取り出せるのか、
> Webサイト開設者のマークアップのスキルに依存することになりました。
> スキルの低い人が作ったHTMLの多重・並列のsectionの入れ子から、記事全体を要約する唯一のh1タグを取り出すことは不可能です。
このような話は初耳でした。ページ内に存在する見出し要素（h1）から「記事全体としての表題」を見つけたいという意図があったらしいことについては知りませんでした。もしそのような事情が存在するのであれば、「HTMLファイル1個につき、h1要素は1個」というのが推奨されているというのも分かる気がします。
関連する参考記事のリンクもありがとうございます。
あなたの回答
tips
プレビュー
