Тег head
Тег head содержит в себе служебное содержимое страницы, которое задает кодировку документа, подключает CSS файлы на страницу, подключает JavaScript файлы на страницу и так далее.
Чаще всего внутри head находятся теги title , meta , script , link , style .
Пример
Давайте посмотрим, как выглядит структура простейшей html страницы:
Смотрите также
- тег doctype ,
который содержит doctype страницы - тег html ,
который является главным тегом на странице - тег body ,
который содержит основное содержимое - тег title ,
который содержит заголовок страницы - тег meta ,
который содержит meta данные
Где расположен код главной страницы, а именно раздел head?
Пытаюсь зарегистрировать сайт на Яндекс вебмастер. Необходимо подтвердить права на сайт и д обавить в код главной страницы сайта (в раздел head) мета-тег. Не получается, т.к не могу найти расположение кода главной страницы.
Спасибо.
Ответы (10)
06.09.2017 09:50
На чем у вас написан сайт? Движок какой-то, Вордпресс или самописный?
Свернуть ответы
06.09.2017 09:54
06.09.2017 10:02
Тогда вам проще можно сделать — установите бесплатный плагин Yoast SEO, зайдите в настройках в инструменты веб-мастеров, и там уже в поле для Яндекса напишите метаданные, чтобы подтвердить права на ваш сайт.
06.09.2017 10:06
Спасибо огромное! Поняла)
07.09.2017 01:18
Судя по всему, код главной страницы расположен в файле header.php
Именно его нужно править в данном случае. Расположение зависит от используемой темы.
Например, если тема Twenty Sixteen, то относительный путь будет такой: public_html/wp-content/themes/twentysixteen/header.php
Что внутри «head»? Метаданные в HTML
Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:
- заголовок (title) страницы
- ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
- ссылки на иконки
- другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)
В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.
| Предварительные требования: | Базовое знакомство с HTML , описанное в Начало работы с HTML. |
|---|---|
| Задача: | Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ. |
Что такое ?
doctype html> html> head> meta charset="utf-8" /> title>Моя тестовая страницаtitle> head> body> p>Это — моя страницаp> body> html>
Содержимое , в отличие от содержимого элемента , не отображается на странице. Задача — хранить метаданные документа. В приведённом выше примере совсем небольшой:
head> meta charset="utf-8" /> title>Моя тестовая страницаtitle> head>
Однако на больших страницах блок может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.
Название страницы (title)
Мы уже видели, как работает элемент : его используют для добавления заголовка (названия страницы) в документ. Элемент (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!
- Элемент (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
- Элемент — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.
Активное изучение: разбор простого примера
- Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
- Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
- Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как. в меню браузера и выберите папку для сохранения.
- Откройте файл в браузере. Вы увидите что-то вроде этого:
Теперь должно стать совершенно ясно, в чём разница между и ! - Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
Содержимое элемента используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из предлагается в качестве названия закладки.
Текст из также появляется в результатах поиска, как мы скоро увидим.
Метаданные: Элемент
Указываем кодировку текста документа
В заголовке примера выше есть следующая строка:
meta charset="utf-8" />
В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:
Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:
Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.
Активное изучение: экспериментируем с символьными кодировками
Чтобы проверить это, вернитесь к HTML из примера (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):
p>Пример на японском: ご飯が熱い。p>
Указываем автора и описание
У элементов часто есть атрибуты name и content :
- name — тип элемента, то есть какие именно метаданные он содержит.
- content — сами метаданные.
Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:
meta name="author" content="Крис Миллс" /> meta name="description" content="Задача MDN — в том, чтобы обучить новичков всему тому, что нужно им для разработки веб-сайтов и приложений." />
По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.
Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.
Активное изучение: как поисковые системы используют описание
Описание из используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.
- Перейдите на главную страницу Mozilla Developer Network.
- Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
- Найдите тег meta с описанием. Он выглядит так:
meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." />
Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.
Примечание: Многие типы больше не используются. Так, поисковые системы больше не используют данные из элемента , в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.
Другие виды метаданных
В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." /> meta property="og:title" content="MDN Web Docs" />
Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _(User eXperience, UX)_.
У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:
meta name="twitter:title" content="MDN Web Docs" />
Добавление иконок
Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.
Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.
Чтобы добавить на страницу favicon:
- Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png ) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
- Добавьте ссылку на иконку в документа:
link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:
link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.
Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.
Подключение CSS и JavaScript
Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент , а скрипты — через элемент .
link rel="stylesheet" href="my-css-file.css" />
script src="my-js-file.js"> script>
Активное изучение: добавляем на страницу CSS и JavaScript
- Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
- Откройте HTML в браузере и текстовом редакторе.
- Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов и .
Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:
- JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
- CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.
Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.
Основной язык HTML страницы
Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):
Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово «шесть» пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).
Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:
p>Пример на японском: span lang="ja">ご飯が熱い。span>.p>
Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.
Заключение
На этом заканчивается наш беглый обзор по HTML-блоку head — с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.
В этом модуле
- Начало работы с HTML
- Что такое заголовок? Метаданные в HTML
- Основы редактирования текста в HTML
- Создание гиперссылок
- Углублённое форматирование текста
- Структура документа и веб-сайта
- Отладка HTML
- Разметка письма
- Структурируем страницу
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Html head — используемые элементы, правильные мета теги, примеры, код
Теги верхнего уровня и являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом:
Заголовок страницы Содержимое страницы
Как видно выше, тег содержит метаданные о странице, а тег — непосредственно содержимое страницы. Информация внутри не видна пользователю (за исключением , но об этом позже), зато активно используется:
- роботами в процессе индексации вашего сайта,
- соц. сетями и месседжерами, когда кто-то шарит страницу вашего сайта,
- ну и конечно, самим браузером в процессе отрисовки страницы.
Какие теги помещаются между тегами …
В разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.
Вот минимум, который стоит включать в каждую страницу
Заголовок страницы Обычно выглядит примерно так:
Заголовок страницы body Давайте теперь более подробно рассмотрим каждый тег.
Тег
Этот тег определяет заголовок страницы, текст который вводится на вкладке браузера рядом с фавиконом (который, кстати тоже задается внутри тега , но об этом чуть позже).
Кроме того, поисковые системы очень часто используют значение тега в качестве заголовка поискового сниппета, поэтому этот тег — абсолютный “мастхэв”.
Вот некоторые рекомендации по поводу заголовка страницы:
- Следите за количеством символов (лучше не больше 50-60)
- Не борщите с ключевиками
- Помещайте основную ключевую фразу в начало заголовка
Основная ключевая фраза - дополнительная фраза | Название сайта Тег
Этот тег используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся. Это в общих чертах.
Существует большое количество типов метаданных, поэтому для простоты восприятия, я разделил их на основные (те, которые желательно использовать в разметке любой страницы) и второстепенные (они, конечно, тоже очень важны, но специфичны для решения определенных задач).
не имеет закрывающего тега и имеет следующие атрибуты:
- charset — кодировка страницы
- name — название метаданных, которые содержатся в данном теге
- http-equiv — формат ответа сервера
- content — само значение
Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.
Итак основная
Как использовать meta name viewport?
Viewport — это размер видимой области страницы. Он, понятное дело, сильно отличается в зависимости от размера экрана устройства, на котором пользователь просматривает ваш сайт.
Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.
Для решения этой проблемы используйте приведенный ниже код
width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.
initial-scale=1.0 устанавливает начальный уровень зума.
Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.
Обо всем этом в рамках данной статьи рассказать не получится. Обещаю посвятить теме адаптивного дизайна отдельную статью.
Это далеко не полный список того, что можно указать при помощи тега . Например, можно еще «сформировать» сниппет для шаринга страницы в соц. сетях и мессенджерах. Подробнее об этом смотрите в конце этой статьи.
Что такое meta http-equiv?
Мета-теги с атрибутом http-equiv — довольно сложная для восприятия тема. Говоря простым языком, при помощи таких тегов можно передавать браузеру информацию о том, как следует обрабатывать страницу в формате заголовка ответа сервера.
При помощи тегов с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую
В HTML5 большая часть meta http-equiv не поддерживается ( set-cookie , expires ).
Тег
Этот тег используется для указания связи между страницей и другими документами в сети, т.е. с его помощью можно подключать дополнительные файлы (например, CSS или фавикон).
также не имеет закрывающего тега и его параметры передаются в виде атрибутов.
Ниже приведены наиболее распространенные примеры использования тега :
Вот еще несколько примеров использования
Тег
Этот тег используется для вывода информации о стилях элементов на странице. Внутри тега используется тот же синтаксис, что и в CSS-файле. Если вам нужно задать стили каким-либо элементам на странице, и по какой-то причине вы не можете или не хотите выносить эти стили в CSS-файл, их можно описать внутри этого тега.
Этот тег может быть использован в разметке страницы неоднократно, и его можно помещать не только в , но и в .
body #container Lorem ipsum dolor sit amet
Тег
Этот тег может использоваться как для вывода javascript-кода, так и для подключения внешних js-файлов. Во втором случае необходимо использовать атрибут src, при этом внутри тега не должно ничего быть.