Теги метаданных

Обновлено

23.08.2023

Просмотров

303

Время прочтения

30 мин.

Сложность

К этой группе тегов мы можем отнести следующие: <base>,<link>,<meta>,<style>,<title>. Все они машиночитаемые и, кроме <title>, не видны для пользователя. Они выделены в общую группу по своему назначению: они хранят какие-либо данные для идентификации сайта в веб-пространстве, содержат дополнительную информацию для поисковых роботов, социальных сетей, ссылаются на стили, шрифты и пр. Также мы могли бы вполне справедливо сюда отнести и тег <script>, т.к. его роль очень схожа с ролью тегов <link> и <style>, однако это второстепенный вопрос — какой тег к какой группе принадлежит. Нам важнее понять их назначение и изучить использование.

<base>
— (с англ. base — основание) определяет базовый URL-адрес, используемый на текущей веб-странице. Понять это может быть сложно, но следующий пример нам очень поможет: у всех страниц, ссылок, изображений и пр. на нашем сайте есть свой адрес, или URL. Так, если наш сайт связан с доменом mysite.info, то ссылка, ведущая на страницу «Контакты», может выглядеть двумя следующими образами:

                
                <!-- абсолютный адрес ссылки -->
<a href="https://mysite.info/contacts.html">Контакты</a>

<!-- относительный адрес ссылки -->
<a href="/contacts.html">Контакты</a>

Первый адрес называется абсолютным, и он так называется потому, что там прописан полный URL страницы, включая домен и доменную зону. Относительный адрес содержит только непосредственно адрес страницы, или path, о котором мы уже говорили немного прежде. Относительный адрес подразумевает, что мы ищем нужную страницу на том домене, на котором расположен сайт. Поэтому две указанные выше ссылки будут работать одинаково. Об относительных и абсолютных адресах подробно будет рассказано в уроке про ссылки, а пока что этого достаточно. Тег <base> позволяет нам переопределить поведение всех относительных ссылок и ресурсов, т.е. указать для перехода по ним другой сайт, например another-site.info. Хорошим вопросом может быть: «Зачем это нужно?». На практике данный тег используется предельно редко, потому что действительно необходимость загружать все ресурсы с другого домена выглядит странной. Это можно использовать, например, если вы создаёте почти копию своего сайта и указываете для него уже существующие на другом сайте картинки, стили, скрипты. Однако более разумным было бы скопировать все необходимые вам ресурсы на хостинг в папку с новым сайтом. Это позволит избежать ошибок и дополнительных работ в будущем, а кроме того будет работать быстрее.

К тегу применимы глобальные атрибуты, а также собственные:

href
— это базовый URL, переопределяемый для документа. Если он указан, тег <base> должен находиться в иерархии документа раньше, чем любые другие теги, ссылающиеся на какие-либо ресурсы через относительный адрес.

target
— переопределяет контекст для ссылок <a> и форм <form>, например, должны ли они открываться в новом окне, или в текущем. Может принимать значения:
_self — загружает документ по ссылке в текущем окне, является значением по умолчанию
_blank — загружает документ по ссылке в новом окне
_parent, _top — необходимы для указания окна <frame>. Загружают данные в родительском окне или поверх всех фрейм-окон. Поскольку тег <frame> и фреймовый подход в разработке сайтов больше не используются и официально запрещены, эти два значения потеряли свою актуальность и не должны указываться.

На странице может быть только один <base>, и он должен находиться внутри <head>. Если вы укажете несколько тегов <base>, то действительны будут значения атрибутов последнего из них!

                
                <base href="https://hello.com" target="_blank">

                
                <!-- Подключение стилей CSS -->
<link href="/css/style.css" rel="stylesheet">

<!-- Подключение фавиконки -->
<link rel="icon" href="favicon/favicon.ico">

<!-- Подключение шрифтов с Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Для подключения таблицы стилей CSS нам необходимо указать два атрибута: rel (relationship) — определяющий отношение подключаемого ресурса к документу, а также href, определяющий адрес ресурса. Адрес может быть абсолютным и относительным.
Во втором примере аналогичным образом подключена фавиконка, а в третьем — шрифты с Google Fonts. Это наиболее частые случаи использования тега .

Другой, более продвинутый пример подключения стилей CSS:

                
                <link href="css/style.css" rel="stylesheet">
