80 votes

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

Peut utiliser n'importe quoi dans n'importe quel ordre ? est-ce que le placement de <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 pas d'encodage et <meta>

J'utilise un CMS qui a un composant de SEO qui ajoute chaque <meta> pour le référencement après tous les fichiers js et css. peut placer n'importe quels éléments dans n'importe quel ordre qui sont autorisés dans <head> affectent la compatibilité et l'encodage des documents ?

107voto

Brian Campbell Points 101107

En HTML, l'élément DOCTYPE doit venir en premier, suivi d'un seul <html> qui doit contenir un élément <head> contenant un élément <title> suivi d'un élément <body> élément. Voir la description de la structure globale d'un document HTML dans HTML 4.01 y le projet HTML5 les exigences réelles sont en grande partie les mêmes, à l'exception de la 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 obligatoire en HTML. Le document HTML 4.01 valide le plus court (du moins, celui que j'ai pu générer) est (nécessite une balise <p> parce qu'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 un reniflage du type de contenu dans certaines circonstances pour déterminer le type d'une ressource qui n'a pas été spécifiée à l'aide d'une balise Content-Type HTTP, ainsi que le reniflage du codage des caractères si l'en-tête Content-Type n'a pas été fourni ou ne comporte pas d'en-tête charset (vous devez généralement essayer d'inclure ces en-têtes, et vous assurer qu'ils sont corrects, mais il existe certaines circonstances dans lesquelles vous ne pouvez pas, comme les fichiers locaux qui ne sont pas transférés par HTTP). 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 du contenu ou le reniflage du codage des caractères doit se trouver vers le début du document.

Pour cette raison, HTML5 spécifie que tout meta qui est utilisé pour spécifier le jeu de caractères (soit <meta http-equiv="Content-type" content="text/html; charset=..."> ou simplement <meta charset=...> ) doit se trouver dans les 1024 premiers octets du fichier pour prendre effet. Ainsi, si vous souhaitez inclure des informations sur le codage des caractères dans votre document, vous devez placer la balise au début du fichier, peut-être même avant la balise <title> élément. Mais rappelez-vous que cette balise est inutile si vous spécifiez correctement un élément Content-type en-tête.

En CSS, les déclarations de style ultérieures ont la priorité sur les précédentes toutes choses égales par ailleurs. Ainsi, vous devriez généralement placer 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 bouton </body> car le chargement des scripts bloque le rendu de la page.

Évidemment, <script> doivent être ordonnées de manière à ce que les scripts qui dépendent de chaque ordre voient leurs dépendances chargées en premier.

Dans l'ensemble, hormis les contraintes que j'ai déjà spécifiées, l'ordre des balises au sein de <head> ne devrait pas avoir trop d'importance, si ce n'est pour la lisibilité. J'ai tendance à aimer voir le <title> vers le haut, et mettez l'autre <meta> 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 est l'ordre dans lequel ils doivent être affichés, ou l'ordre dans lequel ils doivent être consultés. Vous pouvez utiliser les CSS pour réorganiser les éléments, mais les lecteurs d'écran lisent généralement les éléments dans l'ordre de leur source, les index de recherche extraient les éléments dans l'ordre de leur source, etc.

6voto

jayrobinson Points 21

La plupart des navigateurs peu importe la façon dont vous ordonnez vos éléments, mais vous devez toujours préciser charset d'abord.

Les meilleures pratiques pour IE7+ exigent que le charset , X-UA-Compatible et base sont placées avant toute autre chose dans le fichier head Sinon, le navigateur recommence et réanalyse tout ce qui précède.

6voto

mahemoff Points 4879

En ajoutant quelques suggestions de performance à la réponse de Brian, la plus haute priorité 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 façon dont la page est présentée. Je suggère donc

  • Métas affectant l'apparence, tels que charset (également requis par la spécification), viewport, apple-mobile-web-app-capable.
  • Le titre est placé en haut de la page pour que le navigateur puisse l'afficher le plus rapidement possible et que l'utilisateur ait l'impression qu'il se passe quelque chose.
  • Favicon et icônes tactiles
  • CSS (au moins le CSS pour les pages de garde ; d'autres CSS peuvent être chargés dans le pied de page si vous voulez être fantaisiste). Cette étape bloque généralement tout le reste, c'est pourquoi j'ai placé les éléments précédents au-dessus d'elle, car ils fournissent un retour d'information pendant le délai CSS.
  • Les scripts critiques (tels que le reniflage de l'agent utilisateur qui peut 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 forme de liens et de métabalises).

Vous pouvez également envisager de mettre en ligne les CSS et JS chargés dans head, surtout s'ils sont petits et que le script/sheet externe a peu de chances d'être mis en cache selon le profil de votre visiteur type. Et si vous le faites en ligne, vous voudrez idéalement le compresser.

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

5voto

Ryan Doherty Points 16448

Vous voulez que votre content-type soit le premier car il indique l'encodage des caractères, sinon s'il vient plus tard, certains navigateurs tentent de deviner l'encodage. (Je ne me souviens pas des spécificités, mais je pense qu'IE va deviner s'il ne trouve pas d'encodage dans les 75 premiers caractères du document).

La plupart des serveurs web envoient le codage dans les en-têtes HTTP, mais si un utilisateur enregistre votre page, les en-têtes ne sont pas sauvegardés avec elle.

Je placerais les références CSS en deuxième position pour que le navigateur les télécharge le plus rapidement possible.

Je ne mettrais pas le JavaScript en tête de page, il devrait être placé en bas de vos pages, car son téléchargement bloque le rendu des pages.

0voto

David R Tribble Points 4813

IIRC, certains navigateurs rechargent le document lorsqu'ils rencontrent une content-type élément. Ainsi, cet élément devrait probablement venir en premier dans le head du document.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X