h3タグがPタグか？

Question

下記サイトを見ていたら下記部分の本堂、南大門（なんだいもん）などがすべてh3タグになっていますが、内容が非常に少ない場合でも、見出しとしてマークアップするのは正しいと思いますか？
すべてpタグにする方法も有りますが、どちらがよりセマンティックだと思いますか？

・下記部分
本堂
慶長6年(1601)に再興。本堂を始め須弥壇（しゅみだん）は、淀君の寄進により建立

南大門（なんだいもん）
桃山時代、切妻造（きりつまつくり）、本瓦葺（ほんかわらぶき）の四脚門（よつあしもん）、本堂再興時に造られる。

鐘楼堂（しょうろうどう）
桃山時代、入母屋造、袴腰（はかまごし）がつく。鬼瓦に慶長7年の刻銘

・URL
http://www.hokkeji-nara.jp/introduction/

・リストのulは、さすがに無いと思いますが、論理的にリストでないと、説明出来ません。
どなたか文章量が少なくてもリストでないと説明できますでしょうか？

私のサイトでは有りませんが
初心者にもわかるように教えていただければ幸いです。

Answer 1

内容量によって使い分けるべきという決まりはないので構わないと思います。
よりセマンティックなのは h3 でしょう。
ただし、これもまた決まりではないのですが、この構造はちょっと「h3 がどの範囲にかかっているか」が分かり辛いので手放しに賞賛するほど良いマークアップとも思いません。

<section>
  <h3>見出し</h3>
  <p>本文</p>
</section>
<section>
  <h3>見出し</h3>
  <p>本文</p>
  <p>本文</p>
</section>

ありがちなサンプルですがこれなら１セクション：１見出しの対応関係が明らかです。
(section タグにすべきという意味ではなく包含関係というか構造に着目してください。)

それとこの手の「名称－説明」型のリストでよく使うのは Definition List (DLタグ) ですかね。

<dl>
  <dt>名称</dt>
  <dd>説明</dd>

  <dt>名称</dt>
  <dd>説明</dd>
  <dd>説明</dd>
</dl>

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
ありがちなサンプルですがこれなら１セクション：１見出しの対応関係が明らかです。
(section タグにすべきという意味ではなく包含関係というか構造に着目してください。)

アウトラインをちゃんと考えるとsectionにして、アウトラインをはっきりさせるべきという事ですね。

・文章が短くても、下記ではおかしいという事ですね。
単語、説明という形なので、そのような場合は単語は見出しと考えるべきという事なのでしょうか？
<section>
<p>本堂 </p>
<p>本文</p>
</section>

・DLタグが一番正しいような気が私もします。
単語、ちょっとした説明の順なので、まさにこれですね。
ulでは無いのは明白でしたね。
ただ説明が4行など長くなる場合はhタグでしょうか？
どこからがリストでどこからがhとpかはっきりとした敷居は有るのでしょうか？

また、DLタグの場合はsectionで囲む事はないという決まりは有るのでしょうか？
リストはsection、articleで囲まないなどルールがあればお教えください。

[tozjp]

おそらく質問者様が考えているほどマークアップには「絶対にこうすべき」という厳格なルールはありません。

> 単語、説明という形なので、そのような場合は単語は見出しと考えるべきという事なのでしょうか？

書いた人が「単語」と「その説明」であるということを意識している時点で、位置づけの違う2種類の文字列が存在していることになります。
全部`p`タグにしても人間はその違いを文脈で区別できますが、なるべくならマークアップ的にも違いを表現できるのが理想です。

> どこからがリストでどこからがhとpかはっきりとした敷居は有るのでしょうか？

どこからどこまで、と言うよりは、何を何で囲むのが正しいかについては、書いた人が「それが何であるか」を判断して決めるべきだと思います。
やはり内容量は関係ないです。定義に対して説明が長文でもいいです。

ここで「長文になったので別の項目を設けて説明します」となった時に、`article`が出てきたりします。
結局書いた人が「何を書いているつもりなのか」です。

