Was sind Best Practices, um Elemente in <head> zu bestellen?

90

kann alles in beliebiger Reihenfolge verwenden? Ist das Platzieren von <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">wichtig, bevor<title>

Dies wird am häufigsten verwendet, ist es der beste Weg?

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

Diese Seite http://stackoverflow.com hat keine Kodierung und<meta>

Ich benutze ein CMS mit einer SEO-Komponente, die <meta>nach js und css jede für SEO hinzufügt. Dateien. Kann die Platzierung von Elementen in einer beliebigen Reihenfolge, die zulässig sind, <head>die Dokumentenkompatibilität und -codierung beeinflussen?

html  css  xhtml  w3c 
— Jitendra Vyas
quelle
Wohin gingen alle Kommentare?
— Pekka
Für diese Site (stackoverflow.com) ist die Codierung (auf UTF-8) festgelegt. Sie befindet sich nur in den HTTP-Headern, zu denen sie gehört. Das Definieren des Zeichensatzes in einem Meta-Tag ist eine Art Hacky-Workaround.
— Jpsimons
2
Richtig. Es ist vorzuziehen, den Zeichensatz in den HTTP-Headern zu definieren. In einigen Situationen können Sie diese jedoch nicht festlegen (z. B. das Laden von Dateien von Ihrer lokalen Festplatte). <meta>Daher ist das Tag eine Problemumgehung für diese Fälle, jedoch nicht unbedingt erforderlich.
— Brian Campbell
Hier gab es eine Reihe von Kommentaren, mindestens neun oder zehn. Sie waren nichts Besonderes, aber es war auch nichts Beleidigendes in ihnen. Wo sind sie alle hingegangen? Wer kann Kommentare löschen und warum?
— Pekka
Wir alle haben die Möglichkeit, unsere eigenen Kommentare zu löschen. Haben einige Leute ihre eigenen gelöscht? Ich habe die Kommentare zu dieser Frage nie gesehen, da ich damit beschäftigt war, meine Antwort zu verfassen. Sind Sie sicher, dass Sie nicht an eine andere Frage denken?
— Brian Campbell

Antworten:

111

In HTML DOCTYPEmuss das zuerst kommen, gefolgt von einem einzelnen <html>Element, das ein <head>Element enthalten muss, das ein Element enthält <title>, gefolgt von einem <body>Element. Siehe die Beschreibung der globalen Struktur eines HTML-Dokuments in HTML 4.01 und im HTML5-Entwurf . Die tatsächlichen Anforderungen sind meistens die gleichen DOCTYPE, aber sie werden unterschiedlich beschrieben.

Die tatsächlichen Tags ( <html>, </html>, <head>, usw.) sind optional; Die Elemente werden automatisch erstellt, wenn die Tags nicht vorhanden sind. <title>ist das einzige erforderliche Tag in HTML. Das kürzeste gültige HTML 4.01-Dokument (zumindest das ich generieren könnte) ist (benötigt ein, <p>weil es etwas in dem geben muss <body>, um gültig zu sein):

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

Und das kürzeste gültige HTML5-Dokument:

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

Beachten Sie, dass in XHTML alle Tags explizit angegeben werden müssen. Es werden implizit keine Elemente eingefügt.

