<head>で要素を注文するためのベストプラクティスは何ですか？

90

何でも好きな順番で使えますか？配置<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">は前に重要ですか<title>

これが最もよく使われますが、最善の方法ですか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

このサイトhttp://stackoverflow.comにはエンコーディングがなく、<meta>

私は<meta>すべてのjsとcssの後にSEOのためにすべてを追加するSEOコンポーネントを持つCMSを使用します。ファイル。<head>ドキュメントの互換性とエンコーディングに影響を与えることが許可されている要素を任意の順序で配置できますか？

html  css  xhtml  w3c 
— Jitendra Vyas
ソース
すべてのコメントはどこに行きましたか？
— ペッカ
このサイト（stackoverflow.com）にはエンコードセット（UTF-8）があり、それが属するHTTPヘッダーにあります。メタタグで文字セットを定義することは、一種のハッキーな回避策です。
— jpsimons 2009
2
正しい。HTTPヘッダーで文字セットを定義することをお勧めしますが、状況によってはそれらを設定できない場合（ローカルディスクからファイルをロードするなど）、<meta>タグはそのような場合の回避策ですが、必須ではありません。
— ブライアンキャンベル
ここには、少なくとも9つか10のコメントがたくさんありました。それらは特別なものではありませんでしたが、不快なものもありませんでした。彼らはどこに行ったのですか？コメントを削除する権限を持っているのは誰ですか。その理由は何ですか。
— ペッカ
私たちは皆、自分のコメントを削除する力を持っています。一部の人々は自分自身を削除しましたか？私は答えを作成するのに忙しかったので、この質問に対するコメントを見たことがありませんでした。別の質問を考えていませんか？
— ブライアンキャンベル

回答:

111

HTMLでは、 DOCTYPE最初に必須であり、次に単一の<html>要素が続きます。これには、<head>要素を含む要素が含まれている必要があり<title>、その後に要素が続き<body>ます。HTML4.01およびHTML5ドラフトのHTMLドキュメントのグローバル構造の説明を参照してください。実際の要件は、を除いてほとんど同じですがDOCTYPE、説明が異なります。

実際のタグ（<html>、</html>、<head>、など）は任意です。タグが存在しない場合、要素は自動的に作成されます。<title>HTMLで必要な唯一のタグです。（少なくとも、私が生成できる）最短の有効なHTML 4.01ドキュメントは次のとおりです（有効<p>であるためには何かが必要なため、が必要<body>です）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

そして、最短の有効なHTML5ドキュメント：

<!DOCTYPE html><title></title>

XHTMLでは、すべてのタグを明示的に指定する必要があることに注意してください。要素は暗黙的に挿入されません。

ブラウザは、状況によってはコンテンツタイプスニッフィングを実行して、Content-TypeHTTPヘッダーを使用して指定されていないリソースのタイプを判別します。また、Content-Typeヘッダーが提供されていないか、ヘッダーが含まれていない場合は、文字エンコードスニッフィングをcharset実行します（通常は試してみてください）。これらのヘッダーを含め、それらが正しいことを確認しますが、HTTP経由で転送されないローカルファイルなど、できない状況もあります。ただし、これらの目的のために、ドキュメントの先頭で限られたバイト数をスニッフィングするだけなので、コンテンツスニッフィングまたは文字エンコードスニッフィングに影響を与えることを目的としたものはすべて、ドキュメントの先頭近くに配置する必要があります。

このため、HTML5metaは、文字セットを指定するために使用されるすべてのタグを指定します（いずれか<meta http-equiv="Content-type" content="text/html; charset=...">または単には<meta charset=...>）を有効にするために、ファイルの最初の1024バイト以内でなければなりません。したがって、ドキュメント内に文字エンコード情報を含める場合は、ファイルの先頭、場合によっては<title>要素の前にタグを配置する必要があります。ただし、Content-typeヘッダーを適切に指定すれば、このタグは不要であることを思い出してください。

CSSでは、 後のスタイル宣言が前のスタイル宣言よりも優先され、他のすべては同じです。したがって、通常は、以前にオーバーライドされる可能性のある最も一般的なスタイルシートを配置し、より具体的なスタイルシートを後で配置する必要があります。

パフォーマンス上の理由から、スクリプトを</body>ロードするとページのレンダリングがブロックされるため、スクリプトをページの下部、直前に配置することをお勧めします。

明らかに、 <script>タグは、各順序に依存するスクリプトが最初に依存関係をロードするように順序付けする必要があります。

全体として、私がすでに指定した制約を除いて、内部のタグの順序は<head>、読みやすさを除いて、それほど重要ではありません。私は<title>上に向かって見たいと思う傾向があり、他を置く<meta>タグをある種の論理的な順序でです。

ほとんどの場合、HTMLドキュメントの本文に配置する順序は、表示する順序、またはアクセスする順序にする必要があります。CSSを使用して物事を並べ替えることができますが、スクリーンリーダーは通常、物事をソース順に読み取り、検索インデックスは物事をソース順に抽出します。

