Jakie są sprawdzone metody zamawiania elementów w <head>?

90

można użyć czegokolwiek w dowolnej kolejności? czy umieszczanie <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">jest ważne wcześniej<title>

to jest najczęściej używane, czy to najlepszy sposób?

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

ta witryna http://stackoverflow.com nie ma żadnego kodowania i<meta>

Używam CMS, który ma komponent SEO, który dodaje wszystko <meta>dla SEO po wszystkich js i css. akta. czy umieszczenie dowolnych elementów w dowolnej kolejności, która jest dozwolona, ​​może <head>wpłynąć na zgodność i kodowanie dokumentu?

html css xhtml w3c Jitendra Vyas
źródło
Gdzie podziały się wszystkie komentarze?
Pekka
Ta witryna (stackoverflow.com) ma ustawione kodowanie (na UTF-8), znajduje się tylko w nagłówkach HTTP, do których należy. Definiowanie zestawu znaków w znaczniku meta to rodzaj hakerskiego obejścia.
jpsimons
2
Dobrze. Lepiej jest zdefiniować zestaw znaków w nagłówkach HTTP, ale w niektórych sytuacjach nie można ich ustawić (na przykład ładowanie plików z dysku lokalnego), więc <meta>znacznik jest obejściem w takich przypadkach, ale nie jest niezbędny.
Brian Campbell
Było tu kilka komentarzy, co najmniej dziewięć lub dziesięć. Nie były niczym specjalnym, ale nie było też w nich nic obraźliwego. Gdzie oni wszyscy poszli? Kto ma prawo usuwać komentarze i dlaczego?
Pekka
Wszyscy mamy prawo usuwać własne komentarze; czy niektórzy ludzie usunęli własne? Nigdy nie widziałem komentarzy do tego pytania, ponieważ byłem zajęty komponowaniem odpowiedzi. Czy na pewno nie myślisz o innym pytaniu?
Brian Campbell

Odpowiedzi:

111

W HTML musi znajdować DOCTYPEsię na pierwszym miejscu, po którym następuje pojedynczy <html>element, który musi zawierać <head>element zawierający <title>element, po którym następuje <body>element. Zobacz opis globalnej struktury dokumentu HTML w HTML 4.01 i szkic HTML5 ; rzeczywiste wymagania są w większości takie same, inne niż te DOCTYPE, ale są inaczej opisane.

Rzeczywiste elementów ( <html>, </html>, <head>itp) opcjonalnie; elementy zostaną utworzone automatycznie, jeśli tagi nie istnieją. <title>to jedyny wymagany tag w HTML. Najkrótszy poprawny dokument HTML 4.01 (przynajmniej taki, jaki mogłem wygenerować) to (potrzebuje a, <p>ponieważ musi być coś w pliku, <body>aby było prawidłowe):

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

I najkrótszy prawidłowy dokument HTML5:

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

Zauważ, że w XHTML wszystkie znaczniki muszą być określone jawnie; żadne elementy nie zostaną wstawione niejawnie.

W pewnych okolicznościach przeglądarki wykonują podsłuchiwanie typu zawartości w celu określenia typu zasobu, który nie został określony przy użyciu Content-Typenagłówka HTTP, a także wykrywanie kodowania znaków, jeśli Content-Typenagłówek nie został dostarczony lub nie zawiera znaku charset(generalnie powinieneś spróbować aby dołączyć te nagłówki i upewnić się, że są poprawne, ale są pewne okoliczności, w których nie można tego zrobić, na przykład pliki lokalne nie przesyłane przez HTTP). Jednak do tych celów wąchają tylko ograniczoną liczbę bajtów na początku dokumentu, więc wszystko, co ma wpłynąć na wykrywanie treści lub kodowanie znaków, powinno znajdować się blisko początku dokumentu.

Z tego powodu HTML5 określa, że każdy metaznacznik używany do określenia zestawu znaków (albo <meta http-equiv="Content-type" content="text/html; charset=...">po prostu <meta charset=...>) musi znajdować się w pierwszych 1024 bajtach pliku, aby zadziałał. Tak więc, jeśli zamierzasz zawrzeć informacje o kodowaniu znaków w dokumencie, powinieneś umieścić znacznik na początku pliku, prawdopodobnie nawet przed <title>elementem. Pamiętaj jednak, że ten tag jest niepotrzebny, jeśli poprawnie określisz Content-typenagłówek.

