Quelles sont les meilleures pratiques pour classer les éléments dans <head>?
peut utiliser n'importe quoi dans n'importe quel ordre? 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 SEO qui ajoute chaque <meta> pour le référencement après tout js et css. des dossiers. peut placer tous les éléments dans n'importe quel ordre qui sont autorisés dans <head> affecte la compatibilité et l'encodage des documents?
En HTML, le DOCTYPE doit venir en premier, suivi d'un seul élément <html>, Qui doit contenir un élément <head> Contenant un élément <title>, Suivi d'un Élément <body>. Voir la description de la structure globale d'un document HTML dans HTML 4.01 et le brouillon HTML5 ; les exigences réelles sont généralement les mêmes que celles de DOCTYPE, mais elles sont décrites différemment.
Les balises réelles (<html>, </html>, <head>, Etc.) sont facultatives; 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 j'ai pu 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 un reniflement de 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'un en-tête HTTP Content-Type, Ainsi qu'un reniflage de codage de caractères si l'en-tête Content-Type N'a pas été fourni ou n'inclut pas un charset (vous devriez généralement essayer d'inclure ces en-têtes et vous assurer qu'ils sont corrects, mais il y a certaines circonstances dans lesquelles vous ne pouvez pas, comme les fichiers locaux non transférés via HTTP) . Ils reniflent seulement un nombre limité d'octets au début du document à ces fins, cependant, donc tout ce qui est destiné à affecter le reniflement de contenu ou le reniflement de codage de caractères doit être proche du début du document.
Pour cette raison, HTML5 spécifie que toute balise meta utilisée pour spécifier le jeu de caractères (soit <meta http-equiv="Content-type" content="text/html; charset=..."> Soit simplement <meta charset=...>) Doit se trouver dans les 1024 premiers octets du fichier pour prendre effet. Donc, si vous souhaitez inclure des informations de codage de caractères dans votre document, vous devez placer la balise au début du fichier, peut-être même avant l'élément <title>. Mais rappelez-vous que cette balise n'est pas nécessaire si vous spécifiez correctement un en-tête Content-type.
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 des 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 balises <script> Doivent être ordonnées de sorte que les scripts qui dépendent de chaque commande aient les dépendances chargées en premier.
Dans l'ensemble, outre les contraintes que j'ai déjà spécifiées, l'ordre des balises dans <head> Ne devrait pas trop d'importance, sauf pour la lisibilité. J'ai tendance à aimer voir <title> Vers le haut et à placer les autres balises <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 doit être l'ordre dans lequel ils doivent être affichés ou l'ordre dans lequel vous devez y accéder. 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, etc.
Ceci est le modèle que j'utilise, supprimez simplement tout 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>
Selon W devrait être:
- Meta charset
- Titre
- Nom méta = "description"
- Meta name = "mots-clés"
- Feuille de style
- Fichiers JavaScript
La plupart des navigateurs ne me dérange pas comment vous commandez vos éléments, mais vous devez toujours spécifier charset en premier.
Les meilleures pratiques pour IE7 + nécessitent que le charset, X-UA-Compatible, et base déclarations se produisent avant toute autre chose dans le head, sinon le navigateur recommence et analyse à nouveau tout ce qui précède.
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 façon dont la page est présentée. Je suggère donc:
- Métas affectant l'apparence, telles que le jeu de caractères (également requis au début par la spécification), la fenêtre d'affichage, Apple-mobile-web-app-capable
- 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
- Favicon et icônes tactiles
- CSS (au moins CSS pour au-dessus de la ligne de flottaison; d'autres CSS peuvent être chargés dans le pied de page si vous voulez avoir de la fantaisie). Cette étape empêche généralement tout le reste de continuer, c'est pourquoi j'ai mis les éléments précédents au-dessus, car ils fournissent des commentaires pendant le délai CSS.
- Scripts critiques (tels que le reniflement d'agent utilisateur pouvant 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 balises META)
Vous pouvez également envisager d'inclure tout ce que CSS et JS sont chargés dans la tête, surtout s'il est petit et que le script/feuille externe ne sera probablement pas 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 de mettre autant que possible dans le corps ou le pied de page.
Vous voulez d'abord votre type de contenu car cela dénote l'encodage des caractères, sinon s'il vient 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.
Je mettrais les références CSS en second afin que le navigateur les télécharge dès que possible.
JavaScript je ne mettrais pas dans la tête, il devrait aller en bas de vos pages car le téléchargement bloque le rendu des pages.
IIRC, certains navigateurs rechargeront le document lorsqu'ils rencontreront un content-type élément. Cet élément devrait donc probablement apparaître en premier dans l'élément head du document.