アプリ版：「スタンプのみでお礼する」機能のリリースについて

見出しタグのつけ方について

解決済

  • 質問者：stpopo
  • 質問日時：
  • 回答数：4件

見出しタグのつけ方について

見出しタグのつけ方が今一、理解できません。
下記のようなページの場合、適切な見出しタグのつけ方で適切なのはどれでしょうか？
それとも、この３つの中には適切なのはないでしょうか？
（特に、メニュー項目をどういう位置づけにしたらいいかがわかりません）

初歩的な質問ですが、よろしくお願い致します。

(1)h1・・・サイトの説明文
　h2・・・サイト名
　h3・・・Welcame,更新情報,関連リンク

(2)h1・・・サイトの説明文
　h2・・・Welcame,更新情報,関連リンク

(3)h1・・・サイトの説明文
　h2・・・HOME,ABOUT,WORKS,ACCESS,CONTACT
　h3・・・Welcame,更新情報,関連リンク

--------------HTML-------------------
<body>
<div id="header">
<div id="logo_box">サイト名</div>
<h1>サイトの説明文 </h1>
<ul id="header_navi" class="clearfix">
<li> <a href="#">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">WORKS</a> </li>
<li> <a href="#">ACCESS</a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</div>
<div id="inner" class="clearfix">
<div id="contents">
<h3>Welcame</h3>
<p>TEXT　TEXT</p>
</div>
<div id="right">
<h3>更新情報</h3>
<p>TEXT　TEXT</p>
<h3>関連リンク</h3>
<p>TEXT　TEXT</p>
</div>
</div>
</body>
----------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　idがずいぶんたくさん書かれていますが、idはそのページの特定の要素をひとつだけ特定するためのもので、CSSのためだけに書くということはしません。

基本的にページ内アンカー(目標)のためと考えた方が良いでしょう。CSSでは一意セレクタとなり詳細度も100ですから、CSSでの変更も難しくなる。
　
　あくまで、文書構造の解析上の木構造ととらえてHTMLを記述する。

　<head></head>内の<title></title>とh1は同じものであることが望ましい。
　TEXのsection→subsection →subsubsection→paragraphの階層はとてもよい参考になる。HTML5ではTEXと同じような要素が導入される予定。
　文字の大きさとかは、HTMLの範疇ではなくスタイルシートに任せるとしても、文書構造上は見出しはレベル1から順次レベル６まで。ただし、通常はh3までで収まるはず。
　Lynxのようなテキストブラウザで、確認すると理解しやすいかも
　
<head>
<title>このページのタイトル</title>
</head>
<body>
　<div class="header">
　　<h1 id="節名">ページ名</h1>
　　<div id="summary">
　　　<h2>要約</h2>
　　　<p>説明文</p>
　　　<p>説明文</p>
　　</div>
　</di>
　<div class="body">
　　<h2 id="節名2">節名２</h2>
　　<p>文章</p>
　　<p>文章</p>
　　<p>文章</p>
　　<h2>第２節</</h2>
　　<p>文章</p>
　　<h3>第１項</h3>
　　<p>文章</p>
　</div>
　<div class="pageInfo">
　　<h3>目次</h3>
　　<ol class="pageNav" id="contentTable">
　　　<li><a href="#節名">節名</a></li>
　　　<li><a href="#節名2">節名</a></li>
　　</ol>
　　<h3>更新歴<h3>
　　<ul></ul>
　</div>
　<div class="nav" id="siteInfo">
　　<h3>目次</h3>
　　<ol class="siteNav" id="index">
　　<!-- いわゆるパンくずリスト -->
　　　<li><a href="#"></a></li>
　　　<li><a href="#"></a></li>
　　</ol>
　</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます

書かれた内容を租借するのに時間がかかり、お礼が遅れました。。

おっしゃるとおり、IDが多いです＾＾；
IDとclassの使い分けは「All About」の記事を参考にしました。
http://allabout.co.jp/internet/hpcreate/closeup/ …
そうすると、headerの中は全部1個ずつだし～という感じでIDを使いまくってました。
もう少し、考えて使い分けるようにしたいと思います。

例文で書いていただいたHTMLが最初、理解できませんでした。
で、じっくり眺めて、やっと大きな間違いに気付きました。

私の中では
---------------------------------------
サイト名--メニュー１---ページ１---節１
　　　　　　　　　　　　　　　　　　　 　 節２　
　　　　　メニュー２---ページ２---節１
　　　　　　　　　　　　　　　　　　　 　 節２
　　　　　　　　　　　　　　　　　　　　　節３
---------------------------------------
という構造が固定観念としてあり、
---------------------------------------
　　<h3>目次</h3>
　　<ol class="pageNav" id="contentTable">
　　　<li><a href="#節名">節名</a></li>
　　　<li><a href="#節名2">節名</a></li>
　　</ol>
---------------------------------------
この↑「メニューがなぜ、h3？？？」「"節名2がなぜ、h2？？？」という風になってました。

ちがうんですよね。。。
私の考えだと、サイトMAPとページをごちゃまぜな考え方なんですよね
だから、メニュー項目をどういう位置づけにしたらいいのかがわからなかったんです。。。

あくまでも、ひとつのページとしての文書構造として考えなくてはいけないということで、
（みなさんが口を揃えておっしゃっているとおり＾＾；）
「メニュー項目」は節とかではなく、ページの1つのコンテンツにすぎないと捕らえなくてはならなかったんですね。

やっと、腑に落ちました。
理解してみると、自分のばかな考えに赤面してしまいます。（＞＜）

