Quelles sont les meilleures pratiques pour classer les éléments dans <head>?

90

peut utiliser quoi que ce soit dans n'importe quel ordre? est-ce que le placement <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">est important avant<title>

c'est le plus utilisé, est-ce le meilleur moyen?

<!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>

ce site http://stackoverflow.com n'a aucun encodage et<meta>

J'utilise un CMS qui a un composant SEO qui ajoute tout <meta>pour le référencement après tout js et css. des dossiers. Le placement de tous les éléments dans n'importe quel ordre qui est autorisé peut-il <head>affecter la compatibilité et le codage des documents?

html css xhtml w3c Jitendra Vyas
la source
Où sont passés tous les commentaires?
Pekka
Ce site (stackoverflow.com) a son encodage défini (en UTF-8), c'est juste dans les en-têtes HTTP auxquels il appartient. Définir le jeu de caractères dans une balise meta est une sorte de solution de contournement hacky.
jpsimons
2
Droite. Il est préférable de définir le jeu de caractères dans les en-têtes HTTP, mais dans certaines situations, vous ne pouvez pas les définir (comme le chargement de fichiers depuis votre disque local), donc la <meta>balise est une solution de contournement pour ces cas, mais pas essentielle.
Brian Campbell
Il y a eu un tas de commentaires ici, au moins neuf ou dix. Ils n'avaient rien de spécial mais il n'y avait rien d'offensif en eux non plus. Où sont-ils tous allés? Qui a le pouvoir de supprimer les commentaires et pourquoi?
Pekka
Nous avons tous le pouvoir de supprimer nos propres commentaires; certaines personnes ont-elles supprimé les leurs? Je n'ai jamais vu les commentaires sur cette question, car j'étais occupé à rédiger ma réponse. Etes-vous sûr de ne pas penser à une autre question?
Brian Campbell

Réponses:

111

En HTML, le DOCTYPEdoit venir en premier, suivi d'un seul <html>élément, qui doit contenir un <head>élément contenant un <title>élément, suivi d'un <body>élément. Voir la description de la structure globale d'un document HTML en HTML 4.01 et le brouillon HTML5 ; les besoins réels sont pour la plupart les mêmes autres que le DOCTYPE, mais ils sont décrits différemment.

Les balises réelles ( <html>, </html>, <head>, etc.) sont facultatifs; les éléments seront créés automatiquement si les balises n'existent pas. <title>est la seule balise requise en HTML. Le document HTML 4.01 valide le plus court (au moins, que je pourrais générer) est (nécessite un <p>car il doit y avoir quelque chose dans le <body>pour être valide):

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

Et le document HTML5 valide le plus court:

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

Notez qu'en XHTML, toutes les balises doivent être spécifiées explicitement; aucun élément ne sera inséré implicitement.

Les navigateurs effectuent le reniflement du type de contenu dans certaines circonstances pour déterminer le type d'une ressource qui n'a pas été spécifié à l'aide d'un Content-Typeen-tête HTTP, ainsi que le reniflage du codage de caractères si l'en- Content-Typetête n'a pas été fourni ou n'inclut pas un charset(vous devriez généralement essayer pour inclure ces en-têtes et assurez-vous qu'ils sont corrects, mais dans certaines circonstances, vous ne pouvez pas, comme les fichiers locaux non transférés via HTTP). Cependant, ils ne reniflent qu'un nombre limité d'octets au début du document à ces fins, donc tout ce qui est destiné à affecter le reniflage de contenu ou le reniflage de caractères doit être proche du début du document.

Pour cette raison, HTML5 spécifie que toute metabalise qui est utilisée pour spécifier le jeu de caractères (soit <meta http-equiv="Content-type" content="text/html; charset=...">ou simplement <meta charset=...>) doit être dans les 1024 premiers octets du fichier pour prendre effet. Donc, si vous prévoyez d'inclure des informations de codage de caractères dans votre document, vous devez placer la balise tôt dans le fichier, peut-être même avant l' <title>élément. Mais rappelez-vous que cette balise n'est pas nécessaire si vous spécifiez correctement un en- Content-typetête.

En CSS, les déclarations de style ultérieures ont priorité sur les précédentes , toutes choses étant égales par ailleurs. Ainsi, vous devez généralement mettre les feuilles de style les plus génériques qui peuvent être remplacées plus tôt, et les feuilles de style plus spécifiques plus tard.

Pour des raisons de performances, il peut être judicieux de placer les scripts en bas de la page, juste avant le </body>, car le chargement des scripts bloque le rendu de la page.

De toute évidence, les <script>balises doivent être ordonnées de sorte que les scripts qui dépendent de chaque ordre aient les dépendances chargées en premier.

Dans l'ensemble, à part les contraintes que j'ai déjà spécifiées, l'ordre des balises à l'intérieur <head>ne devrait pas avoir trop d'importance, à part pour la lisibilité. J'ai tendance à aimer voir le <title>vers le haut et à placer les autres <meta>balises dans une sorte d'ordre logique.

La plupart du temps, l'ordre dans lequel vous devez placer les éléments dans le corps d'un document HTML doit être l'ordre dans lequel ils doivent être affichés ou l'ordre dans lequel ils doivent être consultés. Vous pouvez utiliser CSS pour réorganiser les choses, mais les lecteurs d'écran liront généralement les choses dans l'ordre source, les index de recherche extrairont les choses dans l'ordre source, et ainsi de suite.

