• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:「見出し」が理解できない)

HTMLの見出しタグの意味と役割

このQ&Aのポイント
  • HTMLの見出しタグについて理解できない。ワープロソフトとの違いや役割が気になる。
  • 見出しタグを使うことで、見た目の変化だけでなく、検索エンジン最適化やナビゲーションの役割を果たすことができる。
  • 表のタグには<td>と<th>があるが、<th>は見出しとしての意味合いがあるため、使い分けが必要。

質問者が選んだベストアンサー

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.5

「見出し」には見出しという意味があります。 >ワープロソフトなどは少し文字が大きく太くなるだけのように見えますし、だったら書式で太字に設定してサイズを大きくすれば済むだけなのに、わざわざ「見出し」と名付けてまで設定するなんて・・・。 ワープロなどでも見出しとしていれば、その見出しは一括で太字やサイズ変更ができます。 書式にで太字やサイズ変更をしようとすると、出てきた数だけ同じ作業をしなくてはなりません。ペラ1枚なら利点はないかもしれませんが、ボリュームのある報告書などを作成する場合にはいちいち、見出しを個別に指定なんてやってられません。同じ格の見出しなのにデザインが違うミスもあり得ます。 でも、見出し1と設定している見出しは一元的にデザインを管理することが可能となります。 ワープロでも初めB5で作成していたが、A4に変更になった等の場合、見出しを一括で変更できた方がよくないですか?アウトラインを自動でピックアップできた方が便利ではないですか? それに、その太字やサイズは見出しだから標準(段落)と区別してその太字やサイズにしているわけで、見出しをたまたまそのデザインにしているにすぎません。本質的には見出しなのであり、その太さや大きさではない筈です。いやいやその太さ大きさが重要で例え標準(段落)とまったく同じになってもその太さや大きさしかないなんてことにはならないです。つまり、見出しにしたいのです。 ましてやhtmlは、HyperText Markup Language の事です。ハイパーテキストに目印をつける言語とでも訳しましょうか。文書中でどんな働きをしているか目印をつける、つまり見出しなのか、段落なのかなどをはっきりさせようという言語です。 見た目だけでいうなら、リンク以外divとspanだけでよろしい。tdすら不要でcssでなんとでもなります。でも、見た目の関係ない読み上げソフトを使っている人や検索エンジンロボットなどは、それでは見出しであることが伝わりません。見出しとタグを区別することにより、コンピュータ的にも見出しととらえることが可能となります。 デフォルトでは太く大きくなるでしょうが、デフォルトで使う人は、珍しいです。殆んどのサイトがカスタマイズしています。 tdとthは表の中で、区別することが可能となります。thは中央揃えでtdは右揃え等、いちいち1セルずつに書かなくても、cssで一元管理できるのは、利点ですし、コンピュータに理解してもらえることは、コンピュータを通してしか見れないすべての読者にも利点となります。手間を惜しまず、コンピュータやロボットはどうでもいいのならmureimono さんの好きにすればよろしい。 お礼率0%は画像が見える人にしか伝わりません。通信コストの関係や端末、読み上げソフトの人には伝わりません。見出しなども同じです。見た目しか考えていない、環境によって見出しとは伝わらないことをいとわなければ、区別しなくてもいいのではないかと、まぁmureimono さんのご自由にどうぞ。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (5)

  • php_user
  • ベストアンサー率60% (3/5)
回答No.6

<th>タグはデフォルト設定で、文字は太字でセル内の中央に表示されるようになります。 <th>はTable Headerの略です。

全文を見る
すると、全ての回答が全文表示されます。
回答No.4

>設定することで何ができるようになるんですか? コンピューターに解析させて、文書情報や、資料としてHTML以外の別の形、たとえばExcelに取り込んだ時に、 自動的に色違いで表示させるなどの使い方ができます。 そういう使い方をしないのであればタグの使い分けをする必要はありません。 >表のセルなんて、<th>じゃなくて、全部<td>じゃだめなんですか? 文法は正しく使おうというのは、プロとしての話です。 アマチュアや個人で使う(作る)分には関係ないのですが、 プロ並みの品質で作りたいというアマチュアの方も、そういう部分にもこだわって作られます。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

>HTMLを勉強しているのですが、  してない!! は冗談ですが、HTMLとは何かをまず知っておいてください。これを間違うと勉強が進みません。HTMLはSGMLというマークアップ言語をヒントに作られましたから、その説明を読んで見ると良いでしょう。 【引用】____________ここから 最悪の場合そのソフトを開発している会社が開発を中止したり、倒産したりしてソフトウェアが無くなった場合は、今まで作成したデータが読めなくなるという問題が発生してしまう。そこで、プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Standard Generalized Markup Language - Wikipedia( http://ja.wikipedia.org/wiki/SGML )]より  例を挙げると、<h1>ここは見出し</h1><<p>ここは、ひとつの段落です。そして<strong>ここは重要</strong>なところですよ。</p>  とタグでマークアップしておけば良いです。たまたま、それをブラウザで見ると太字で大きく表示してくれることと、分けて考えてください。Lynxのようなテキストブラウザだと、他の文字と区別は付きません。もちろんスクリーンリーダー(視覚障害者用の読み上げブラウザ)だと、男声ですこし強めに読んでくれます。 ><th>タグを使うことで見出しにすることができますが、「見出しにしたから何なの?」という気分です。  そのセルが他のセルの見出しだと機械にもわかります。 >ワープロソフトなどは少し文字が大きく太くなるだけのように見えますし、  文字サイズなどはHTMLには、まったく無関係です。 【引用】____________ここから HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )]より >表のセルなんて、<th>じゃなくて、全部<td>じゃだめなんですか?  表で、その行、あるいは列の見出しに当たるセルは、<th>--table header cell--だよとマークアップしておくと、それを赤文字にしようが、小さな字にしようがスタイルシートで御自由に・・ >見た目、同じようにしか見えないんですが・・・  しかし、コンピューターでは意味が分かりますよね。それが重要。 ★HTMLは、デザインは一切考えずに文書構造だけをひたすらコツコツとマークアップしなければなりません。それには、 ・文書を読み取り内容を理解する国語力 ・HTMLで用意されているタグをその意味と共に知っておくこと だけが必要です。  タグがない場合は「id属性及び class属性と併用( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」してそれを行います。HTML5では、「文書をよりよく構造化するために( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」タグが追加されました。 一度、  ⇒HTML 4.01 仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc )を通して読んでおかれるのが一番です。【HTMLを勉強しているので】したら、なおさらです。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

<td>でもいいですよ。 <th>にするとブラウザによりますが、太字でセンター寄せになります。 ソースがシンプルになるのと、第三者がソースを見たときに、ここが見出しだとわかりやすくなるメリットがあります。 また、SEO(検索エンジンの順位)では<h1>などに入っている文字列を重要視したりします。 他のタグで同じ効果を得られるので、意味が無いように感じますが概ね上記のような意味があります。 ちなみに表以外のレイアウトにtableは使わないほうがいいですよ。 CSSも覚えるといいことがあります。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

 HTMLは「見た目」を規定するものじゃないんです。テキストについて「意味」をつけるためのもの。  こうしておくと、あとから「見出しは文字太くして、色も変えて」ということも簡単になるし、やろうと思えば見出しだけを収集して目次を自動生成ということも可能になる。  だから「見出しにして何ができるのか」は使う人や解釈するブラウザ次第。書く側からすれば「これは見出しである」という意味でしかないです。もちろん見る環境が標準的だと想定したり見出しの書式を規定したりして見た目の調整に使う人も多いですが、それは本来のHTMLの目的じゃない。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ホームページ・ビルダー9で・・・

    ホームページ・ビルダー9でWebページを作成しています。 表を作成するとき、表の中の文字が太字になってしまいます。ソースを見るとthタグで記述がしてあります。thタグは表の中の文字を太字にするようですが・・・ どのようにすれば表の中の文字を普通の太さに設定できるのでしょうか。 宜しく御願いします。

  • こういう構造のtableはできるでしょうか

    HTML で、テーブルをこういう構造にすることは可能でしょうか。 ┏━━━━┳━━━━━━┳━━━━┳━━━┓ ┃見出し1┃○○○○○○┃見出し2┃○○○┃ ┣━━━━╋━━┳━━━┻━━━━╋━━━┫ ┃見出し3┃○○┃少し長い見出し4┃○○○┃ ┗━━━━┻━━┻━━━━━━━━┻━━━┛ ↓こんな感じでできないかなと思ったのですが、できませんでした。(win7/IE10) <table border="1">  <tr>   <th>見出し1</th><td colspan="2">○○○○○○</td>   <th>見出し2</th><td>○○○</td>  </tr>  <tr>   <th>見出し3</th><td>○○</td>   <th colspan="2">少し長い見出し4</th><td>○○○</td>  </tr> </table> ※インデントは全角スペースになっています ---------- 1) 対象ブラウザは IE8~IE10 できればchrome等でも対応できたほうが良いのですが、最低限IEで表示できれば良いです。 2) カラムの width 等を指定することなく左端や右端を揃えたいです。 2の条件がなければ float とかも考えたのですが… どなたか良い方法をご存知の方がいらっしゃいましたら教えて下さい。 よろしくお願いします。

  • スタイルシートの見出しタグについて

    はじめまして。メモ帳にスタイルシートを使ってホームページ作成をしています。表セル内に見出しタグを使ってクラス分けをしているのですが、どうしてもh1~h6の見出しタグを使うと、文字の下に下余白がかなり出来てしまいます。普通に文中でならいいのですが、表セル内では前後の余白が違うと見た目、かなりアンバランスになってしまうのです。 ホームページリーダーなどにも対応させたいので、どうしても見出しタグを使用したいのです。 マージンやパディングで調節しましたが、それだと下余白の分が基準で、さらに上が広がってしまい、セル幅が全体的に無駄な余白で占領されることになってしまいました。 よろしくお願い致します。

  • エクセルの並べ替えがうまくいかない

    インターネット上(HTML)の表をコピーしてエクセル(2000)に貼り付けて使おうとしました。 貼り付けると、値ごとにセルが分割されてちゃんとした表に見えるのですが、数値を並べ替えようとするとうまくいきません。 具体的には、見出し行が数値と見做されて並べ替えされたり、数値の1行目が見出しと見做されて固定されたりします。 見出しと数値の書式設定を変更しても同じでした。 是非、対処法を教えてください。

  • cssでテーブルの位置を設定するには?

    <table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。

    • 締切済み
    • CSS
  • word 2003 見出しについての質問です

    見出し1,2,3とアウトラインでレベル分けて文章を作成しているのですが、見出し2の番号が下記のようになってしまいます。 書式設定で見出し1、2,3がそれぞれ、レベル1,2,3であることも確認し、「箇条書きと段落設定」→「アウトライン」タグ→「変更」での「レベルと対応付ける見出しスタイル」が”見出し2”であること、「連番を付けるレベル」が”レベル1”であることを確認しました。 それでもうまくいきません。 どうすればできるのかどなたか教えてください。 よろしくお願いいたします。 1.AAA(見出し1)   1-1.あああ(見出し2) 2.BBB(見出し1)   1-2.あああ(見出し2)   → 2-1.あああ  (このように番号を振りたいです)   1-3.いいい(見出し2)   → 2-2.いいい 3.CCC(見出し1)   1-4.ううう(見出し2) → 3-1.ううう 4.DDD(見出し1)   1-5.えええ(見出し2)  → 4-1.えええ   1-6.おおお(見出し2)  → 4-2.おおお 5.EEE(見出し1)   1-7.かかか(見出し2)

  • ホームページビルダーで「段落」「見出し1」について

    ホームページビルダー8を使用しています。 ページを表で区切って、一番上の1つのセルにある単語を入力して、これを太くて目立つ大きさに仕様と思い、単語を選択(反転させて)、「書式」「段落」「見出し1」の順にクリックしようとしましたが、見出し1から見出し6までの項目が薄灰色で選択することができません。 「見出し」に指定するにはどうやれば良いでしょうか?

  • ワードで見出し1と見出し2の段落番号がリンクしない

    ワードの見出しタグに番号を自動的に振る設定をしているのですが、見出し1以下の見出し2の番号が、見出し1の番号を反映しないで振られてしまっています。例としては以下のような感じです。 -------------------- 1. 概要 hogehoge 2. 詳細内容 hogehoge 1.1 顧客に関して <--- 2.1となるべき zzz 1.2 収益に関して <--- 2.2となるべき yyy -------------------- [書式]->[スタイルと書式]で以下のような設定をしているのですが、どうして上記のような番号になってしまうのでしょうか? -------------- ★プロパティ: 名前: 見出し2 基準にするスタイル: 標準 次の段落のスタイル: 標準 ★ 書式-> 箇条書きと段落番号 -> アウトライン -> 変更ボタン 段落番号: 1.1 前の文字レベルの番号: 空白 レベルと対応づける見出しスタイル: 見出し2 連番を付けるレベル: チェックあり/ レベル1 変更の対象: リスト全体 済みませんが、宜しくお願い致します。

  • HTMLのテーブルについて

    HTMLのテーブルについて 今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。 これを解決するにはどのように改善すればいいのでしょうか? <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>1</td> <td>A君</td> <td>(1)</td> </tr> <tr> <td>1</td> <td>B君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>1</td> <td>C君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>2</td> <td>D君</td> <td>(3)</td> </tr> <tr> <td>2</td> <td>E君</td> <td>(4)</td> </tr> <tr> <td>2</td> <td>F君</td> <td>(5)</td> </tr> </table> </body> </html>

  • テーブルを作成するのですが・・・。

    gooのブログを使用しています。 表を作成するために、HTMLのタグを利用して やってみたのですが、表自体は完成したのですが、 表の外側に書き込んだ文章 (題名とか、補助的な文章など) こちらと表の間がものすごく空いてしまって おかしいことになってしまっています。 間をあけないように文章のすぐ下に表が来るようにするには どのようにすればいいのでしょうか? 今の状態は <table border=1 cellpadding="5"> <tr> <td>○○</td> <td>0</td><td>1</td> <td>2</td><td>3</td><th>4</th> みたいな感じです。 題名にcaptionを使っても対応していないようなので。 ほかに何かあれば教えてください。