HEAD、BODY、HTMLタグを記述する必要がありますか？

194

それは書くことが必要である<html>、<head>と<body>タグ？

たとえば、私はそのようなページを作ることができます：

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

そしてFirebugは正しく頭と体を分離します：ここに画像の説明を入力してください

W3C Validationは有効だと言っています。

しかし、私はこの実践をウェブ上でめったに見ません。

これらのタグを書く理由はありますか？

html tags

— ラリー・シナバー
ソース

5

html5.validator.nuのHTML5バリデーターにはtitleタグが必要です。これは、それが有効であると見なす最小のドキュメントである：<!DOCTYPE html> <title>A</title>

— bonh

142

省略html、headおよびbody タグは確かにHTMLの仕様によって許可されています。根本的な理由は、ブラウザーが常に既存のWebページとの整合性を追求しており、HTMLのごく初期のバージョンではこれらの要素が定義されていなかったためです。HTMLのとき~~2.0~~ 最初に、タグがない場合にタグが推測されるように行われました。

プロトタイピングの際、特にテストケースの作成時にタグを省略すると便利です。マークアップを問題のテストに集中させることができるためです。推論プロセスは、Firebugで表示されるのとまったく同じ方法で要素を作成する必要があり、ブラウザーはそれを行う際にかなり一貫しています。

だが...

IEには、この領域に少なくとも1つの既知のバグがあります。IE9でもこれを示しています。マークアップがこれだとしましょう：

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

次のようなDOMを取得する必要があります（他のブラウザーでも同じです）。

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

しかし、IEでは次のようになります。

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

自分で見てください。

このバグはform、テキストコンテンツと開始タグの前にある開始タグに限定されているようbodyです。

— アロッチ
ソース

5

HTML 1.0で定義されたHTML、HEAD、BODY：w3.org/MarkUp/draft-ietf-iiir-html-01.txt

— Liza Daly

6

@Liza-そのドキュメントがHTML 1.0を定義しているかどうかは議論の余地がありますが、要素がHTML 2.0よりも古くなっていることは間違いありません。ありがとう。ただし、1992年のw3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/…を参照してください。その場合、要素は存在しません。

— Alohci、2011

1

このバグはInternet Explorer 11には影響を与えないようです（影響を受けることを確認したIE8もテストしました）

— jornane

2

@Justin-これらの制限は主に技術的なものであり、通常は影響しません。したがって、ページに重要な場合は、コメントノードや空白がヘッド要素の直前または内部にあるかどうか（ページのJS がそれに依存している可能性があります）、ヘッドの開始タグを明示的に識別して、その関係を正しくする必要があります。しかし、そうでない場合（そして、私がまだそれを行うHTMLページを作成したことがない場合）、headタグは適切な場所で推測され、安全に省略できます。他のhtml、headおよびbodyタグについても同様です。

— Alohci 14

3

@Justinこの回答は、「HEAD、BODY、およびHTMLタグを記述する必要があるか？」という質問のため、かなりの手がかりと思われます。それが良い習慣かどうかではありません。規約は変化する傾向があります... googleスタイルガイドを見てください...これは、これらのタグを省略すべきであるという規約です... :-)

— Potherca

77

HTMLのGoogleスタイルガイドでは、オプションのタグをすべて省略することを推奨しています。
それは、 <html>、<head>、<body>、<p>と<li>。

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

ファイルサイズの最適化とスキャン可能性の目的で、オプションのタグを省略することを検討してください。HTML5仕様では、省略できるタグを定義しています。

（このアプローチは、Web開発者が通常教えているものとは大きく異なるため、より長いガイドラインとして猶予期間を設定する必要がある場合があります。一貫性と単純さの理由から、選択だけでなく、すべてのオプションのタグを省略するのが最善です。）

<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

— リマ
ソース

2

非互換性の例：私がWeb開発（プーア）に使用するlive-reloadツールは自動的にスクリプトをヘッドに挿入します。ついに<head>タグがないと機能しません。

— Offirmo 2016年

@Offirmoいったい何なの？

— ケンシャープ

@KenSharp livereload Web開発ツールは通常、次のように、提供されるページにコードを挿入することで機能します<script src="http://localhost:35729/livereload.js"></script>。エキゾチックなテンプレートの場合、コードを挿入する場所がわかりません。

— Offirmo 2016

1