Brian Campbell
la source
5
Ce TITRE est obligatoire était une nouvelle pour moi et me semble un peu étrange. Mais en vérifiant les spécifications officielles, vous avez tout à fait raison, bien sûr. Vis et apprend!
Carl Smotricz
Ce qui m'a surpris, c'est que c'est la seule balise obligatoire ... J'ai en fait soutenu qu'elle devrait également être rendue facultative en HTML5 (car ce n'est pas vraiment nécessaire pour des choses comme les gadgets qui seront toujours dans un titre iframeet qui n'auront jamais de titre visible. ), mais ils ont décidé de ne pas changer cela cette fois-ci.
Brian Campbell
@Brian - merci Brian pour cette belle explication. Alors ne m'a jamais déçu. ce site a des cerveaux. et encore une chose, vous comprenez très bien la question, alors vous répondez très bien. bon travail.
Jitendra Vyas
1
@Jitendra Ha ha! J'ai répondu à plusieurs de vos questions récentes, n'est-ce pas? Je suis un peu ivre d'une fête du nouvel an. Mais je peux essayer ... Je ne garantis pas que ma réponse sera aussi bonne que les deux derniers.
Brian Campbell
3
L'approche moderne consiste à insérer des <script>balises avec un attribut asyncou . Voir stackoverflow.com/questions/436411/…defer<head>
joshreesjones
31

C'est le modèle que j'utilise, supprimez simplement ce dont vous n'avez pas besoin pour un nouveau projet.

<!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>
Matej Janovčík
la source
6
X-UA-Compatible doit être le premier tag dans la tête en raison de stackoverflow.com/questions/3449286/...
Denis
@Denis savez-vous ce que c'est <html class="default"> méchant?
shaijut
3
@stom voulez-vous dire pourquoi il y a un attribut de classe? Il faut du code JavaScript supplémentaire pour supprimer cette classe une fois la page chargée. En faisant cela, vous saurez que JavaScript est activé dans le navigateur. Si cet attribut existe toujours - cela signifie que JavaScrips est désactivé afin que vous puissiez afficher un message à l'utilisateur en utilisant CSS, si vous en avez besoin
Denis
@Denis utilise <noscript> </noscript> pour vérifier si javascript est activé
TheCrazyProfessor
1
Pourriez-vous commenter, s'il vous plaît, votre raisonnement pour cette ordonnance?
2540625
7

En ajoutant quelques suggestions de performances à la réponse de Brian, la priorité la plus élevée devrait logiquement être les choses qui devront être téléchargées, afin que le navigateur puisse commencer à les télécharger dès que possible, et les choses qui affecteront la présentation de la page. Alors je suggérerais:

  • Métas affectant l'apparence, tels que le jeu de caractères (également requis au début par la spécification), la fenêtre d'affichage, compatible avec les applications web-mobiles-apple
  • Titre en haut pour que le navigateur puisse le rendre dès que possible et que l'utilisateur ait le sentiment que quelque chose se passe
  • Icônes Favicon et tactiles
  • CSS (au moins CSS pour above-the-fold; d'autres CSS peuvent être chargés dans le pied de page si vous voulez avoir envie). Cette étape empêche généralement tout le reste de continuer, c'est pourquoi j'ai placé les éléments précédents au-dessus, car ils fournissent des commentaires pendant le délai CSS.
  • Scripts critiques (tels que le reniflage d'agent utilisateur qui peuvent affecter la mise en page) qui ne peuvent pas être chargés dans le pied de page
  • Tout le reste (par exemple les métadonnées nécessaires sous la forme de liens et de balises méta)

Vous pouvez également envisager d'intégrer tout ce que CSS et JS sont chargés en tête, surtout si son petit script / feuille externe est peu susceptible d'être mis en cache selon le profil de votre visiteur typique. Et si vous le faites en ligne, vous voudrez idéalement le compresser.

Dernière chose: l'utilisateur doit attendre la tête - et toutes les ressources de blocage qu'il charge - il est donc préférable d'en mettre autant que possible dans le corps ou le pied de page.

Mahemoff
la source
7

Selon W3 devrait être:

  • Jeu de caractères Meta
  • Titre
  • Meta name = "descripition"
  • Meta name = "mots clés"
  • Feuille de style
  • Fichiers JavaScript
André Bravo Ferreira
la source
L'article lié redirige et ne semble rien dire sur la commande.
2540625
Les feuilles de style bloquent le rendu, chargez plutôt js async avant CSS.
Null
6

La plupart des navigateurs ne se soucient pas de la façon dont vous commandez vos éléments, mais vous devez toujours spécifier en charsetpremier.

Les meilleures pratiques pour IE7 + exigent que les charset, X-UA-Compatibleet les basedéclarations se produisent avant toute autre chose dans le head, sinon le navigateur recommence et re-Parsis tout ce qui est venu avant.

Jayrobinson
la source
5

Vous voulez d'abord votre type de contenu car il indique l'encodage des caractères, sinon s'il arrive plus tard, certains navigateurs tentent de deviner l'encodage. (Je ne me souviens pas des détails, mais je pense que IE devinera s'il ne trouve pas d'encodage dans les 75 premiers caractères du document?)

La plupart des serveurs Web envoient l'encodage dans les en-têtes HTTP, mais si un utilisateur enregistre votre page, les en-têtes ne sont pas enregistrés avec elle.

Je mettrais les références CSS en deuxième pour que le navigateur les télécharge dès que possible.

JavaScript Je ne mettrais pas dans la tête, il devrait aller au bas de vos pages car leur téléchargement bloque le rendu des pages.

Ryan Doherty
la source
0

IIRC, certains navigateurs rechargeront le document en rencontrant un content-typeélément. Donc, cet élément devrait probablement venir en premier dans l' headélément du document.

David R Tribble
la source