> また、DLタグの場合はsectionで囲む事はないという決まりは有るのでしょうか？

意味的なまとまりであると考えれば`section`で囲むし、名称と説明の羅列だと思うなら`dl`を使用するという感じです。
「意味的なまとまりの中に名称と説明の羅列がある」ケースも、「説明の中に意味的なまとまりがある」ケースもあるかと思います。

逆にそこまで緩いならどういう場合に「間違い」になるかというと、一つは明示的に「あるタグの中にあるタグを入れることはできない」というルールは存在します。
例えば`p`タグの中に`h3`を入れることはできません。シンタックス的にエラーです。
そういうルールはタグの意味を考えれば納得のものばかりなので、意味を理解していれば自ずと守られると思います。
また、人間が文脈から判断する「文字列の意味付け」と大きく乖離したタグを使うのも間違いといえるでしょう。
回答に示したサンプルの`dd`と`dt`を逆にしたら、流石におかしいと言われますよね。

最後に、今回`section`タグをやたら取り上げていますが、`section`はむやみに使うよりは他に表現がないときの手段という位置づけです。
http://www.htmq.com/html5/section.shtml

そういった意味でも、今回のケースでは僕なら`dl`を使用します。

Answer 2

こんにちは。

もうすでに適切な回答がでていますので、僕からはご参考まで。

HTML5で提供されているタグ要素は、文書構造を明確にしたり意味のあるテキストをマークアップするためのものです。これにより、検索エンジンが文書内のテキストを正しく意味のあるかたちで取得することが可能となります。
また、この文書構造の明確化は、スクリーンリーダーにとってはより重要なものとなります。

Webブラウザのみを考えた場合、じっさい、divタグのみでつくられた見た目は美しい Webサイトというものは存在します。
しかし、セマンティックHTMLの働きにおいて重要なことは、表示の見映えをととのえるためではなく（ないがしろにしてよいという意味ではありません）、コンテンツの内容によってそれにふさわしいラベル付けをして、検索エンジンやスクリーンリーダーにより高いアクセシビリティを提供することです。

上記をふまえて、webpage さんが懸念されているような「内容が非常に少ない場合」であっても、「h3」を使用することは適切です。

ただし、今回の質問で取りあげていただいたサイトのように

<div class="mb20" id="m-hondou">
<h3 class="title show_title">本堂</h3>
<div>
<div class="m10">慶長6年(1601)に再興。本堂を始め須弥壇（しゅみだん）は、淀君の寄進により建立</div>
</div>
</div>
<!-- 以下、省略 -->

と divタグのみを用いるのではなく、

<section>
  <h3>本堂</h3>
  <p>慶長6年(1601)に再興。本堂を始め須弥壇（しゅみだん）は、淀君の寄進により建立</p>
</section>
<!-- 以下、省略 -->

と記述するのが、よりセマンティックHTMLに則しているといえます。

また、今回のように名称と説明が羅列されているような場合は、tozipさんが取りあげている「dl（HTML5からは「description list」に変更されています）」を用いて

<dl>
  <dt>本堂</dt>
  <dd>慶長6年(1601)に再興。本堂を始め須弥壇（しゅみだん）は、淀君の寄進により建立</dd>
<!-- 以下、省略 -->
</dl>

とする方法も有効です。

以上、ご参考いただければ幸いです。

Comments

[退会済みユーザー]

確かに仰る通りだと思います。
結局dl~にするかhタグにするかは、識別する方法はなく、
どちらでもよいという回答になると言う事でよろしいでしょうか？

ただ、全部Pタグというのは、完全に間違えであるという論理的な根拠はない物の、
dl~やhタグの方がより適切なのでこちらを選んだほうがより良いという解釈で良いでしょうか？
もしpタグは間違っているという、論理的根拠をご存知でしたら教えてください。

