Подтвердить что ты не робот

Каковы наилучшие методы упорядочения элементов в <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="#" onclick="location.href='http://sstatic.net/so/all.css?v=5912'; return false;">
    <link rel="shortcut icon" href="#" onclick="location.href='http://sstatic.net/so/favicon.ico'; return false;">
     <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>

этот сайт /qaru.site/... не имеет никакой кодировки и <meta>

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

4b9b3361

Ответ 1

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

Ответ 2

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

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

Ответ 3

В соответствии с W3 должно быть:

  • Мета-кодировка
  • Название
  • Meta name= "descripition"
  • Мета name= "ключевые слова"
  • Stylesheet
  • Файлы JavaScript

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

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