Posted:
Фев 16, 2021
Comments:
0 Comments

Теги в head: Тег head, служебная информация о странице — Структура HTML-документа — HTML Academy

Содержание

Что внутри «head»? Метаданные в HTML — Изучение веб-разработки

  • Назад
  • Обзор: Introduction to HTML
  • Далее

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

  • заголовок (title) страницы
  • ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
  • ссылки на иконки
  • другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

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

Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.

Давайте снова посмотрим на HTML-документ из прошлой статьи:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Содержимое <head>, в отличие от содержимого элемента <body>, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:

<head>
  <meta charset="utf-8">
  <title>Моя тестовая страница</title>
</head>

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

Мы уже видели, как работает элемент <title>: его используют для добавления заголовка (названия страницы) в документ. Элемент <h2> (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

  • Элемент <h2> (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
  • Элемент <title> — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.

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

  1. Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как… в меню браузера и выберите папку для сохранения.
  2. Откройте файл в браузере. Вы увидите что-то вроде этого:

    Теперь должно стать совершенно ясно, в чём разница между <h2> и <title>!

  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

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

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

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент <meta>. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

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

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

<meta charset="utf-8">

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

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

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

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

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

<p>Пример на японском: ご飯が熱い。</p>

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

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

  • name — тип элемента, то есть какие именно метаданные он содержит.
  • content — сами метаданные.

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

<meta name="author" content="Крис Миллс">
<meta name="description" content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">

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

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

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

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

  1. Перейдите на главную страницу Mozilla Developer Network.
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
  3. Найдите тег meta с описанием. Он выглядит так:
    <meta name="description" content="Веб-документация на MDN
предоставляет собой информацию об открытых веб-технологиях,
включая HTML, CSS и различные API для веб-сайтов и
прогрессивных веб-приложений. Также на сайте содержатся материалы
для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
  4. Теперь найдите «Mozilla Developer Network» в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!

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

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

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

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

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

<meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.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:

  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
  2. Добавьте ссылку на иконку в <head> документа:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

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

<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer. mozilla.org/static/img/favicon144.png">
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- Для iPad первого и второго поколения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- Для других случаев - обычный favicon -->
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

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

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

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент <link>, а скрипты — через элемент <script> .

Активное изучение: добавляем на страницу CSS и JavaScript

  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
  2. Откройте HTML в браузере и текстовом редакторе.
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов <link> и <script>.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

  • JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
  • CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

<html lang="en-US">

<html lang="ru">

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

Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:

<p>Пример на японском: <span lang="ja">ご飯が熱い。</span>.</p>

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

На этом заканчивается наш беглый обзор по HTML-блоку head — с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.

  • Назад
  • Обзор: Introduction to HTML
  • Далее
  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Last modified: , by MDN contributors

Что можно положить в тег / Хабр

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
   для обеспечения правильного отображения документов.
   Любой другой элемент заголовка должен идти *после* этих тегов.
  -->
  <title>Заголовок страницы</title>
</head>

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования.

Элементы

Допустимые элементы <head> включают base, link, meta, noscript, script, style, template и title.

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

<!--
 Установите кодировку символов для этого документа так, чтобы
 все символы в пространстве UTF-8 (например, эмодзи)
 отображались правильно.
-->
<meta charset="utf-8">
<!-- Установите заголовок документа -->
<title>Заголовок страницы</title>
<!-- Установите базовый URL для всех относительных URL в документе -->
<base href="https://example.com/page.html">
<!-- Ссылка на внешний файл CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Используется для добавления CSS в документ. Используется для важной стилизации -->
<style>
/* . .. */
</style>
<!-- Ссылка на внешний JavaScript файл -->
<script src="script.js"></script>
<!-- Используется для добавление JS в документ-->
<script>
 // функция(и) идут здесь
</script>
<!-- Используется на случай если JavaScript отключен в браузере -->
<noscript>
 <!-- Альтернатива, когда JS отключен -->
</noscript>
<!-- Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ. Если указан в <head>, то <template> может содержать только метаданные -->
<template>
  
</template>

Мета

<!--
 Вышеуказанные 2 мета-тега должны стоять как можно раньше в <head>.
 для обеспечения правильного отображения документов.
 Любой другой элемент заголовка должен идти после этих тегов.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
 Позволяет контролировать, откуда загружаются ресурсы. 
 Поместите как можно раньше в <head>, так как тег 
 применяется только к ресурсам, которые объявлены после него.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) -->
<meta name="application-name" content="Имя приложения">.
<!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">
<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое может использоваться в результатах поисковых систем. -->
<meta name="description" content="Описание страницы">.
<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->
<!-- Указывает Google не показывать поисковую строку sitelinks -->
<meta name="google" content="nositelinkssearchbox">
<!-- Указывает Google не переводить документ -->
<meta name="google" content="notranslate">
<!-- Проверить право собственности сайта -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмастерам -->
<meta name="msvalidate. 01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) -->
<meta name="generator" content="название программного обеспечения">
<!-- Краткое описание темы вашего документа -->
<meta name="subject" content="тема вашего документа">
<!-- Дает общую возрастную оценку, основанную на содержании документа -->
<meta name="rating" content="General">
<!-- Позволяет контролировать, как передается информация о реферере -->
<meta name="referrer" content="no-referrer">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">
<!-- Полностью отказаться от предварительной выборки DNS, установив значение "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Указывает документ, который будет отображаться в определенном фрейме -->
<meta http-equiv="Window-Target" content="_value">
<!-- Гео-теги -->
<meta name="ICBM" content="широта, долгота">. 
<meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- например, content="New York City" -->
<!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

  • ​ Мета-теги, которые понимает Google

  • ​ WHATWG Wiki: MetaExtensions

  • ​ ICBM в Википедии

  • ​ Геотеги в Википедии

Ссылки

<!-- Путь до внешней таблицы стилей -->
<link rel="stylesheet" href="https://example.com/styles.css">.
<!-- Помогает предотвратить проблемы дублированного контента -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Ссылки на AMP HTML версию текущего документа -->
<link rel="amphtml" href="https://example. com/path/to/amp-version.html">
<!-- Ссылка на JSON-файл, в котором указаны данные для "установки" веб-приложения -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">
<!-- Ссылки на информацию об авторе (авторах) документа -->
<link rel="author" href="humans.txt">
<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">
<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Предоставляет информацию об авторе или другом человеке -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">.
<link rel="me" href="sms:+15035550125">
<!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес -->
<link rel="archives" href="https://example. com/archives/">
<!-- Ссылки на ресурс верхнего уровня в иерархической структуре -->
<link rel="index" href="https://example.com/article/">
<!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- Первый, последний, предыдущий и следующий документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Используется, когда для ведения блога используется сторонний сервис -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост -->
<link rel="pingback" href="https://example. com/xmlrpc.php">
<!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Заголовок поиска">.
<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prefetching, preloading, prebrowsing -->
<!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www. example.com/">
<link rel="prerender" href="https://example.com/">.
<link rel="preload" href="image.png" as="image">

  • ​ Link Relations

Иконки

<!-- Для IE 10 и ниже -->
<!-- Поместите favicon.ico в корневой каталог - тег не нужен -->
<!-- Иконка в максимальном разрешении, для которого она нам нужна -->
<link rel="icon" href="/path/to/icon.png">
<!-- Иконка Apple Touch (повторное использование 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Значок прикрепленной вкладки Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

  • ​ Все о фавиконах (и сенсорных иконках)

  • ​ Создание прикрепленных иконок вкладок

  • ​ Favicon Cheat Sheet

  • ​ Иконки и цвета браузера

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook.  Подробнее о разметке Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок содержимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Описание того, что находится на изображении (не подпись)">
<meta property="og:description" content="Описание">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">

  • ​ Open Graph protocol

  • ​ Протестируйте свою страницу с помощью Facebook Sharing Debugger

Twitter Card

С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт.  Подробнее о Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Заголовок контента">.
<meta name="twitter:description" content="Описание контента менее 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.">

  • ​ Начало работы с карточками — Twitter Developers

  • ​ Проверьте свою страницу с помощью Twitter Card Validator

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter.  Подробнее о возможностях конфиденциальности Twitter.

<!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации -->
<meta name="twitter:dnt" content="on">
Schema.org
<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Заголовок контента">.
     <meta itemprop="description" content="Описание содержимого менее 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу <html>.

  • ​ Начало работы — schema.org

  • ​ Протестируйте свою страницу с помощью Rich Results Test

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

<meta name="pinterest" content="nopin" description="Извините, вы не можете сохранить с моего сайта!">.
Facebook Instant Articles
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- URL веб-версии вашей статьи -->
<link rel="canonical" href="https://example.com/article.html">
<!-- Стиль, который будет использоваться для этой статьи -->
<meta property="fb:article_style" content="myarticlestyle">

  • ​ Создание статей — мгновенные статьи

  • ​ Образцы кода — мгновенные статьи

OEmbed
<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="Профиль oEmbed: JSON">
 
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">

  • ​ oEmbed format

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

<meta itemprop="name" content="название акции">
<meta itemprop="image" content="http://imgcache. qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="поделиться содержимым">

  • ​ Code Format Docs

Браузеры / Платформы

Apple iOS
<!-- Баннер умного приложения -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">
<!-- Иконка запуска (180x180px или больше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Изображение экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- Заголовок значка запуска -->
<meta name="apple-mobile-web-app-title" content="Название приложения">.
<!-- Включить автономный (полноэкранный) режим -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Глубокое связывание приложений iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample. com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

  • ​ Configuring Web Applications

Google Android
<!-- Цветовая тем приложения -->
<meta name="theme-color" content="#E64545">
<!-- Добавить на главный экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Глубокое связывание приложений Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
Google Chrome
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.
<!-- Отключить подсказку перевода -->
<meta name="google" content="notranslate">
Microsoft Internet Explorer
<!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig. xml">

Минимально необходимая разметка xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>

  • ​ Ссылка на схему конфигурации браузера

Браузеры (китайские)

360 Browser
<!-- Выбор порядка движков рендеринга -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
QQ Mobile Browser
<!-- Фиксирует экран в заданной ориентации -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="x5-fullscreen" content="true">
<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим и т. д.) -->
<meta name="x5-page-mode" content="app">
UC Mobile Browser
<!-- Фиксация экрана в заданной ориентации -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="full-screen" content="yes">
<!-- Браузер UC будет отображать изображения, даже если находится в "текстовом режиме" -->
<meta name="imagemode" content="force">
<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим, запрещающий жест и т.д.) -->
<meta name="browsermode" content="application">
<!-- Отключение "ночного режима" браузера UC для этого документа -->
<meta name="nightmode" content="disable">
<!-- Упростить документ, чтобы уменьшить передачу данных -->
<meta name="layoutmode" content="fitscreen">
<!-- Отключить функцию браузера UC "увеличивать масштаб шрифта, когда в документе много слов" -->
<meta name="wap-font-scale" content="no">

  • ​ UC Browser Docs

Ссылки на приложения

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org. applinks">
<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

  • ​ Ссылки на приложения

Другие ресурсы

  • ​ HTML5 Boilerplate Docs: The HTML

  • ​ HTML5 Boilerplate Docs: Extend and customize

Связанные проекты

  • Atom HTML Head Snippets — Atom пакет для HEAD сниппетов

  • Sublime Text HTML Head Snippets — пакет Sublime Text для HEAD сниппетов

  • head-it — CLI интерфейс для HEAD сниппетов

  • vue-head — Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

  • ​ PDF eng

​ Переводы

  • ​ Индонезийский

  • ​ Бразильский португальский

  • ​ Китайский (упрощенный)

  • ​ Немецкий

  • ​ Итальянский

  • ​ Японский

  • ​ Корейский

  • ​ Испанский

  • ​ Турецкий

​ Contributing

Откройте issue или PR, чтобы предложить изменения или дополнения.

​ Contributors

Посмотрите на всех супер классных авторов ​

​ Автор оригинального репозитория

Josh Buchea

​ Поддержка

Если этот проект был полезен для вас или вашей организации, пожалуйста, рассмотрите возможность прямой поддержки моей работы автора оригинального репозитория:

  • ​ Sponsor me on GitHub

  • ​ Star this project on GitHub

  • ​ Следуйте за Джошем на GitHub

  • ​ Следуйте за Джошем в Twitter

Всем кто помогает, спасибо! ​

— Josh

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод на Хабре, чтобы поделиться с русскоязычным сообществом полезным материалом.

Другие важные статьи

Семантическая вёрстка

Pixel Perfect

Стоит ли делать слайдеры на CSS

Что использовать: ссылки или кнопки

Когда использовать флексы, а когда гриды

Элементы заголовка HTML

❮ Назад
Далее ❯

Элемент HTML
является контейнером для следующих элементов:
<название> , <стиль> ,
<мета> , <ссылка> , <скрипт> и <база> .

Элемент HTML

Элемент является контейнером для метаданных (данные
о данных) и помещается между 9тег 0006 и тег .

Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.

Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.

HTML-элемент

</h3><p> Элемент <code><title> </code> определяет заголовок документа.<br /> Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или в<br /> вкладка страницы.</p><p> Элемент <code><title> </code> обязателен в документах HTML!</p><p> Содержание заголовка страницы очень важно для поисковой оптимизации<br /> (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка<br /> при отображении страниц в результатах поиска.</p><p> Элемент <code><title> </code>:</p><ul><li> определяет заголовок на панели инструментов браузера</li><li> предоставляет заголовок для страницы, когда она добавляется в избранное</li><li> отображает заголовок страницы в результатах поиска</li></ul><p> Итак, постарайтесь сделать заголовок максимально точным и осмысленным!</p><p> Простой HTML-документ:</p><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span> Пример <span class="ez-toc-section-end"></span></h4><p data-readability-styled="true"> <!DOCTYPE html> <br /><html> <br /><head> <br /><title>Значащая страница<br /> Заголовок

Содержание документа. …..


Попробуйте сами »

HTML-элемент

Попробуйте сами »

HTML-элемент

Элемент определяет
отношения между текущим документом и внешним ресурсом.

<ссылка>
чаще всего используется для ссылки на внешние таблицы стилей:

Пример

Попробуйте сами »

Совет: Чтобы узнать все о CSS, посетите наш учебник по CSS.

Элемент HTML

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

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

Примеры

Определение используемого набора символов:

Определение ключевых слов для поисковых систем:

CSS

Определите описание вашей веб-страницы:

Определить автора страницы:

Обновлять документ каждые 30 секунд:

Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:

Пример тегов:

Пример




Попробуйте сами »

Настройка области просмотра

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

Вы должны включать следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как
для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Начальная шкала =1,0 9Часть 0007 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

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

Без
метатег области просмотра


метатег окна просмотра

Элемент HTML

Попробуйте сами »

Совет: Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript.

HTML-элемент

Элемент указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.

Тег должен иметь
href или целевой атрибут присутствует, или оба.

Может быть только один единственный
элемент в документе!

Пример

Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<голова>


gif"
alt="Stickman">
базовый тег HTML

Попробуйте сами »

Резюме главы

  • The Элемент является контейнером для метаданных (данные
    о данных)
  • Элемент помещается между тег и тег
  • Требуется элемент </code> и<br /> он определяет заголовок документа</li><li> Элемент <code><br /><style></code>используется для определить информацию о стиле для одного документа </li><li><code><ссылка></code>тег чаще всего используется для ссылки на внешние таблицы стилей </li><li>Элемент <code><meta></code>обычно используется для указания набора символов,описания страницы,ключевых слов,автора документ и настройки видового экрана </li><li>Элемент <code><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://consei.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>