テキストブラウザという言葉ははじめて聞きました。
調べてみたところ、「Google等のサーチ エンジン クローラがサイトを見る際、そのほとんどが Lynx のような見方をするため～」とあり、Webアクセシビリティのチェックにいいということで、
さっそく、DLしました。
これは重宝しそうです。

大変助かりました。
ありがとうございました（*^_^*）

通報する
お礼日時：2010/04/11 12:07

No.4

  • 回答者： radiguet
  • 回答日時：

<h1>サイト名</h1>


<p>サイトの説明文</p>
<li> <a href="#">HOME</a> </li>
<h2>Welcome</h2>
<p>TEXT　TEXT</p>
<h2>更新情報</h2>
<p>TEXT　TEXT</p>
<h2>関連リンク</h2>
<p>TEXT　TEXT</p>

考え方はいろいろあると思いますが、h1はドキュメントのタイトルという扱いなので、サイト名、もしくはページのタイトルであるのが一般的だと思います。
また、「サイトの説明文」は文章なので、hタグではなくてpタグでマークアップするのが正しいのではと。

hタグは文書内でここからここまでがひとつの情報の塊という目印をつけるものだと思えばマークアップのイメージが掴みやすいかと思います。

参考URL：http://www.kanzaki.com/docs/html/htminfo11.html#S3
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます

そうですね、おっしゃるとおり、「情報の塊という目印をつけるもの」として、
もっと簡単にとらえようと思います。
少し？ガチガチに考えすぎてました。

参考URLをみてみます。
ありがとうございました。

通報する
お礼日時：2010/04/11 12:12

No.2

  • 回答者： think49
  • 回答日時：

> (1)h1・・・サイトの説明文


h1要素に何を置くかについては諸説あるようで、「サイト名」という主張と「ページ名」という主張があります。

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401 …
h1要素は文書の最上位の見出しを表すもの。
個人的には、「ページ名」が最上位だと思っています。
例えば、

サイト名: thinkの部屋
ページ名: 見出しタグのつけ方について

という構成があったとして、私なら

<h1>見出しタグのつけ方について</h1>

とします。
これはtitle要素に何を置くかということにも関連すると思います。
つまり、

<title>thinkの部屋 - 見出しタグのつけ方について</title>

とするか

<title>見出しタグのつけ方について - thinkの部屋</title>

とするか。
最近は後者の方が多いですよね。Google検索もそうです。

h1 サイト名 見出し - Google 検索
http://www.google.co.jp/search?q=h1+%E3%82%B5%E3 …

「Google」というサイト名よりも、「検索キーワード」を上位に置いている証だと思っています。
# ちょっと脱線しますが、「苗字を先頭に置く」と「ファーストネームを先頭に置く」の文化の違いもありそうですね。

では、「サイト名はどこに置くか？」というとサイト名は文書の見出しというより属性名称なので、div要素で十分だと思っています。

<div id="SiteName">thinkの部屋</div>

> <ul id="header_navi" class="clearfix">
これで良いと思います。
HTML5ではnav要素が定義されましたが、HTML4.01では該当要素がないのでidで定義するのは自然かと。

nav 要素を使ったセマンティックなナビゲーション - html5doctor - HTML5.JP
http://www.html5.jp/html5doctor/nav-element.html

基本的に文書の見出し構成として適切でないものには、h1～h6要素を使いません。
妥当な要素がない場合は、dl要素やul要素を使うことになると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます

私もh1にサイト名とページ名のどちらをもってきたらいいか迷っていました。
でも、

>これはtitle要素に何を置くかということにも関連すると思います。

これにかなり納得しました。
指摘されるまでtitle要素のことはすっかり忘れていました＾＾；

それと、たしかに「サイト名は文書の見出しというより属性名称」だと思います。

これらを考慮して、下記のようにしていこうと思います。
ありがとうございました＾＾

<head>
<title>ページ名orページのタイトル - サイト名</title>
</head>
<body>
　　<h1>ページ名</h1>
　　<div id="SiteName">サイト名</div>　

通報する
お礼日時：2010/04/11 08:46

No.1

  • 回答者： naokita
  • 回答日時：

レポートなどを書く場合の見出し（大きい文字）と同じイメージで良いです。


最近の各サイトの傾向で、CSSの利用で見出しの観念が薄れていると感じます。

自分なら（文章中心のサイトが多い）
<div id="logo_box">サイト名</div>
<h1>サイトの説明文 </h1>
の部分を
<h1 id="logo_box">サイト名</h1>
<h2>サイトの説明文 </h2>
としますけどね。と言っても、h1は10～15文字程度、h2は12～20字程度で、なるべく１行に収まるようにしています（文字サイズ大でも）
その下に　<p>詳しい文章</p>　って感じで、表現は人それぞれ。
最近は、WEB制作会社でも、
いきなり<h2>から始める場合もありますし、
hxを全く利用しない場合もあり、
W3C的・文法的には異質ですが、SEO的な好みや方針・個性でしょう。

基本的には、順序の決まりがありますが、
（ご提示のHTMLも、H2が無いから文法的に本来は間違いです）
ページ的に文章のタイトルがhxなのでCSSを解除した時に、
タイトル、大見出し、子見出し、文節、などが明確になるようでいて、
流れるような読みやすさでマークアップするのが良いのでは。
その他、これといった特別な決まりもありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます

文章のタイトルがhxですか。。。
難しいですね＾＾；　
なんとかがんばってみます＾＾

通報する
お礼日時：2010/04/11 08:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報