Как лучше всего упорядочить элементы в <head>?

91

можно использовать что угодно в любом порядке? действительно ли размещение <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">важно перед<title>

это наиболее часто используется, это лучший способ?

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

этот сайт http://stackoverflow.com не имеет кодировки и<meta>

Я использую CMS, в которой есть компонент SEO, который добавляет все <meta>для SEO после всех js и css. файлы. Может ли размещение любых элементов в любом разрешенном порядке <head>повлиять на совместимость и кодировку документа?

html css xhtml w3c Джитендра Вьяс
источник
Куда делись все комментарии?
Пекка
У этого сайта (stackoverflow.com) есть кодировка (в UTF-8), она находится только в заголовках HTTP, которым она принадлежит. Определение кодировки в метатеге - это своего рода хитрый обходной путь.
jpsimons
2
Правильно. Предпочтительно определять кодировку в заголовках HTTP, но в некоторых ситуациях вы не можете установить их (например, загрузка файлов с локального диска), поэтому <meta>тег является обходным путем для этих случаев, но не является существенным.
Брайан Кэмпбелл
Прямо здесь была куча комментариев, по крайней мере, девять или десять. В них не было ничего особенного, но и ничего оскорбительного в них тоже не было. Куда они все ушли? У кого есть право удалять комментарии и почему?
Пекка
У всех нас есть право удалять собственные комментарии; некоторые люди удалили свои собственные? Я никогда не видел комментариев к этому вопросу, так как был занят написанием ответа. Вы уверены, что не думаете над другим вопросом?
Брайан Кэмпбелл,

Ответы:

111

В HTML DOCTYPE первом должен быть <html>элемент, за которым следует один элемент, который должен содержать <head>элемент, содержащий <title>элемент, за которым следует <body>элемент. См. Описание глобальной структуры документа HTML в HTML 4.01 и черновике HTML5 ; фактические требования в основном те же, за исключением требований DOCTYPE, но они описаны по-другому.

Актуальные теги (<html> , </html>, <head>и т.д.) не являются обязательными; элементы будут созданы автоматически, если теги не существуют. <title>- единственный обязательный тег в HTML. Самый короткий действительный документ HTML 4.01 (по крайней мере, который я мог сгенерировать) (нужен, <p>потому что в нем должно быть что-то, <body>чтобы быть действительным):

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

И самый короткий действующий документ HTML5:

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

Обратите внимание, что в XHTML все теги должны быть указаны явно; никакие элементы не будут вставлены неявно.

Браузеры в некоторых случаях выполняют анализ типа контента, чтобы определить тип ресурса, который не был указан с помощью Content-Typeзаголовка HTTP, а также анализ кодировки символов, если Content-Typeзаголовок не был предоставлен или не включаетcharset (обычно вы должны попробовать чтобы включить эти заголовки и убедиться, что они верны, но есть некоторые обстоятельства, в которых вы не можете, например, локальные файлы, не передаваемые по HTTP). Однако для этих целей они обнюхивают только ограниченное количество байтов в начале документа, поэтому все, что предназначено для воздействия на сниффинг контента или кодировки символов, должно быть ближе к началу документа.

По этой причине HTML5 указывает, что любой metaтег, который используется для указания набора символов (либо<meta http-equiv="Content-type" content="text/html; charset=..."> или просто <meta charset=...>), должен находиться в пределах первых 1024 байтов файла, чтобы вступил в силу. Итак, если вы собираетесь включить информацию о кодировке символов в свой документ, вам следует поместить тег в начале файла, возможно, даже перед <title>элементом. Но помните, что этот тег не нужен, если вы правильно укажете Content-typeзаголовок.

В CSS более поздние объявления стилей имеют приоритет перед более ранними при прочих равных. Таким образом, вам обычно следует размещать наиболее общие таблицы стилей, которые могут быть переопределены раньше, а более конкретные таблицы стилей - позже.

По соображениям производительности может быть хорошей идеей разместить скрипты внизу страницы, прямо перед </body>, потому что загрузка скриптов блокирует отображение страницы.

Очевидно, <script> теги должны быть упорядочены так, чтобы в сценариях, зависящих от каждого порядка, сначала загружались зависимости.

В целом, за исключением ограничений, которые я уже указал, порядок тегов внутри <head>не должен иметь большого значения, кроме удобства чтения. Я предпочитаю смотреть <title>вверху, а другой<meta> теги в каком-то логическом порядке.

В большинстве случаев порядок, в котором вы должны помещать элементы в тело HTML-документа, должен соответствовать порядку, в котором они должны отображаться, или порядку, в котором к ним следует обращаться. Вы можете использовать CSS для изменения порядка вещей, но программы чтения с экрана обычно читают информацию в исходном порядке, поисковые индексы извлекают вещи в исходном порядке и т. Д.