コーディングはどちらでもよいや、
pでも間違えとは言えないが、dlの方がより良いという意味でタグを決める事が多い物と認識するしかないのですかね。
はっきりした識別方法をW3Cが作ってくれると良いのですが、最近h1タグはheader内で一回だけ使って欲しいと言いだすなど、アバウトすぎて困ります。

[退会済みユーザー]

webpageさん、コメント（返信）をいただきありがとうございます。

セマンティックHTMLの考え方については回答に書かせていただいたとおりです。
それをふまえて、僕であれば「dl」よりも「section」を選択します。それは、「h3」のほうが、スクリーンリーダーに対して見出しであること（要素としての重要性）をより明示的に伝えることができるからです。
セマンティックHTMLというのは、機械がそのコンテンツへのアクセシビリティをどう評価するかというものです。「p」が段落を囲むタグである以上、「h3（見出し）」や「dt（名称・定義）」よりも重要な要素でないことは機械的に判断できるはずですが、いかがでしょうか。

いずれにしても、なにを選択してどう書くかというのは、コーダーの意志です。

[退会済みユーザー]

＞＞＞
セマンティックHTMLというのは、機械がそのコンテンツへのアクセシビリティをどう評価するかというものです。「p」が段落を囲むタグである以上、「h3（見出し）」や「dt（名称・定義）」よりも重要な要素でないことは機械的に判断できるはずですが、いかがでしょうか。

ありがとうございます。
こちらは、Pタグよりh、dtの方が重要な要素として、クローラーが判断するので、
重要な要素として認識させた方が、SEO上優位なので、そちらを得たんだ方が、合理的という事でしょうか？

それとも音声リーダーが読むときに何か違いがあると言う事でしょうか？

ただいずれにしろ、コーダーがこれだと言う物を選べば問題ないという事ですね。
するとpはベターではないが、仕事としてPを使ってはコーダーとして、失格という事ではないという事ですね。

[退会済みユーザー]

Web Content Accessibility Guidelines (WCAG) 2.0の、「構造解析」「名前・役割・値」に関する項には
4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique,
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set;
とあります。
（参考URL https://www.w3.org/TR/WCAG20/#ensure-compat ）

つまり、SEOやスクリーンリーダーへの対応をふくめ、今後はよりアクセシビリティの高いコンテンツの制作が必要になってくるということです。これは、WCAG2.0に記述があるように、HTMLタグにかぎらず、その指針はコンテンツのさまざまな面におよんでいます。

また、「なにを選択してどう書くかというのは、コーダーの意志」であるとはいえ、コンテンツへのより高いアクセシビリティが望まれている世界や時代にあって、「h3」を使うべきところにあえて「p」を使うコーダーが必要とされるかどうかということは自明の理です。

Answer 3

適切な回答が既にあるので根本的な問題について回答します。

まずは国語から学び直しましょう。

webpageさんの他の質問も見て思った事ですがwebpageさんには要件や定義を厳密に行うなど論理的思考が少し身に付いているように見受けられます。しかし文章を読み解いて理解を深めるための読解力が欠けています。また読解力が欠けているので論理的思考も中途半端です。目的を把握して道筋を立てる事が出来ないわけです。マークアップやクラス付けなどで何度も苦心されている他の質問からもこれは読み取ることが出来ます。見出しと段落で迷ったり箇条書きを判別できない事からも明白です。

セマンティックなマークアップとは意味付けです。文書の意味を読み解けないのはマークアップだけでなくプログラミングにおいても致命的な欠点になります。またクライアントの要求を正確に読み取れなければそれに応える事も出来ないのでそのクライアントからは二度と仕事は来なくなるでしょう。webpageさんに今最も必要な事は国語力や言語力を身に付ける事です。

なお箇条書きとは箇条という言葉の意味から分かるように事柄をいくつかの条項に分けて書き並べたものです。この条項には段階や手順または何らかの項目などが当てはまる事が多くこれらを単純明快に書き並べることができるものは大体箇条書きと言えます。逆に言えば書き並べた時に条項自体は理解出来ても何の事柄について書いたものかを読み取る事が出来ない場合は段落とした方が良いと判断して良いでしょう。このように文書の意味は行数や文字数などという基準で読み取るものではないのです。

