Метатеги и их типы
Итак, в этом уроке вы, наконец, узнаете, что такое метатеги и для чего они используются при создании сайтов. Метатеги — это специальные инструкции, которые помогают браузерам и поисковикам правильно отображать и индексировать содержимое HTML-страниц. Их существует превеликое множество, и постоянно появляются новые и новые метатеги, которые придумывают производители браузеров, поисковых машин, HTML-редакторов и т.д. Но большинство из них очень специфично и крайне редко используется. Я вам расскажу только о самых основных.
Для создания метатегов используется тег <META>, он не имеет закрывающего тега и может располагаться только в «шапке» HTML-документа (<HEAD>), но зато в любом количестве. У <META> есть три атрибута — это атрибуты http-equiv и name, из которых в каждом метатеге используется только какой-то один, и обязательный атрибут content. Значениями этих атрибутов могут быть совершенно разные слова, словосочетания или иные словесно-буквенно-числовые конструкции. Проще говоря, именно от этих значений зависят действия метатегов, и именно они придумываются производителями для самых разных нужд.
Метатег Content-Type или кодировка HTML-страницы
C метатегом Content-Type вы знакомы с самого начала этого учебника, он занимается тем, что сообщает браузерам кодировку страницы, чтобы они правильно ее отобразили. Общий синтаксис этого метатега следующий:
<meta http-equiv="Content-Type" content="text/html; charset=кодировка">Что такое кодировка? Кодировка — это символьный набор, в котором создана HTML-страница. то есть это набор символов, которые браузер может отобразить в том виде, в котором они указаны в HTML-коде. В зависимости от языка, на котором создается сайт, используется та или иная кодировка. Если используемая кодировка не поддерживает какие-либо символы, то браузер покажет вместо них непонятные закорючки, называемые в народе «кракозябрами». Это же может произойти, если страница создана в одной кодировке, а в метатеге Content-Type указывается другая, так как, еще раз, метатег не меняет кодировку HTML-страницы, а только сообщает браузеру о ней.
Тем не менее, если кодировка не поддерживает какой-то требуемый символ, то всегда можно воспользоваться спецсимволами HTML (мнемониками), которые понимают все популярные браузеры вне зависимости от кодировки страницы.
Ребята, подчеркиваю еще раз — этот тег не изменяет кодировку, он только говорит браузеру о ней. Чтобы изменить кодировку страницы, надо произвести соответствующие действия в настройках HTML-редактора. Например в «Notepad++» надо нажать «Кодировки» → «Преобразовать в...» и выбрать нужную. А если вы хотите, чтобы все создаваемые страницы сразу были в новой кодировке, то выберете: «Опции» → «Настройки» → «Новый документ». Ну и, естественно, надо не забыть поменять кодировку в метатеге.
Кодировок существует очень много, в рунете самое большое распространение получили три из них:
Кодировка Windows-1251
Кодировка «Windows-1251» содержит латинские буквы, буквы русского и родственного ему языков, а также используемые в них знаки препинания и пунктуации, в том числе и знаки английского языка.
Кодировка KOI8-R
Кодировка «KOI8-R» еще одна кодировка предназначенная для отображения кириллических символов. Она имеет несколько отличий от «Windows-1251» и не так распространена, но подробное сравнение этих кодировок не является темой данного учебника.
Кодировка UTF-8
Кодировка «UTF-8» является самой универсальной, так как она поддерживает символы практически всех языков мира, а также многие специфические знаки, например нотную грамоту. Поэтому, если страница имеет кодировку UTF-8, то можно отказаться от использования большинства спецсимволов HTML и писать символы сразу в готовом виде.
Если вы выбираете «UTF-8», то используйте вариант без метки BOM, иначе ваши страницы могут некорректно отображаться.
Метатег Description или описание HTML-страницы
Метатег Description применяется для описания содержимого HTML-страницы. Это описание используется поисковиками при выдаче результата запроса и показывается сразу под заголовком HTML-страницы, который находится в теге <TITLE>...</TITLE>. Общий синтаксис такой:
<meta name="description" content="Описание HTML-страницы.">Описание должно быть осмысленным и не превышать 200 символов (с пробелами), так как поисковики показывают только эти первые 200, а некоторые и того меньше.
Пример отображения заголовка страницы и ее описания.
Метатег Keywords или ключевые слова
Метатег Keywords используется для перечня ключевых слов, по которым поисковики оценивают соответствие запроса этому перечню. Слова пишутся через запятую и, желательно, не более десяти, так как при увеличении количества, падает «вес» каждого слова. И конечно все ключевые слова должны попадаться в тексте страницы, ну или хотя бы большая их часть. Общий синтаксис метатега такой:
<meta name="keywords" content="слово1,слово2,слово3,...">Метатег Refresh или перенаправление на другую страницу
Иногда требуется, чтобы при попадании на определенную страницу сайта, через какой-то промежуток времени произошло автоматическое перенаправление (редирект) пользователя на другую страницу. В этом может помочь метатег Refresh, записывается он так:
<meta http-equiv="refresh" content="число;адрес новой страницы">Число — это количество секунд через которые должно произойти автоматическое перенаправление, ну а адрес — он и есть адрес, полный или относительный путь страницы, на которую будет редирект. Например:
<meta http-equiv="refresh" content="3;https://seodon.ru/html/metatags.php">В некоторых браузерах по умолчанию отключена возможность автоматического перенаправления на другую страницу при помощи метатега Refresh. Поэтому вместо него часто используются скрипты.
Резюме
Ну что ж, девочки и мальчики, вот вы и изучили учебник по HTML для начинающих, в котором я описал все основные возможности языка HTML. Надеюсь те полтора месяца, которые я провел за его написанием, не пропали даром, и вы действительно чему-то научились. Если в процессе обучения какие-то моменты учебника вам показались излишне сложными или непонятными, то буду рад выслушать ваши рекомендации по улучшению. Да, и не забывайте про справочник по тегам HTML, там еще много чего интересного есть, например <MARQUEE> или <PRE>, но теперь вы и сами в состоянии с ними разобраться, с чем вас и поздравляю! ;)
И еще. В этом учебнике, чтобы избежать использования устаревших атрибутов HTML, мы с вами активно употребляли атрибут style, который служит для подключения стилей (CSS). Но и его повсеместное применение не является оптимальным, то есть он лучше, чем устаревшие атрибуты, но хуже, чем полный переход на CSS. Ну, думаю, вы догадываетесь, куда я клоню, да-да совершенно верно, учебник CSS ждет вас. Кстати он довольно легкий, а если учесть, что вы уже кое-что знаете из CSS, то для вас его освоение станет еще проще. В общем, удачи вам!
| Нумерованные и маркированные списки | ← Содержание |