<link href="css/style-tablet.css" rel="stylesheet" media="(min-width: 768px)">

Здесь мы видим ещё один атрибут: media — и он определяет тип устройства\медиазапрос, для которого необходимо подключать указанный файл стилей. Конкретно в этом примере медиазапрос говорит, что необходимая минимальная ширина для подключения файла это 768 пикселей. С такого разрешения начинается большинство планшетов. Мы ещё рассмотрим медиазапросы, но позже, т.к. это весьма сложная тема для продвинутого обучения.

Обыкновенно разработчик не указывает теги вручную, за исключением стилей. Шрифты, как правило, если подключаются таким образом, то используют API от Google или от других сервисов, и там весь нужный вам код генерируется автоматически. Вам остаётся только скопировать его и вставить в свой html файл. Фавиконки обычно создаются в одном из генераторов иконок. Вам необходимо лишь загрузить изображение иконки, а генератор сам создаст соответствующую разметку. Стили и некоторые продвинутые техники работы с <link> описываются часто вручную разработчиком, однако это более сложные случаи и на данном этапе обучения мы их рассматривать не будем.

К тегу применимы глобальные атрибуты, а также собственные:

as
— атрибут указывает тип загружаемого ресурса для элементов, для которых указан атрибут rel="preload" или rel="prefetch". Например, можно предварительно загружать JavaScript сценарии, аудио или видео файлы и пр., даже если они не используются на текущей странице. Эти файлы будут сохранены в кэше браузера и, если понадобятся на другой странице, будут взяты из кэша и не будут снова скачиваться. Пример кода ниже, а подробно о предварительной загрузке ресурсов пойдёт речь в отдельном уроке.

                
                <!-- Этот файл Javascript будет загружен как можно раньше -->
<link rel="preload" href="main.js" as="script">

crossorigin
— указывает, следовать ли при загрузке ресурса политике CORS (этот механизм позволяет загружать ресурсы на наш сайт с других доменов). Это весьма сложная тема, об этом будет рассказано в одном из уроков продвинутого обучения, пока что вам не нужно в это погружаться.

href
— определяет URL загружаемого ресурса. Работает идентично примерам со ссылками <a> выше, с единственной разницей в том, что ссылка как правило ведёт на какую-то HTML страницу, а в случае с <link> href указывает на адрес, по которому находится скачиваемый ресурс.

hreflang
— определяет язык связываемого ресурса, синтаксис имеет идентичный уже рассмотренному нами в прежних уроках атрибуту lang. Этот атрибут должен указываться для <link> только если указан атрибут href.

media
— позволяет загружать ресурс в зависимости от соответствия указанному в атрибуте медиазапросу CSS. Если говорить более понятно и просто — вы можете подключать определённые файлы только на мобильных, только на планшетах или только на десктопах, либо составить какой-нибудь другой необходимый вам медиазапрос.

rel
— определяет отношение подключаемого ресурса к текущему документу, т.е. объясняет браузеру, в каком качестве подключается ресурс — в качестве иконки, стилей, предзагрузки и пр. Полный список значений приведён в справочнике, а мы упомянем два наиболее часто используемые значения:

icon — определяет ресурс как фавиконку. Если иконок в теле документа указано несколько, то браузер выберет наиболее подходящую по атрибутам media,type,sizes. Для генерации разметки фавиконок пользуйтесь генераторами фавиконок, как уже было указано ранее.
stylesheet — определяет ресурс как файл стилей CSS или шрифт
Примеры использования уже были приведены выше. Другие значения будут рассмотрены в соответствующих уроках.

sizes
— как уже было упомянуто, служит для определения размеров загружаемой фавиконки. Размер подразумевается в пикселях (px).

title
— указывается только для <link rel="stylesheet">, определяя предпочтительную или альтернативную таблицу стилей. Данная опция используется предельно редко, а потому мы не будем рассказывать о ней. Почитать можно здесь.