Брайан Кэмпбелл
источник
5
То, что TITLE является обязательным, было для меня новостью и кажется немного странным. Но, проверяя официальную спецификацию, вы, конечно же, абсолютно правы. Живи и учись!
Carl Smotricz
Что меня удивило, так это то, что это единственный обязательный тег ... Я на самом деле утверждал, что его следует сделать необязательным также и в HTML5 (поскольку на самом деле это не обязательно для таких вещей, как гаджеты, которые всегда будут в теге iframeи никогда не будут иметь видимого названия ), но на этот раз решили не менять.
Брайан Кэмпбелл,
@ Брайан - спасибо Брайану за это красивое объяснение. ТАК меня никогда не разочаровывал. у этого сайта есть вдохновители. И еще кое-что: Ты очень хорошо понимаешь вопрос, а потом очень хорошо отвечаешь. отличная работа.
Джитендра Вьяс
1
@Jitendra Ха-ха! Я ответил на кучу ваших недавних вопросов, не так ли? Я немного пьян от новогодней вечеринки. Но я могу попробовать ... Я просто не могу гарантировать, что мой ответ будет таким же хорошим, как и предыдущая пара.
Брайан Кэмпбелл
3
Современный подход заключается в размещении <script>тегов с атрибутом asyncили deferв <head>. См. Stackoverflow.com/questions/436411/…
joshreesjones
32

Я использую этот шаблон, просто удалите все, что вам не нужно для нового проекта.

<!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>
Матей Яновчик
источник
6
X-UA-Compatible должен быть первым тегом в голове из-за stackoverflow.com/questions/3449286/…
Денис
@ Денис, ты знаешь, что это <html class="default"> значит?
Шайджу Т.
3
@stom ты имеешь ввиду, почему есть атрибут класса? Для удаления этого класса после загрузки страницы требуется дополнительный код JavaScript. При этом вы узнаете, включен ли в браузере JavaScript. Если этот атрибут все еще существует - это означает, что JavaScrips отключен, поэтому вы можете показать сообщение пользователю с помощью CSS, если вам нужно
Денис
1
@Denis использует <noscript> </noscript>, чтобы проверить, включен ли javascript
TheCrazyProfessor
1
Не могли бы вы прокомментировать мотивировку этого заказа?
2540625
7

Добавляя несколько предложений по производительности к ответу Брайана, наивысшим приоритетом по логике должны быть вещи, которые необходимо будет загрузить, чтобы браузер мог начать их загрузку как можно скорее, а также вещи, которые повлияют на то, как отображается страница. Итак, я бы предложил:

  • Меты, влияющие на внешний вид, такие как кодировка (тоже требуется на раннем этапе спецификации), область просмотра, возможность подключения к мобильному веб-приложению.
  • Заголовок вверху, чтобы браузер мог отобразить его как можно скорее, и пользователь почувствовал, что что-то происходит
  • Фавикон и сенсорные значки
  • CSS (по крайней мере, CSS для верхней части страницы; другой CSS можно загрузить в нижний колонтитул, если вы хотите выглядеть необычно). Этот шаг обычно блокирует выполнение всего остального, поэтому я помещаю предыдущие элементы над ним, поскольку они обеспечивают некоторую обратную связь во время задержки CSS.
  • Критические сценарии (например, анализ пользовательского агента, который может повлиять на макет), которые не могут быть загружены в нижний колонтитул
  • Все остальное (например, необходимые метаданные в виде ссылок и метатегов)

Вы также можете подумать о встраивании любых CSS и JS, загруженных в заголовок, особенно если он небольшой и внешний скрипт / лист вряд ли будет кэшироваться в соответствии с вашим типичным профилем посетителя. И если вы сделаете его встроенным, в идеале вы захотите его сжать.

И последнее: пользователь должен ждать заголовка и любых загружаемых блокирующих ресурсов, поэтому лучше всего поместить как можно больше в основной или нижний колонтитул.

Mahemoff
источник
7

По W3 должно быть:

  • Мета-кодировка
  • заглавие
  • Мета-имя = "описание"
  • Мета-имя = "ключевые слова"
  • Таблица стилей
  • Файлы JavaScript
Андре Браво Феррейра
источник
Связанная статья перенаправляет и, похоже, ничего не говорит о порядке.
2540625
Таблицы стилей блокируют рендеринг, они загружают js async перед CSS.
Null
6

Большинство браузеров не возражают против того, как вы упорядочиваете элементы, но вы всегда должны указывать charsetсначала.

Рекомендации для IE7 + требуют , чтобы charset, X-UA-Compatibleи baseзаявления происходят прежде чем что - либо еще в headпротивном случае браузер запускается снова и повторно разбирает все , что было до.

Джейробинсон
источник
5

Вы хотите, чтобы сначала ваш тип содержимого, поскольку он обозначает кодировку символов, иначе, если он появится позже, некоторые браузеры попытаются угадать кодировку. (Я не могу вспомнить детали, но думаю, IE угадает, если не найдет кодировку в первых 75 символах документа?)

Большинство веб-серверов отправляют кодировку в заголовках HTTP, но если пользователь сохраняет вашу страницу, заголовки не сохраняются вместе с ней.

Я бы поставил ссылки на CSS на втором месте, чтобы браузер загрузил их как можно скорее.

JavaScript я бы не стал вкладывать в голову, он должен располагаться внизу ваших страниц, поскольку их загрузка блокирует рендеринг страниц.

Райан Доэрти
источник
0

IIRC, некоторые браузеры перезагрузят документ при обнаружении content-typeэлемента. Так что этот элемент, вероятно, должен быть первым в headэлементе документа.

Дэвид Р. Триббл
источник