それともう一点気になった事としてwebpageさんは最新の技術や手法などに強い興味を抱いている様ですがそんなものを気にする前にまずは基礎を固めて下さい。案ずるより産むが易しです。

読解力もっと言えば理解力を身に付けて知識と経験を培っていけばwebpageさんはきっと良いエンジニアになれるはずです。好奇心は向上心に繋がる大事な適性です。webpageさんはこの適性を持ち合わせているように見受けられますが今はそれを活かしきれていません。技術や手法にばかり目を向けるのではなくより根本的な要素にも目を向けてみて下さい。

Comments

[ayaneko]

とても分かりやすいタイミングでの-評価ですね。真摯に受け止めてはもらえなかったようです。webpageさんも望んでおられないと思いますし今後回答する事は控えます。これからも頑張って下さい。

Answer 4

このページの内容であれば、私ならそこはdlにしますね。
各建物の名称と解説を並列で簡潔に箇条書きにしたコンテンツだからです。

ただまぁ、h3タグで見出し構造としても、別に間違ってはいないので
このままでも良いと思います。

ただ、「内容が短いから」という理由で全部pにするのは無しです。

Comments

[退会済みユーザー]

単語説明という順で、短い説明が簡潔に来とているので、定義リストという事ですね。

・下記で有れば、簡潔な箇条書き以上の長い内容なのでリストでは無くhタグとpタグになると言う事ですね。
about　me
~

portfoilo
~

Answer 5

<p>タグは、ひと段落の文章を囲むタグで、複数行の文章が入るものです。対して<h*>タグは見出し用のテキストにつけるタグですので、ご説明にあげられたサイトの本堂や南大門に<h3>が使われているのは正しい用法です。

リストとして表示するか、または現状の見出し＋本文の繰りかえしで表現するかは、見栄えや見やすさの判断もありますので一概にこれがベストとは言い切れませんが、図中の施設をクリックすると対応する施設の説明へ移動しておりませんし、施設の説明量も行数が抑えめにしてありますので、個人的にはこのままでも申し分ないかと思いました。

Comments

[退会済みユーザー]

＞＞＞
<p>タグは、ひと段落の文章を囲むタグで、複数行の文章が入るものです。

Pタグは必ず行数が複数行でないと使ってはいけないという事でしょうか？
つまり一行である場合は、Pタグでないと仕様上断言できるという事でしょうか？

[aKusano]

横から失礼します。

pタグの要件に複数行か否かというものはありませんよ。一般的に「段落」と言えばある程度分量のある本文的な文章の固まりをイメージするでしょうが、HTMLにおけるpタグはそれに限定されるものではありません。
「見出しでも、箇条書きでも、その他の構造的要素でもない、テキストのひとかたまり」くらいの意味合いです。なのでたとえ一文字でも二文字でも、独立したテキストの固まりとして見なされるものであれば<p>となりえます。

[退会済みユーザー]

一行であれがｐではないという概念は無いのですね。
つまり一行でもpタグを使う事は間違っていないのですね。

つまり識別方法は「見出しでも、箇条書きでも、その他の構造的要素でもない」と消去して行ってすべてに当てはまらないテキストの塊ないしはimg画像であればpタグを使うと言う事ですね。

[退会済みユーザー]

また、箇条書きかどうかの識別ですが、箇条書きの説明は下記のようにあります。

＞＞＞
箇条書き（かじょうがき）は、文字による表現方法のひとつ。 いくつかの項目をひとつひとつ分けて書き並べる。 項目は単語であったり文であったりする。 枠線を使わない表の一種。

文章のかたまりか箇条書きかという識別は、
どのようにしていますか？

文章が3行以上なら、箇条書きではないなど、はっきりとした識別方法はないのでしょうか？