Для чего нужен тег head
Для чего нужен 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 или фавикон).
Что внутри «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-страницы.
Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.
Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.
И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.
Теперь, перейдем к ответам на обозначенные вопросы в начале статьи.
Что нужно писать между тегами head и зачем?
Открываем папку, которую только что создали. И в ней создаем новый текстовый документ. Назвать его можно, как угодно. Только использовать в названии лучше латиницу, а не кириллицу. Назовем его, например, main. Что будет означать, что это у нас главная страница.
Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.
Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:
У вас DOCTYPE может быть другим, в зависимости от выбранного.
Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.
Да, при этом текстовый документ в папке может остаться. Его можно удалить, так как он нам больше не нужен.
Итак, обратим внимание на теги head. На данном этапе, между тегами указан только заголовок страницы и ничего более. Но, что же нужно написать еще между данными тегами. И самое главное зачем? Давайте разбираться.
Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».
Теперь, чтобы ускорить процесс, я выложу готовый код. А затем расскажу что для чего нужно.
Итак, теперь по порядку:
Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?
Создание первой html-страницы.
Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:
После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8». После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.
Что еще мы можем сделать? Чтобы наша первая страничка стала немного красивее. Мы можем, например, залить цветом фон страницы и покрасить заголовок в какой-нибудь цвет. И для этого, мы будем использовать каскадную таблицу стилей. Между тегами head, чуть раньше мы уже подключили файл со стилями, но его еще нет. Значит, его необходимо создать.
Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.
Получается примерно такой код. Цвета могут быть другими, для того, чтобы подобрать необходимый цвет зайдите на эту страницу:
Да, кстати, рекомендую все предлагаемые коды не копировать и вставлять, а прописывать самостоятельно. Так будет намного полезней, нежели просто копировать.
Итак, что мы имеем? А имеем мы заполненную техническую часть документа, что находится между тегами head. А также первую html-страницу, созданную самостоятельно. Да, в ней нет ничего особенного, но первый шаг к созданию HTML-сайта сделан. А в следующий раз мы продолжим, и приступим к созданию главной страницы сайта. Подписывайтесь, чтобы не пропустить.