W CSS późniejsze deklaracje stylów mają pierwszeństwo przed wcześniejszymi , wszystkie inne są jednakowe. Dlatego generalnie powinieneś umieścić najbardziej ogólne arkusze stylów, które mogą zostać nadpisane wcześniej, a bardziej szczegółowe arkusze stylów później.

Ze względu na wydajność dobrym pomysłem może być umieszczenie skryptów na dole strony, tuż przed </body>, ponieważ ładowanie skryptów blokuje renderowanie strony.

Oczywiście <script>tagi powinny być uporządkowane tak, aby skrypty zależne od każdej kolejności miały najpierw załadowane zależności.

Ogólnie rzecz biorąc, poza ograniczeniami, które już określiłem, kolejność tagów w ramach <head>nie powinna mieć większego znaczenia, poza czytelnością. Lubię patrzeć na <title>górę, a pozostałe <meta>tagi układam w logicznej kolejności.

W większości przypadków kolejność, w jakiej należy umieszczać elementy w treści dokumentu HTML, powinna być taka, w jakiej powinny być wyświetlane, lub kolejność, do której należy uzyskać dostęp. Możesz użyć CSS do zmiany kolejności rzeczy, ale czytniki ekranu będą na ogół czytać rzeczy w kolejności źródłowej, indeksy wyszukiwania wyodrębniają rzeczy w kolejności źródłowej i tak dalej.

Brian Campbell
źródło
5
Ten TYTUŁ jest obowiązkowy był dla mnie nowością i wydaje się trochę dziwny. Ale sprawdzając oficjalną specyfikację, masz oczywiście całkowitą rację. Żyj i ucz się!
Carl Smotricz
Zaskoczyło mnie to, że jest to jedyny obowiązkowy tag ... Właściwie argumentowałem, że powinien być również opcjonalny w HTML5 (ponieważ nie jest to konieczne w przypadku rzeczy takich jak gadżety, które zawsze będą w iframei nigdy nie będą miały widocznego tytułu ), ale tym razem postanowili tego nie zmieniać.
Brian Campbell
@Brian - dzięki Brian za to miłe wyjaśnienie. WIĘC nigdy mnie nie zawiodło. ta strona ma mistrzów. i jeszcze jedno, bardzo dobrze rozumiesz pytanie, a potem bardzo dobrze udzielasz odpowiedzi. świetna robota.
Jitendra Vyas
1
@Jitendra Ha ha! Odpowiedziałem na kilka twoich ostatnich pytań, prawda? Jestem trochę pijana po przyjęciu noworocznym. Ale mogę spróbować ... Nie gwarantuję jednak, że moja odpowiedź będzie tak dobra, jak ostatnia para.
Brian Campbell
3
Nowoczesne podejście polega na umieszczaniu <script>tagów z atrybutem asynclub deferw <head>. Zobacz stackoverflow.com/questions/436411/…
joshreesjones
31

To jest szablon, którego używam, po prostu usuń wszystko, czego nie potrzebujesz do nowego projektu.

<!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
źródło
6
Zgodność z X-UA musi być pierwszym tagiem w głowie ze względu na stackoverflow.com/questions/3449286/ ...
Denis
@Denis czy wiesz, co to <html class="default"> znaczy?
shaijut
3
@stom masz na myśli, dlaczego istnieją atrybuty klasy? Wymaga dodatkowego kodu JavaScript, aby usunąć tę klasę po załadowaniu strony. Robiąc to - będziesz wiedział, czy JavaScript jest włączony w przeglądarce. Jeśli ten atrybut nadal istnieje - oznacza to, że skrypty JavaScript są wyłączone, więc możesz wyświetlić wiadomość użytkownikowi za pomocą CSS, jeśli potrzebujesz
Denis
@Denis użyj <noscript> </noscript>, aby sprawdzić, czy włączony jest JavaScript
TheCrazyProfessor
1
Czy mógłbyś skomentować uzasadnienie tego zamówienia?
2540625
7

