Задать вопрос
iLeonidze
@iLeonidze
xbooster.ru
html

Как валидно расставить теги в head?

Собственно, на страницу подключается 1 Javascript-файл, 1 CSS-файл и куча мета информации типа meta и link. В каком порядке их указывать чтобы страница загрузилась как можно быстрее и вообще загрузилась как надо? Сейчас указываю сначала асинхронные скрипты и стили, а только потом мета-информацию, т.е.:
<!DOCTYPE html>
<html>
<head lang="ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Name</title>
	<link rel="stylesheet" href="//example.com/styles.css" charset="utf-8"/>
	<script type="text/javascript" src="//example.com/script.js" async></script>
	<link rel="shortcut icon" href="//example.com/favicon.ico" sizes="16x16 32x32 48x48" type="image/vnd.microsoft.icon">
	<link rel="icon" href="//example.com/favicon.icns" sizes="16x16 24x24 32x32 48x48 64x64 96x96 128x128 256x256">
	<link rel=icon href="//example.com/favicon.svg" sizes="any" type="image/svg+xml">
	<meta name="robots" content="index,follow">
	<meta name="generator" content="Generator"/>
	<meta name="author" content="John Doe">
	<link rel="shortlink" href="https://example.com"/>
	<meta name="MobileOptimized" content="320">
	<!-- И еще 11КБ метаинформации -->
</head>
<body>
</body>
</html>

Валидно ли так вообще делать? ибо на всех других веб-ресурсах сначала мета, а только потом скрипты и стили.
  • Вопрос задан
  • 1819 просмотров
Комментировать
Подписаться 8 Оценить Комментировать
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
1. Атрибут lang нужно указывать в элементах с текстовой информацией. Если вся страница содержит контент на одном языке, нужно указывать в html. Указать в head, и не указать в body — по меньшей мере странно.

2. Ситуация, когда сервер не отдаёт кодировку в Content-Type, невероятно редка. Однако, если она-таки случится, а документ не содержит сигнатуру (например, выбран режим сохранения UTF-8 without BOM), то указание кодировки следует первым же тэгом meta в head, дабы браузер не парсил вторично текст, содержащий не ASCII символы.
Подробнее про encoding sniffing

3. Указание кодировки лучше указывать так (тип документа внутри документа не имеет никакого смысла):
<meta charset="utf-8">

4. Сначала стили, потом скрипты. Тут вы поступаете абсолютно верно. Если скрипту можно указать асинхронную загрузку — указывайте. Если же это невозможно, рекомендуется загружать синхронно в head только те скрипты, которые могут требоваться для других скриптов, а остальные ставить в конец body.

5. Если есть стили, которые не требуются для стартового отображения страницы (например, только для подгружаемого контента), можно динамически загружать их (например, по окончании формирования DOM) с помощью скриптов. Как вариант — с помощью скриптов, стоящих в конце body, не ориентируясь на событие DOMContentLoaded.
Советы по оптимизации от Google Developers

6. Остальные meta и link тэги можно разделить на используемые для формирования страницы (например, meta name="viewport"), которые лучше ставить в начало head после кодировки, и второстепенные, которые можно ставить в конце head, что вы и сделали.

7. Заголовок документа можно поставить после всех первостепенных meta тэгов.

8. По умолчанию meta name="robots" имеет значение all (index,follow). Если вы не намерены запрещать что-то, писать его смысла нет.
Ответ написан
12 комментариев
12 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы