какие теги являются обязательными в блоке head с точки зрения валидации

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

Собственно, на страницу подключается 1 Javascript-файл, 1 CSS-файл и куча мета информации типа meta и link. В каком порядке их указывать чтобы страница загрузилась как можно быстрее и вообще загрузилась как надо? Сейчас указываю сначала асинхронные скрипты и стили, а только потом мета-информацию, т.е.:

Валидно ли так вообще делать? ибо на всех других веб-ресурсах сначала мета, а только потом скрипты и стили.

1. Атрибут lang нужно указывать в элементах с текстовой информацией. Если вся страница содержит контент на одном языке, нужно указывать в html. Указать в head, и не указать в body — по меньшей мере странно.

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

3. Указание кодировки лучше указывать так (тип документа внутри документа не имеет никакого смысла):

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). Если вы не намерены запрещать что-то, писать его смысла нет.

Источник

Что внутри «head»? Метаданные в HTML

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

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

Однако на больших страницах блок может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Название страницы (title)

Мы уже видели, как работает элемент : его используют для добавления заголовка (названия страницы) в документ. Элемент

(en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

Активное изучение: разбор простого примера

set to

element.» src=»https://mdn.mozillademos.org/files/12323/title-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>Теперь должно стать совершенно ясно, в чём разница между

Содержимое элемента используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из предлагается в качестве названия закладки.

element » src=»https://mdn.mozillademos.org/files/12337/bookmark-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>

Текст из также появляется в результатах поиска, как мы скоро увидим.

«>» title=»Permalink to Метаданные: Элемент «>Метаданные: Элемент

Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

Указываем автора и описание

У элементов часто есть атрибуты name и content :

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

Активное изучение: как поисковые системы используют описание

Описание из используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

Другие виды метаданных

В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).

У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:

Добавление иконок

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

Чтобы добавить на страницу favicon:

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

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

Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.

Подключение CSS и JavaScript

Источник

Для чего нужен HTML-тег head

Теги верхнего уровня и являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом:

Какие теги помещаются между тегами …

В разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.

Вот минимум, который стоит включать в каждую страницу

Обычно выглядит примерно так:

Давайте теперь более подробно рассмотрим каждый тег.

Вот некоторые рекомендации по поводу заголовка страницы:

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

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

не имеет закрывающего тега и имеет следующие атрибуты:

Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.

Как использовать meta name viewport?

Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.

Для решения этой проблемы используйте приведенный ниже код

width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.

initial-scale=1.0 устанавливает начальный уровень зума.

Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.

Обо всем этом в рамках данной статьи рассказать не получится. Обещаю посвятить теме адаптивного дизайна отдельную статью.

Что такое meta http-equiv?

При помощи тегов с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую

Этот тег используется для указания связи между страницей и другими документами в сети, т.е. с его помощью можно подключать дополнительные файлы (например, CSS или фавикон).

Источник

H HTML. Полезные мета-теги и их последовательность в head в черновиках Из песочницы

Предисловие

Так вышло, что я очень дотошный кодер. Несколько дней назад мне пришлось изрядно «поковыряться» на форумах в поисках нужной информации. В процессе, я наткнулся на некоторые регулярно повторяющиеся вопросы новичков типа: «Какие обязательные мета-теги должны присутствовать в head?» или «В какой последовательности нужно использовать мета-теги?». Каким же было мое удивление, когда достаточно опытные верстальщики, «великие гуру» форумов, давали такие скомканные ответы, как: «Не имеет значения», «Обязательных тегов нет» и т. п.

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

Вникаем в спецификацию

Следует сразу сказать, что если отталкиваться от спецификации HTML, то обязательных мета-тегов, действительно, нет. Для правильной работы страницы достаточно указать кодировку и написать заголовок.
Но как мы все знаем, на деле, каждый проект (почти каждый) имеет цель- привлечь пользователей/посетителей. Поэтому мы будем рассматривать полезные (я бы даже сказал слово «необходимые»), почти универсальные, мета-теги, которые помогут оптимизировать отображение Вашего сайта, улучшить совместимость и сделать его максимально «дружелюбным» для поисковых систем с точки зрения SEO.

Внимание! Шаблонное копирование мета-тегов из проекта в проект- это неправильно. Но, по моему мнению, это необходимый «минимальный» комплект. Данная статья является моим субъективным мнением, каждый пункт которого отталкивается строго от документаций для веб-мастеров Google и Yandex, а так же, спецификации HTML.

Начинаем

Начнем с 3 обязательных наиболее желательных тегов. Следующие теги указывают кодировку, поддержку максимально доступной версии IE, настройки viewport.

Сначала мы указываем кодировку, чтобы, при чтении документа, браузер понимал, какая кодировка у страницы, чтобы он мог правильно ее читать дальше. Затем, мы указали настройку для поддержки максимально доступной версии IE, т.к. первым делом, после кодировки, нам нужно задать правила для обработки сайта самим браузером. И в самом конце мы задаем настройки viewport’а.