@Offirmo livereloadのドキュメントには、自分のクライアントページにそのスクリプトを追加する必要があると記載されています。多分あなたはあなたのためにそれをする魔法の図書館を使っています。それがあなたが抱えている困難の原因となるはずです。

— kequc 2016

7

可能なすべてのタグを省略することは、ペニーワイズであり、ポンドバカです。帯域幅の節約はごくわずかです（特に、ほとんどの接続が自動圧縮されるため）。一方、エッジケースでの人的エラーの可能性は高いです（作成者、編集者、さらにはHTMLパーサーの作成者でさえ考えてください）。また、エントロピーが変化するため、エラーを見つけるのも難しくなります。

— TextGeek

48

@Liza DalyのHTML5に関するメモとは異なり、その仕様は実際には、どのタグを省略できるか、およびいつ（およびルールはHTML 4.01とは少し異なり、コメントや空白などのあいまいな要素がどこに属するかを明確にするために）かなり具体的です

関連する参照はhttp://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tagsであり、次のように記載されています。

html要素内の最初のものがコメントでない場合、html要素の開始タグは省略できます。
html要素の直後にコメントがない場合、html要素の終了タグは省略できます。
エレメントが空の場合、またはヘッドエレメント内の最初のものがエレメントの場合、ヘッドエレメントの開始タグは省略できます。
ヘッド要素の直後にスペース文字またはコメントがない場合、ヘッド要素の終了タグは省略できます。
body要素の開始タグは、要素が空の場合、またはbody要素内の最初のものがスクリプトまたはスタイル要素である場合を除き、空白文字またはコメントでない場合は省略できます。
body要素の直後にコメントがない場合、body要素の終了タグは省略できます。

したがって、あなたの例は有効なHTML5であり、暗黙の位置にhtml、head、およびbodyタグを付けて、次のように解析されます。

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

スクリプト自体はヘッドの一部ですが、コメント「このスクリプトはヘッドにあります」は実際にはボディの一部として解析されます。仕様によると、それをまったく異なるものにしたい場合、</HEAD>および<BODY>タグは省略できません。（対応するタグ<HEAD>と</BODY>タグはまだ可能ですが）

— イアン・クレランド
ソース

15

HTML4でそれらを省略することは有効です：

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

HTML5では、HTML5の構文がより緩やかに定義されているため、「必須」または「オプション」の要素は正確にはありません。たとえば、title次のとおりです。

title要素はほとんどの状況で必須の子ですが、より高レベルのプロトコルがタイトル情報を提供する場合、たとえばHTMLが電子メールのオーサリング形式として使用されている場合、電子メールの件名行では、title要素を省略できます。

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

（XHTML-acting-like-HTML5とは対照的に）ほとんど使用されませんが、真のXHTML5でそれらを省略することは無効です。

ただし、実用的な観点からは、HTMLとCSSのレンダリングを予測できるように、ブラウザを「標準モード」で実行することがよくあります。DOCTYPEとより構造化されたHTMLツリーを提供すると、より予測可能なクロスブラウザーの結果が保証されます。

— リザ・デイリー
ソース

13

タグで要素を混同しないでください。このページの他の場所でcHaoのコメントを参照してください。以下のためにhtml、headそしてbody、要素は必須ですが、タグはオプションです。

— Alohci、2011

実際、あなたは最後の部分で間違っています。タグの省略はSGML DTD機能であり、SGML解析をサポートするすべてのブラウザー（つまり、すべてのブラウザー）もタグの省略をサポートしています。XHTML5でこれを実行できないのは、SGMLではなくXMLだからです。XMLは、要素を推測するのが難しいほどです。

— OdraEncoded 2013

@OdraEncodedステートメントの検証を提供できますか？私はそれが事実であるとは思いません（HTML標準を参照）。

— 歯ブラシ2015年

@OdraEncoded-近いですが、真実ではありません。タグの省略は、ISO 8879で定義されているように、SGMLパーサーのオプション機能です（ほとんどの場合サポートされています）。ほとんどすべてのHTMLパーサーがサポートしていますが、Pythonの「html.parse」はサポートしていないようです（stackoverflow.com/questions/29954170/…を参照）。）。

— TextGeek

14

HTML仕様では、特定の場合に特定のタグを省略することが許可されていますが、一般的にそうすることは賢明ではありません。

