『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

HTMLでHEADタグとheaderタグは何が違うのでしょうか?

CSSを宣言するのはHEADタグ内だと思いますが
では、headerタグはどういう時に使用すればいいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

HTMLの基本は


<body>
 <head>
  ・・・このHTML文書のヘッダ・・(画面には表示されない)
  スタイルシートやmeta情報などはここに書かれます。
 </head>
 <body>
  ・・・本文
 </body>
</html>
です。
 header要素は、HTML5で登場した本文中の導入部やナビゲーションをグループ化する要素です。

 HTML4.01~XHTML1.1でページを作成されていたと思いますが、それらには文書構造を示す要素がありませんでした。文書構造は
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と、明記してあった!!
 そのため、
<body>
 <div class="header">
  導入部やナビゲーション
 </div>
 <div class="section">
  本文
 </div>
 <div class="footer">
  文書情報など
 </div>
</body>
とマークアップされてきたと思います。
 ところが、仕様書をろくに読まない人が多く。
<body>
 <div id="top">
  導入部やナビゲーション
 </div>
 <div id="content">
  本文
  <div id="leftMenue">
  </div>
 </div>
 <div id="bottom">
  文書情報など
 </div>
</body>
のように、文書構造ではなくプレゼンテーション的なidやクラス名を使用する人があとをたちません。
 それでは、何のためのHTMLかわからない。検索エンジンは無論、だれにも何処が導入で、本文で、本文と関係ないのかさっぱり分からない!!
 その反省から、
★HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
section、article、aside、hgroup、header、footer、nav、figure、figcaption
 ★hgroupは採用されない見込み
 ★アウトラインには影響しない、一箇所しかつかえないがmain要素が追加見込み

ということです。
 ですから、従来 1999年のHTML4.01の勧告以来・・
<body>
 <div class="header">
  <h1>ページタイトル</h1>
  <div class="nav">
   <ol>ナビゲーションリスト</ol>
  </div>
 </div>
 <div class="section">本文ブロック</div>
 <div class="footer">文書情報</div>
</body>

 ・・・・と書かれてきたと思いますが、それを

<body>
 <header>
  <h1>ページタイトル</h1>
  <nav>
   <ol>ナビゲーションリスト</ol>
  </nav>
 </header>
 <section>本文ブロック</section>
 <footer>文書情報</footer>
</body>
と書きなさいという事です。

<head>はHTML文書のヘッダで表示されない情報
<header>は、本文のうち「導入部やナビゲーション」をまとめる要素
    • good
    • 4
この回答へのお礼

どうもありがとうございました。

お礼日時:2014/03/05 22:18

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qタグのheadって何の意味があるんですか?

headをあるなしで文字をうってみたんですが、中身に変化がありません
headやbodyってなんの意味があるんですか?

Aベストアンサー

W3Cという世界団体が決めたHTMLの仕様(古い仕様では削除可能だった)
その基準に従って検索エンジンやブラウザが認識する。
別にどうやって作ろうがそれはその人の勝手だが、
ウェブページとして、
正しく評価されたり、ユーザーに正しく読んでもらう為に、設置した方が良いだけ。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>タイトル</title>
<meta name="description" content="サイトの概要" />
<meta name="keywords" content="キーワード" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="start" href="http:~~" title="スタートページ" />
<link rel="stylesheet" href=".css" type="text/css" />
<style type="text/css">/* CSS */</style>
</head>
<body> ~ ~

こんな感じ。
<head>=ヘッド=頭=ウェブページの脳の部分

文字化けとか遭遇した事ない? そうならないように設置する。

W3Cという世界団体が決めたHTMLの仕様(古い仕様では削除可能だった)
その基準に従って検索エンジンやブラウザが認識する。
別にどうやって作ろうがそれはその人の勝手だが、
ウェブページとして、
正しく評価されたり、ユーザーに正しく読んでもらう為に、設置した方が良いだけ。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>タイトル</title>
<meta name="description" content="サイトの概要" />
<meta name="keywords" content="キーワード" />
<meta http-e...続きを読む

Qhrefとは何の略

なんとかリファレンスじゃないかと思いますが、なんでこれだけどこにも書いてないのでしょうか。
わかる人は、意味とかも教えて下さい。
webで検索しても、見た限りどこにも載っていません。

Aベストアンサー

HTMLタグの「a href」でしたら,
a はアンカーの意味,
href はHypertext Referenceの略ですね.

参考URLに出ていますが,「Hypertext」というのは,他のページなどにジャンプできるテキストのことです.
http://www.hotwired.co.jp/webmonkey/web101/98/19/list.html

参考URL:http://www.akamon.net/life/howtohtml/index.phtml?page=4

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security

Qエクセルで、条件に一致した行を別のセルに抜き出す方法

エクセルで、指定した条件に一致するセルを含む行をすべて抜き出す方法が知りたいです。

たとえば、

<A列> <B列> <C列>
7/1 りんご 100円
7/2 ぶどう 200円
7/2 すいか 300円
7/3 みかん 100円

このような表があって、100円を含む行をそのままの形で、
別のセル(同じシート内)に抜き出したいのですが。

7/1 りんご 100円
7/3 みかん 100円

抽出するだけならオートフィルターでもできますが、
抽出結果を自動的に、別の場所に、常に表示させておきたいのです。

初歩的な質問だと思いますが、検索しても分からなかったので、よろしくお願いします。

Aベストアンサー

同じ質問が結構よく出てますが、そんなに初歩的でもありません
別シートのA1セルに「100円」と入力し、そのシートの任意のセルに以下の式を貼り付けて下さい。後は、下方向、右方向にコピー。
日付のセル書式は「日付」形式に再設定してください

=IF(COUNTIF(Sheet1!$C:$C,$A$1)>=ROW(A1),INDEX(Sheet1!A:A,LARGE(INDEX((Sheet1!$C$1:$C$500=$A$1)*ROW(Sheet1!$C$1:$C$500),),COUNTIF(Sheet1!$C:$C,$A$1)-ROW(A1)+1)),"")

データ範囲は500行までとしていますが、必要に応じて変更して下さい

QExcelで正規表現やワイルドカードなどを使って置換したいのですが…

Excelの中で置換をしたいのですが、
例えば以下のように( )かっこでくくられた不規則な数字を検索し、その前後に記号を付加するといった具合です。
Wordだと置換で正規表現が使えますが、Excelではやはりマクロを作らないとだめなのでしょうか?

 置換前
  あいう(123)かきく(あああ)
  さしす(ははは)たち(589)つ
   ・      ・
   ・      ・

 置換後
  あいう★(123)★かきく(あああ)
  さしす(ははは)たち★(589)★つ
   ・      ・
   ・      ・

Aベストアンサー

以下の正規表現アドインを使用すると可能です。
http://srcedit.pekori.jp/tool/excelre.html

置換前 ((\d+))
置換後 ★$1★


人気Q&Aランキング