Далее просто приведу всю разметку в теге head, а затем уточню некоторые нюансы.

Нюансы

Устаревшие типы и теги

Речь и дет о таких мета-тегах, как keywords и таких типах файлов, как image/x-icon.
Большинство людей считают, что, например, тег keywords безсмысленно использовать, так как он уже давно устарел. Или, тип x-icon.
Отвечу раз и навсегда на это. Нужно всегда отталкиваться от документациий для веб-разработчиков, созданными (и регулярно обновляемыми) поисковыми системами. Документацию пишут не дураки. Например, в документации Яндекс до сих пор указано, что «keywords МОЖЕТ использоваться поисковой системой для формирования сниппета», а тип x-icon указан вообще первым и ничего не сказано про то, что он устарел.

OpenGraph

Прошу заметить, что данная интеграция, как и следующая, которую я приведу, действительно, не являются обязательными. Но отталкиваясь от спецификации Yahoo!, которая была сделана много лет назад и до сих пор является действительной, можно сделать вывод, что эта интеграция необходима, чтобы повысить «карму» сайта.
Связано это с тем, что с точки зрения SEO, да и здравого смысла, рейтинг сайта зависит от того, на сколько он «универсальный солдат». Иными словами, зависит он от того, на сколько он удобен для пользователя на разных устройствах, какие дополнительные полезные возможности он в себя включает и т.п. И в это входит адаптация по iOS устройства, интеграция двух протоколов, которые я привел в этой статье, отсутвие атрибута alt в изображениях и много чего другого.
Лично я пользуюсь уже несколько лет данным ресурсом-плагином для браузера, чтобы проверять соответствие сайта этим требованиям. Прошу заметить, что, нами всеми любимый, Хабрахабр и Тостер отвечают, почти на каждой странице (на некоторых страницах это просто невозможно или ненужно) всем пунктам этого чеклиста.

OpenGraph Protocol — это протокол, который изначально был придуман для социальной сети Facebook. Теперь он используется каждой соц. сетью и большинством современных форумов/сайтов. Он содержит в себе информацию о странице, на которую пользователь дает ссылку в сообщении. Думаю, каждый из Вас отправлял ссылки в соц. сетях и видел, как ссылка преобразуется в картинку, под ней добавляется заголовок и описание.
Ссылка на документацию добавлена в комментарий в коде.

Windows

Тут у некоторых опытных верстальщиков может вспыхнуть вопрос: «При чем здесь Windows и RSS Канал и какое отношение он может иметь к, например, сайту-визитке?» Но, тут тоже есть своя особенность. Этот протокол нужен для того, чтобы при добавлении сайта в «закладки» в меню Пуск на Windows, туда добавлялось не только название сайта, но и читалась информация с RSS и постоянно обновлялась. Вы можете заметить пример работы протокола, зайдя в меню Пуск на Windows 10 и посмотрев на плитку новостей, которая регулярно обновляется.
Действительно, зачем сайту, который не нуждается в подобном функционале, нужен этот протокол?
Все просто! Это для того е самого плюсика в «карму». Но есть небольшая хитрость. Вам не обязательно действительно создавать RSS канал для сайта. Вы можете просто вставить разметку протокола, а ссылку в последней строке указать несуществующую (ведущую на несуществующий канал вашего сайта).

Заключение

Надеюсь, эта информация пригодится начинающим верстальщикам. Это основная информация. Если будут возникать какие-то вопросы, то задавайте их в комментариях. Всем удачи!

Бонус

Шаблонное копирование разметки из проекта в проект- это не всегда хорошая идея. Выше я привел самые необходимые мета-теги, которые помогут идеально соответствовать критериям хорошего сайта, отталкиваясь от спецификации.

Для таких же дотошных кодеров, как я, я оставляю ссылку на хорошую документацию, где указаны все актуальные теги, описаны случаи, в которых их необходимо использовать и просто полезная информация по ним. (Ссылка)

Источник

Какой смысл в теге html и head для стилей?

Простой 7 комментариев

HTML — могут, например, чтобы выровнять body для разных визуальных хаков, а также для установки размеров шрифтов и т. п.

RuslanSuleymanov, поставьте display: flex к тегу html. Ну и какой-нибудь justify-content.

Увидите, как body будет скакать.

RuslanSuleymanov, с чего это вдруг мы его не видим?

Он формирует основу для body. Попробуйте сами, всё сразу станет на свои места.

Попробуйте на пустой (или с небольшим содержимым) странице задать для body рамку.
https://jsfiddle.net/72msr1ez/

Следующим ходом представьте структуру: шапка, контент, футер и стандартную задачу прижать футер к низу страницы. Если не задавать 100% высоту, то без абсолютов не обойдется.

А вы их на странице видите? Что вы там стилизовать хотите?
html и head можно стилизовать, но нет никакого смысла, разве что сбросить «стандартные» стили(reset.css/normalize.css).

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

Источник