type
— используется для указания типа подключаемого ресурса. Значение должно быть MIME типом (специальный синтаксис, описывающий формат и природу документа\файла), например text/html, text/css и пр. Ввиду того, что CSS является единственным языком, используемым в веб разработке, этот атрибут следует пропускать.

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

                
                <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Первый метатег указывает кодировку документа. Кодировка это набор символов, перечисленных в таблице, где каждый символ имеет собственный код, например двоичный, легко распознаваемый компьютером. Кодировки бывают различные, однако в вебе распространены главным образом ASCII и UTF-8. ASCII предназначалась для кодирования английского алфавита, поэтому вскоре её стало недостаточно для работы, и был создан стандарт Unicode, на основе которого позже создали UTF-8. Она оказалась более универсальной и обширной, нежели прочие, позволяла кодировать более 2 млрд. различных символов, поэтому получила широкое распространение. В настоящее время практически везде применяется именно стандарт UTF-8, поэтому вы можете запомнить его и использовать во всех своих проектах.

Второй тег meta указывает браузеру, что страницу не нужно масштабировать, а за ширину веб страницы следует принимать ширину устройства. Вы наверняка встречали старые или неудачно\наспех созданные сайты, которые при открытии их и с мобильного телефона, и с компьютера выглядят одинаково. На мобильном они становятся очень мелкими, и нам приходится увеличивать область просмотра, чтобы разобрать хоть что-то. Так происходит на тех сайтах, которые «не адаптируются» под ширину устройства и не имеют мобильной версии. Тег <meta> с атрибутами как в примере как раз говорит браузеру, что сайт адаптируется и его не нужно масштабировать. Почти все современные сайты должны быть адаптивными! Именно поэтому данный тег также включен в разметку, генерируемую редакторами кода автоматически.

О других применениях <meta> мы расскажем по ходу обучения в разных главах. Пока что его общее назначение вам должно быть понятно, и этого достаточно.

                
                <style>
h2{
  color: red;
}
</style>

Тег <style> можно размещать как в <head>,так и в <body>, ошибок не будет, однако правильным было бы вообще не использовать данный тег. Мы уже говорили о принципе разделения ответственности: разметка, стили, скрипты отдельно. Поэтому всё, что имеет отношение к CSS, мы помещаем в отдельные файлы и подключаем при помощи <link>. Исключения, при которых мы можем использовать данный тег — для учебных целей, чтобы не создавать отдельный файл и не подключать его к документу, а быстро написать <style> прямо в html и протестировать то, что нас интересует; другое исключение — это в целях ускорения работы сайта, об этом мы поговорим в разделе продвинутого обучения.

Атрибуты тега:

media
— этот атрибут работает точно так же, как и media для тега <link>

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

title
— работает схожим образом, как и для тега <link>

<title>
— (с англ. title — заглавие, название) заголовок HTML документа, отображаемый во вкладке браузера рядом с фавиконкой сайта. Данный тег может располагаться только внутри <head>. Title служит лишь для двух целей: удобство пользователя и поисковая оптимизация страницы. Что касается удобства, важно, чтобы заголовок был понятным, информативным (как и фавиконка сайта). Пользователь, взглянув на заголовок вкладки, должен тут же точно понимать, о чём пойдёт речь на странице. Ведь почти у всех пользователей в любой момент времени открыто с десяток вкладок. Даже при таком количестве вашему сайту легко потеряться среди конкурентов, либо просто случайно оказаться закрытым. Это можнт значить потерю потенциального покупателя\клиента и т.д. Поэтому подходите к созданию заголовка с умом, укажите название компании и род деятельности, название вашего сервиса и его основную функцию и т.д. Учтите также, что этот заголовок будет предложен пользователю при добавлении вашего сайта в закладки\избранное в браузере.

Другое предназначение <title> — продвижение сайта в рейтинге поисковых систем. Содержание заголовка индексируется роботами, и ваш сайт связывается так с соответствующими поисковыми запросами. Влияние заголовка в целом на результат СЕО небольшой, однако им не стоит пренебрегать, каждый балл в копилку СЕО-привлекательности сайта важен. Подробно о СЕО и в том числе о написании правильного заголовка мы поговорим в отдельном уроке по СЕО, а пока что запомните, что вы должны стремиться сочетать в заголовке документа удобство для пользователя и эффективность для индексации поисковым роботом.

Предыдущий урок

«Теги верхнего уровня»

Следующий урок

«Теги разделения контента»

Тест к уроку

html

№3

Теги метаданных

Сложность

Очки

Тест состоит из вопросов, касающихся основ работы тегов метаданных, как <base>,<meta>,<link> и прочих.

Пройти тест