Browser führen unter bestimmten Umständen ein Sniffing des Inhaltstyps durch, um den Typ einer Ressource zu bestimmen, die nicht mithilfe eines Content-TypeHTTP-Headers angegeben wurde, sowie das Sniffing der Zeichenkodierung, wenn der Content-TypeHeader nicht angegeben wurde oder kein enthält charset(Sie sollten es im Allgemeinen versuchen um diese Header einzuschließen und sicherzustellen, dass sie korrekt sind, aber es gibt einige Umstände, unter denen Sie dies nicht können (z. B. lokale Dateien, die nicht über HTTP übertragen wurden). Zu diesen Zwecken schnüffeln sie jedoch nur eine begrenzte Anzahl von Bytes am Anfang des Dokuments. Daher sollte sich alles, was das Sniffing von Inhalten oder das Sniffing von Zeichencodierungen beeinflussen soll, am Anfang des Dokuments befinden.

Aus diesem Grund gibt HTML5 an, dass jedes metaTag, mit dem der Zeichensatz (entweder <meta http-equiv="Content-type" content="text/html; charset=...">oder einfach <meta charset=...>) angegeben wird, innerhalb der ersten 1024 Byte der Datei liegen muss, damit es wirksam wird. Wenn Sie also Informationen zur Zeichenkodierung in Ihr Dokument aufnehmen möchten, sollten Sie das Tag früh in die Datei einfügen, möglicherweise sogar vor dem <title>Element. Denken Sie jedoch daran, dass dieses Tag nicht erforderlich ist, wenn Sie einen Content-typeHeader ordnungsgemäß angeben .

In CSS haben spätere Stildeklarationen Vorrang vor früheren , alle anderen sind gleich. Daher sollten Sie im Allgemeinen die allgemeinsten Stylesheets einfügen, die möglicherweise früher überschrieben werden, und die spezifischeren Stylesheets später.

Aus Leistungsgründen kann es eine gute Idee sein, Skripte am unteren Rand der Seite direkt vor dem zu platzieren </body>, da das Laden von Skripten das Rendern der Seite blockiert.

Natürlich sollten <script>Tags so bestellt werden, dass bei Skripten, die von jeder Bestellung abhängen, zuerst die Abhängigkeiten geladen werden.

Abgesehen von den Einschränkungen, die ich bereits angegeben habe, sollte die Reihenfolge der Tags im Großen und Ganzen <head>keine große Rolle spielen, außer für die Lesbarkeit. Ich neige dazu, das <title>nach oben zu sehen und die anderen <meta>Tags in eine logische Reihenfolge zu bringen.

In den meisten Fällen sollte die Reihenfolge, in der Sie Dinge in den Text eines HTML-Dokuments einfügen, die Reihenfolge sein, in der sie angezeigt werden sollen, oder die Reihenfolge, in der auf sie zugegriffen werden soll. Sie können CSS verwenden, um Dinge neu anzuordnen, aber Screenreader lesen Dinge im Allgemeinen in der Quellreihenfolge, Suchindizes extrahieren Dinge in der Quellreihenfolge und so weiter.

— Brian Campbell
quelle
5
Dass TITEL obligatorisch ist, war für mich eine Neuigkeit und scheint ein wenig seltsam. Aber wenn Sie die offizielle Spezifikation überprüfen, sind Sie natürlich absolut korrekt. Lebe und lerne!
— Carl Smotricz
Was mich überrascht hat, ist, dass es das einzige obligatorische Tag ist ... Ich habe tatsächlich argumentiert, dass es auch in HTML5 optional gemacht werden sollte (da es für Dinge wie Gadgets, die immer in einem Titel enthalten sind iframeund nie einen sichtbaren Titel haben , nicht wirklich notwendig ist ), aber diesmal haben sie beschlossen, das nicht zu ändern.
— Brian Campbell
@ Brian - danke Brian für diese nette Erklärung. SO hat mich nie enttäuscht. Diese Seite hat Masterminds. und noch etwas, was du sehr gut verstehst, dann gibst du eine sehr gute Antwort. Gute Arbeit.
— Jitendra Vyas
1
@ Jitendra Ha ha! Ich habe einige Ihrer letzten Fragen beantwortet, oder? Ich bin ein bisschen betrunken von einer Neujahrsparty. Aber ich kann es versuchen ... Ich kann nur nicht garantieren, dass meine Antwort so gut ist wie die des letzten Paares.
— Brian Campbell
3
Der moderne Ansatz besteht darin, <script>Tags mit einem asyncoder defer-Attribut einzufügen <head>. Siehe stackoverflow.com/questions/436411/…
— joshreesjones
30

Dies ist die Vorlage, die ich verwende. Löschen Sie einfach alles, was Sie für ein neues Projekt nicht benötigen.

<!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
quelle
6
X-UA-kompatibel muss aufgrund von stackoverflow.com/questions/3449286/…
— Denis
@Denis weißt du was <html class="default"> gemein ist?
— Shaijut
3
@stom meinst du warum es Klassenattribute gibt? Es ist zusätzlicher JavaScript-Code erforderlich, um diese Klasse nach dem Laden der Seite zu entfernen. Wenn Sie dies tun, wissen Sie, dass JavaScript im Browser aktiviert ist. Wenn dieses Attribut noch vorhanden ist, bedeutet dies, dass JavaScrips deaktiviert ist, sodass Sie dem Benutzer bei Bedarf eine Nachricht mit CSS
— Denis
@Denis verwenden Sie <noscript> </ nscript>, um zu überprüfen, ob Javascript aktiviert ist
— TheCrazyProfessor
1
Könnten Sie bitte Ihre Argumentation für diese Bestellung kommentieren?
— 2540625
7

Wenn Sie ein paar Leistungsvorschläge zu Brians Antwort hinzufügen, sollte die höchste Priorität logischerweise Dinge sein, die heruntergeladen werden müssen, damit der Browser sie so schnell wie möglich herunterladen kann, und Dinge, die sich auf die Darstellung der Seite auswirken. Also würde ich vorschlagen:

  • Metas, die das Erscheinungsbild beeinflussen, wie Zeichensatz (auch von der Spezifikation frühzeitig erforderlich), Ansichtsfenster, Apple-Mobile-Web-App-fähig
  • Titel oben, damit der Browser ihn so schnell wie möglich rendern kann und der Benutzer das Gefühl hat, dass etwas passiert
  • Favicon- und Touch-Symbole
  • CSS (mindestens CSS für Over-the-Fold; anderes CSS kann in die Fußzeile geladen werden, wenn Sie Lust haben). Dieser Schritt blockiert normalerweise alles andere, weshalb ich die vorherigen Elemente darüber setze, da sie während der CSS-Verzögerung ein Feedback geben.
  • Kritische Skripte (z. B. Sniffing durch Benutzeragenten, die sich auf das Layout auswirken können), die nicht in die Fußzeile geladen werden können
  • Alles andere (zB notwendige Metadaten in Form von Links und Meta-Tags)

Sie können auch in Betracht ziehen, CSS und JS in den Kopf zu laden, insbesondere wenn es klein ist und das externe Skript / Blatt wahrscheinlich nicht gemäß dem typischen Besucherprofil zwischengespeichert wird. Und wenn Sie es inline machen, möchten Sie es idealerweise komprimieren.

Letzte Sache: Der Benutzer muss auf den Kopf warten - und auf alle blockierenden Ressourcen, die er lädt -, also ist es am besten, so viel wie möglich in den Körper oder die Fußzeile zu stecken.

— Mahemoff
quelle
7

Laut W3 sollte sein:

  • Meta-Zeichensatz
  • Titel
  • Meta name = "Beschreibung"
  • Meta name = "Schlüsselwörter"
  • Stylesheet
  • JavaScript-Dateien
— André Bravo Ferreira
quelle
Der verlinkte Artikel leitet um und scheint nichts über die Reihenfolge zu sagen.
— 2540625
Stylesheets blockieren das Rendern und laden js async vor CSS.
— Null
5

Sie möchten zuerst Ihren Inhaltstyp, da dies die Zeichenkodierung angibt. Andernfalls versuchen einige Browser, die Kodierung zu erraten, wenn dies später erfolgt. (Ich kann mich nicht an die Einzelheiten erinnern, aber ich denke, der IE wird raten, ob er in den ersten 75 Zeichen des Dokuments keine Codierung findet?)

Die meisten Webserver senden die Codierung in den HTTP-Headern. Wenn jedoch ein Benutzer Ihre Seite speichert, werden die Header nicht damit gespeichert.

Ich würde CSS-Referenzen an zweiter Stelle setzen, damit der Browser sie so schnell wie möglich herunterlädt.

JavaScript würde ich nicht in den Kopf setzen, es sollte am Ende Ihrer Seiten stehen, da das Herunterladen das Rendern von Seiten blockiert.

— Ryan Doherty
quelle
0

IIRC, einige Browser laden das Dokument erneut, wenn sie auf ein content-typeElement stoßen . Daher sollte dieses Element wahrscheinlich an erster Stelle im headElement des Dokuments stehen.

— David R Tribble
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.