web-dev-qa-db-ja.com

<head>の要素を並べるベストプラクティスは何ですか？

任意の順序で何でも使用できますか？ <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>がありません

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

htmlcssxhtmlw3c
79
Jitendra Vyas

HTMLでは、DOCTYPEが最初に来て、その後に単一の<html>要素が続き、<head>要素を含む<title>要素を含み、その後に<body>要素。 HTML 4.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-Type HTTPヘッダーを使用して指定されていないリソースのタイプを判別します。また、Content-Typeヘッダーが提供されていない場合、 charsetを含めません（通常、これらのヘッダーを含めて正しいことを確認する必要がありますが、ローカルファイルがHTTP経由で転送されないなど、できない場合があります）。ただし、これらの目的のためにドキュメントの先頭で限られたバイト数のみをスニッフィングします。したがって、コンテンツスニッフィングまたは文字エンコーディングスニッフィングに影響を与えるものは、ドキュメントの先頭近くにある必要があります。

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

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

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

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

全体として、既に指定した制約を除き、<head>内のタグの順序は読みやすさ以外はそれほど重要ではありません。 <title>を一番上に表示し、他の<meta>タグを何らかの論理的な順序で配置するのが好きです。

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

106
Brian Campbell

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

<!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>
26
Matej Janovčík

W によると：

  • メタ文字セット
  • タイトル
  • Meta name = "descripition"
  • メタ名= "キーワード"
  • スタイルシート
  • JavaScriptファイル
8
André Bravo Ferreira

ほとんどのブラウザ 要素の順序は気にしませんが、常に最初にcharsetを指定する必要があります。

IE7 +のベストプラクティスが必要charset、X-UA-Compatible、およびbase宣言は、head内の他の何かの前に発生します。そうでない場合、ブラウザーは最初からやり直し、前に来たすべてを再解析します。

6
jayrobinson

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

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

また、CSSとJSが頭に読み込まれている場合は特にインライン化を検討することをお勧めします。特に、小さくて外部のスクリプト/シートが通常のビジターのプロファイルに従ってキャッシュされる可能性が低い場合です。また、インラインで行う場合は、理想的には圧縮する必要があります。

最後に、ユーザーは頭とそれがロードするブロッキングリソースを待たなければならないので、できるだけボディまたはフッターに配置するのが最善です。

6
mahemoff

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

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

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

JavaScriptは頭に入れません。ダウンロードするとページのレンダリングがブロックされるため、ページの下部に移動するはずです。

5
Ryan Doherty

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

0
David R Tribble