— ブライアンキャンベル
ソース
5
そのタイトルが必須であるということは私にとってニュースであり、少し奇妙に思えます。しかし、公式の仕様を確認することはもちろん絶対に正しいです。生活し、学びます！
— Carl Smotricz 2009
私が驚いたのは、それが唯一の必須タグであるということです... HTML5でもオプションにする必要があると実際に主張しました（ガジェットのように常に存在し、iframeタイトルが表示されないものには実際には必要ないため））、しかし彼らは今回はそれを変更しないことに決めました。
— ブライアンキャンベル
@ブライアン-この素晴らしい説明をしてくれたブライアンに感謝します。だから私を失望させることはありませんでした。このサイトには首謀者がいます。そしてもう1つ、Uは質問をよく理解しているので、答えをよく答えます。すごい仕事。
— Jitendra Vyas 2010年
1
@Jitendraハハ！私はあなたの最近のたくさんの質問に答えましたね？私は新年のパーティーに少し酔っています。しかし、私は試すことができます...しかし、私の答えが最後のカップルと同じくらい良いことを保証することはできません。
— ブライアンキャンベル
3
最新のアプローチは<script>、asyncまたはdefer属性を持つタグをに配置すること<head>です。stackoverflow.com/questions/436411/を
— …
31

これは私が使用するテンプレートです。新しいプロジェクトに必要のないものはすべて削除してください。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>
— MatejJanovčík
ソース
6
— Denis
@デニスあなたは何を<html class="default"> 意味するのか知っていますか？
— shaijut 2016
3
@stomなぜクラス属性があるのですか？ページが読み込まれたらそのクラスを削除するには、追加のJavaScriptコードが必要です。これを行うと、ブラウザでJavaScriptが有効になっていることがわかります。この属性がまだ存在する場合-あなたはCSSを使用してユーザーにいくつかのメッセージを表示することができますので、あなたが必要な場合は、この手段のJavaScripsは、無効になっています
— デニス
@Denisは<noscript> </ noscript>を使用してJavaScriptが有効になっているかどうかを確認します
— TheCrazyProfessor 2017
1
この注文の理由についてコメントしていただけますか？
— 2540625 2018
7

ブライアンの答えにいくつかのパフォーマンスの提案を追加すると、ブラウザができるだけ早くダウンロードを開始できるように、論理的に最も優先度が高いのはダウンロードが必要なものであり、ページの表示方法に影響を与えるものです。だから私は提案したい：

  • 文字セット（仕様でも早期に必要）、ビューポート、apple-mobile-web-app-capableなどの外観に影響を与えるメタ
  • 上部にあるタイトル。ブラウザができるだけ早くレンダリングでき、ユーザーは何かが起こっていると感じます。
  • ファビコンとタッチアイコン
  • CSS（少なくともスクロールせずに見える範囲のCSS。必要に応じて他のCSSをフッターにロードできます）。このステップは通常、他のすべての処理をブロックします。これが、CSSの遅延中にフィードバックを提供するため、前の項目をその上に配置した理由です。
  • フッターにロードできない重要なスクリプト（レイアウトに影響を与える可能性のあるユーザーエージェントスニッフィングなど）
  • その他すべて（リンクやメタタグの形式で必要なメタデータなど）

また、CSSとJSがヘッドにロードされているものはすべてインライン化することを検討してください。特に、その小さく、外部のスクリプト/シートが通常の訪問者のプロファイルに従ってキャッシュされる可能性が低い場合はそうです。また、インライン化する場合は、理想的には圧縮する必要があります。

最後に、ユーザーは頭（および頭がロードするブロッキングリソース）を待つ必要があるため、ボディまたはフッターにできるだけ多く配置するのが最善です。

— マヘモフ
ソース
7

W3によると、次のようになります。

  • メタ文字セット
  • 題名
  • メタ名= "説明"
  • メタ名= "キーワード"
  • スタイルシート
  • JavaScriptファイル
— アンドレブラボーフェレイラ
ソース
リンクされた記事はリダイレクトされており、順序については何も述べていないようです。
— 2540625 2018
スタイルシートはレンダリングをブロックし、CSSの前にjsasyncをロードします。
— ヌル
5

これは文字エンコードを示すため、最初にコンテンツタイプが必要です。そうでない場合、後で来ると、一部のブラウザはエンコードを推測しようとします。（詳細は思い出せませんが、IEはドキュメントの最初の75文字にエンコーディングが見つからないかどうかを推測すると思いますか？）

ほとんどのWebサーバーはHTTPヘッダーでエンコードを送信しますが、ユーザーがページを保存した場合、ヘッダーは一緒に保存されません。

ブラウザーができるだけ早くそれらをダウンロードするように、CSS参照を2番目に配置します。

JavaScript私は頭に入れません。ダウンロードするとページのレンダリングがブロックされるため、ページの下部に配置する必要があります。

— ライアン・ドハーティ
ソース
0

IIRC、一部のブラウザは、content-type要素に遭遇するとドキュメントを再ロードします。そのため、その要素はおそらくheadドキュメントの要素内で最初に来るはずです。

— デビッドRトリブル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.