Dodając kilka sugestii dotyczących wydajności do odpowiedzi Briana, logicznie rzecz biorąc, najwyższym priorytetem powinny być rzeczy, które będą musiały zostać pobrane, aby przeglądarka mogła zacząć je pobierać jak najszybciej, oraz rzeczy, które wpłyną na sposób prezentacji strony. Więc proponuję:

  • Metas wpływające na wygląd, takie jak zestaw znaków (wymagany również wcześniej przez specyfikację), widok, obsługa aplikacji Apple-mobile-web-app
  • Tytuł u góry, aby przeglądarka mogła go jak najszybciej wyświetlić, a użytkownik ma przeczucie, że coś się dzieje
  • Ikony ulubionych i dotykowe
  • CSS (przynajmniej CSS w części strony widocznej na ekranie; inny CSS można załadować do stopki, jeśli chcesz uzyskać efektowny wygląd). Ten krok zazwyczaj blokuje wszystko inne przed kontynuowaniem, dlatego umieszczam nad nim poprzednie elementy, ponieważ dostarczają one informacji zwrotnych podczas opóźnienia CSS.
  • Krytyczne skrypty (takie jak podsłuchiwanie klienta użytkownika, które mogą wpływać na układ), których nie można załadować w stopce
  • Wszystko inne (np. Niezbędne metadane w postaci linków i metatagów)

Możesz również rozważyć wstawienie dowolnego CSS i JS, które są ładowane w głowie, zwłaszcza jeśli jego mały i zewnętrzny skrypt / arkusz prawdopodobnie nie zostanie zapisany w pamięci podręcznej zgodnie z profilem typowego gościa. A jeśli zrobisz to w tekście, najlepiej będzie go skompresować.

Ostatnia rzecz: użytkownik musi poczekać na głowę - i wszelkie blokujące zasoby, które ładuje - dlatego najlepiej umieścić jak najwięcej w treści lub stopce.

mahemoff
źródło
7

Według W3 powinno być:

  • Meta charset
  • Tytuł
  • Nazwa meta = „opis”
  • Nazwa meta = „słowa kluczowe”
  • Arkusz stylów
  • Pliki JavaScript
André Bravo Ferreira
źródło
Powiązany artykuł przekierowuje i nie wydaje się mówić nic o zamówieniu.
2540625
Arkusze stylów blokują renderowanie, raczej ładują js asynchronicznie przed CSS.
Null
6

Większość przeglądarek nie ma nic przeciwko kolejności elementów, ale zawsze powinieneś to określić jako charsetpierwsze.

Najlepsze praktyki dla IE7 + wymaga , że charset, X-UA-Compatibleoraz basedeklaracje nastąpić zanim cokolwiek innego w headprzeciwnym razie przeglądarka uruchamia się i re-Analizuje wszystko, co było przed.

jayrobinson
źródło
5

Chcesz najpierw typ zawartości, ponieważ oznacza to kodowanie znaków, w przeciwnym razie, jeśli pojawi się później, niektóre przeglądarki będą próbowały odgadnąć kodowanie. (Nie pamiętam szczegółów, ale myślę, że IE zgadnie, czy nie znajdzie kodowania w pierwszych 75 znakach dokumentu?)

Większość serwerów WWW wysyła kodowanie w nagłówkach HTTP, ale jeśli użytkownik zapisze twoją stronę, nagłówki nie zostaną z nią zapisane.

Na drugim miejscu umieściłbym odniesienia CSS, aby przeglądarka pobierała je jak najszybciej.

JavaScript, którego nie umieszczałbym w głowie, powinien znajdować się na dole twoich stron, ponieważ pobieranie ich blokuje renderowanie stron.

Ryan Doherty
źródło
0

IIRC, niektóre przeglądarki ponownie załadują dokument po napotkaniu content-typeelementu. Więc ten element powinien być prawdopodobnie pierwszy w headelemencie dokumentu.

David R. Tribble
źródło