質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.33%

h3タグがPタグか?

解決済

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 993
退会済みユーザー

退会済みユーザー

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

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+5

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

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


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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/30 14:11

    ありがとうございます。

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

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


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


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

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

    キャンセル

  • 2016/04/30 15:37

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

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

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

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

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

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

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

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

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


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

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

    キャンセル

+3

こんにちは。

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

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>

とする方法も有効です。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/30 16:07

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

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

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

    キャンセル

  • 2016/04/30 16:23 編集

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

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

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

    キャンセル

  • 2016/05/01 18:47

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

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

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

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

    キャンセル

  • 2016/05/02 07:36 編集

    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」を使うコーダーが必要とされるかどうかということは自明の理です。

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/01 19:14

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


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

    portfoilo
    ~

    キャンセル

+1

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/01 23:27

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/30 14:23

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

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

    キャンセル

  • 2016/04/30 15:39

    横から失礼します。

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

    キャンセル

  • 2016/04/30 15:55

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

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

    キャンセル

  • 2016/04/30 16:00

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る