これには2つの効果があります。仕様がより複雑になるため、ブラウザーの作成者が正しい実装を作成するのが難しくなります（IEが間違っていることからわかるように）。

これにより、スペックのこれらの部分でブラウザエラーが発生する可能性が高くなります。Webサイトの作成者は、これらのタグを含めることで問題を回避できます。つまり、仕様にはそうする必要がないと記載されていますが、そうすることで、問題が発生する可能性を減らすことができます。これは優れたエンジニアリング手法です。

さらに、最新のHTML 5.1 WG仕様は現在述べています（これは進行中の作業であり、まだ変更される可能性があることに注意してください）。

要素が空の場合、またはbody要素内の最初のものがメタ、リンク、スクリプト、スタイルの場合を除き、body要素内の最初のものが空白文字またはコメントではない場合、body要素の開始タグは省略できます。、またはテンプレート要素。

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

これは少し微妙です。bodyとheadを省略すると、ブラウザはそれらの要素を挿入する場所を推測します。これは明示的でないリスクを伴い、混乱を引き起こす可能性があります。

したがって、この

<html>
  <h1>hello</h1>
  <script ... >
  ...

結果として、script要素はbody要素の子になりますが、これは

<html>
  <script ... >
  <h1>hello</h1>

スクリプトタグは、head要素の子になります。

あなたはこれを行うことによって明示的である可能性があります

<html>
    <body>
      <script ... >
      <h1>hello</h1>

そして、最初に持ったもの、つまりスクリプトまたはh1は、どちらもbody要素に予想通りに表示されます。これらは、コードのリファクタリングとデバッグ中に見落としがちなものです。（たとえば、JSが本文の最初のスクリプト要素を探しているとします。2番目のスニペットでは機能しなくなります）。

一般的なルールとして、物事について明確にすることは、物事を解釈に開放するよりも常に優れています。この点で、XHTMLはコード内の要素構造について完全に明示的にすることを強制するため、より優れています。これにより、XHTMLがよりシンプルになり、誤解を起こしにくくなります。

だから、はい、それらを省略して技術的に有効にすることができますが、一般的にそうすることは賢明ではありません。

— ピーター・バグナル
ソース

1

IEは、作者が標準についてあまり気にすることができなかったため、問題が発生します。それが適切に機能しない場合、それは彼らの責任です。規格が定義されているため、IEが確実に動作するようになっています。

— ケンシャープ

3

@KenSharp私は反対しませんが、すべての顧客に使用を強制することができるまでは、私はそれに固執しています。したがって、すべての機能に依存するのではなく、完全に明確なコードを記述する方が適切です。

— Peter Bagnall 2016年

1

ユーザーは準拠していないため、何年もの間IEをダンプすることを余儀なくされてきました。たとえWindows XPをまだインストールしていても、ユーザーがIE6を使い続けるとは誰も予想していません。Windows 3.1を永久にサポートすることも期待できません。OSIレベル8エラー。

— Ken Sharp

1

省略できるタグと正確な場所は、HTMLのバージョンによっても異なります。これも、それらを回避するための十分な理由のように思われます（最も明白で一般的で一貫したケースを除いて）。

— TextGeek 2018

@TextGeek <!DOCTYPE html>。

— デット

-2

お使いのブラウザが自動的に不正なマークアップを修正するため、Firebugはこれを正しく表示します。この動作はどこにも指定されておらず、ブラウザごとに異なる可能性があります。これらのタグは、使用しているDOCTYPEに必要であり、省略しないでください。

html要素は、すべてのhtmlページのルート要素です。他のすべての要素の説明を見ると、要素を使用できる場所が示されています（ほとんどすべての要素にはヘッドまたはボディが必要です）。

— 半段
ソース

それで、それは非クロスブラウザかもしれませんか？

— Larry Cinnabar、2011

5

言い換えると、悪い習慣は未定義の結果をもたらします。

— ランディ

3

@Innuendo何かが大きいからといって、うまく組み合わせられているとは限りません。

— Demian Brecht

2

当局へのアピールとして、私はそれが納得できないと思います。google.comも無効なHTMLです。あなたがそうあるべきだという意味ではありません。

— Rein Henrichs、2011

17

要素が存在している必要があります。タグは何も言わないがん。html / head / bodyタグのないHTMLは、実際には、本来あるべきでない要素が表示されない限り有効です。（たとえば、の<title>後<p></p>）

— cHao 2011