web-dev-qa-db-ja.com

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

<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は頭と体を正しく分離します。 enter image description here

W3C Validationは、それが有効だと言っています。

しかし、私はこのプラクティスをウェブ上でめったに見ません。

これらのタグを記述する理由はありますか？

htmlhtml5tags
185
Larry Cinnabar

html、head、およびbodytagsの省略は、HTML仕様で確実に許可されています。根底にある理由は、ブラウザーは常に既存のWebページとの一貫性を追求しており、HTMLの非常に初期のバージョンではこれらの要素を定義していなかったためです。 HTMLの場合 2.0 最初に行ったのは、欠落しているときにタグが推測される方法で行われました。

プロトタイプを作成するとき、および特にテストケースを記述するときにタグを省略すると、マークアップが問題のテストに集中しやすくなるため、しばしば便利だと感じます。推論プロセスshouldは、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開始タグに限定されているようです。

140
Alohci

HTML用Googleスタイルガイドでは、オプションのタグをすべて省略することをお勧めしています。
これには、<html>、<head>、<body>、<p>、および<li>が含まれます。

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

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

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

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

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
69
Rima

HTML5についての@Liza Dalyの注意とは反対に、その仕様は実際にどのタグを省略できるか、そしていつ（そしてルールはHTML 4.01とは少し異なります。主にコメントや空白のようなあいまいな要素がどこに属するかを明確にするため）

関連するリファレンスは http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags であり、次のように記述されています。

  • Html要素内の最初のものがコメントでない場合、html要素の開始タグは省略できます。

  • Html要素の直後にコメントがない場合、html要素の終了タグは省略できます。

  • 要素が空の場合、またはhead要素内の最初のものが要素の場合、head要素の開始タグは省略できます。

  • ヘッド要素の直後にスペース文字またはコメントが続かない場合、ヘッド要素の終了タグは省略できます。

  • Body要素の開始タグは、要素が空の場合、または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>タグは引き続き可能です）

45
Ian Clelland

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-

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

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

14
Liza Daly

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>

その結果、scriptタグはhead要素の子になります。

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

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

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

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

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

13
Peter Bagnall

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

html要素 は、すべてのhtmlページのルート要素です。他のすべての要素の説明を見ると、要素をどこで使用できるかがわかります（そして、ほとんどすべての要素には頭か体が必要です）。

0
halfdan