it-roy-ru.com

Каковы лучшие методы для заказа элементов в <head>?

можно использовать что угодно в любом порядке? важно ли размещение <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>, повлиять на совместимость и кодировку документов?

77
Jitendra Vyas

В 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 все теги должны быть указаны явно; никакие элементы не будут вставлены неявно.

Браузеры в некоторых случаях выполняют анализ типа содержимого, чтобы определить тип ресурса, который не был указан с использованием HTTP-заголовка Content-Type, а также анализировать кодировку символов, если заголовок 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 для перестановки вещей, но программы чтения с экрана, как правило, читают вещи в порядке исходного кода, поисковые индексы извлекают вещи в порядке исходного кода и так далее.

104
Brian Campbell

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

<!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>
25
Matej Janovčík

Согласно W должно быть:

  • Метакарта
  • Заглавие
  • Meta name = "описание"
  • Meta name = "ключевые слова"
  • Стилей
  • Файлы JavaScript
8
André Bravo Ferreira

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

передовые практики для IE7 + требуют чтобы объявления charset, X-UA-Compatible и base встречались раньше всего в head, в противном случае браузер перезапускается и повторно анализирует все, что было до этого.

6
jayrobinson

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

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

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

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

6
mahemoff

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

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

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

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

5
Ryan Doherty

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

0
David R Tribble