Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами <head> и </head>, которые никак не отображаются браузером (за исключением содержимого тега <title>). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.
Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область <head> лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.
Функции мета-тегов
На данный момент не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:
- мета-теги могут идентифицировать авторство веб-документа, его адрес, частоту его обновлений;
- мета-теги используются поисковыми роботами для индексации и создания заголовков гипертекстовых документов;
- мета-теги влияют на режим отображения веб-страниц.
Группы метатегов
Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.
Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.
| Атрибут | Описание |
|---|---|
| Name | Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др. |
| content | Устанавливает значение атрибута, заданного с помощью name или http-equiv. |
| scheme (устарел) | Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5. |
| charset | Новый атрибут, показывает кодировку документа в HTML5. Пример: <meta charset=»utf-8″> |
| http-equiv | Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы. |
Группа значений атрибута NAME
«keywords» (ключевые слова)
Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.
Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.
HTML-код с «keywords»:
<!DOCTYPE html>
<html>
<head>
<title>keywords</title>
<meta name="keywords" content="HTML,CSS,PHP,JavaScript">
</head>
<body>Основное содержимое страницы</body>
</html>«description» (описание страницы)
Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!
HTML-код с «description»:
<!DOCTYPE html>
<html>
<head>
<title>description</title>
<meta name="description" content="Сайт об HTML и CSS">
<meta name="keywords" content="HTML,CSS,PHP,JavaScript">
</head>
<body>Основное содержимое страницы</body>
</html>«Author» и «Copyright»
Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».
HTML-код с «author»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="author" content="Maxim White">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>«Robots»
Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.
У «robots» могут быть следующие значения:
- index — страница должна быть проиндексирована;
- noindex — страница не индексируется;
- follow — гиперссылки на странице учитываются;
- nofollow — гиперссылки на странице не учитываются
- all — включает значения index и follow, включен по умолчанию;
- none — включает значения noindex и nofollow.
HTML-код с «robots»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="robots" content="noindex, nofollow">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="author" content="Maxim White">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>Группа значений атрибута HTTP-EQUIV
«Content-Type»
Content-Type определяет тип документа и его кодировку.
HTML-код с «Content-Type»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Сайт об HTML и CSS">
<meta name="author" content="Maxim White">
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>Основное содержимое страницы</body>
</html>В HTML5 указание кодировки упрощено:
<meta charset="UTF-8">«refresh»
Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).
HTML-код с «refresh»:
<!DOCTYPE html>
<html>
<head>
<title>Автозагрузка</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
</head>
<body>Основное содержимое страницы</body>
</html>Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru.
Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.
| Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся. |
«Content-Language»
Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.
HTML-код с «content-language»:
<!DOCTYPE html>
<html>
<head>
<title>Язык документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
<meta http-equiv="content-language" content="ru">
</head>
<body>Основное содержимое страницы</body>
</html>В HTML5 указание языка упрощено:
<html lang="ru">В этом уроке перечислены не все метатеги, которые вы можете встретить при изучении веб-ремесла. Остальные специфичны и вы познакомитесь с ними в дальнейшем при изучении наших уроков. Из всех же вышеперечисленных к использованию на каждой странице вашего сайта рекомендуются метатеги и их атрибуты приведенные в следующем примере:
Пример HTML:
Попробуй сам
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="HTML, Meta Tags, метаданные">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>Задачи
Итоговое задание [10-14]
На этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.
Пришло время повторить изученное и выполнить четыре несложных задания:
Ключевые слова
- Задание
- Ответ
- Реши сам »
С помощью одинарного тега <meta> задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Ключевые слова</title>
</head>
<body>
<p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
</body>
</html>Индексация веб-страницы
- Задание
- Ответ
- Реши сам »
С помощью одинарного тега <meta> разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Индексация и переход по ссылкам</title>
</head>
<body>
<p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
</body>
</html>Автоматическая перезагрузка страницы
- Задание
- Ответ
- Реши сам »
С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Автоматическая перезагрузка страницы</title>
</head>
<body>
<p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
</body>
</html>Автозагрузка новой страницы
- Задание
- Ответ
- Реши сам »
Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Автозагрузка новой страницы</title>
</head>
<body>
<p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
</body>
</html>Материал взят с разрешения админа здесь
Мета-инструкции
Заголовок
HTML-документа может включать неограниченное
количество META-инструкций.
META-инструкция
— это способ определить некоторую
переменную путем указания ее имени
(атрибут NAME)
и значения (атрибут CONTENT).
Список
META-инструкций
<META
NAME=»description» CONTENT=»Это руководство»>
Переменная
description
содержит краткое описание документа.
<META
NAME=»keywords»
CONTENT=»Интернет,
HTML,
WWW,
руководство, публикация, гипертекст»>
Переменная keywords
содержит набор ключевых слов, описывающих
содержание документа.
Другая группа
META-инструкций определяет эквиваленты
команд протокола передачи гипертекстов.
<META
HTTP-EQUIV=»Content-type» CONTENT=»text/html;
charset=windows-1251″>
Эта META-инструкция
дает браузеру указание интерпретировать
загружаемый документ как содержащий
HTML-текст в кодировке Windows/1251.
<META
HTTP-EQUIV=»Content-type» CONTENT=»text/html;
charset=koi8-r»>
Эта META-инструкция
абсолютно аналогична предыдущей, только
в качестве кодировки указана КОИ-8.
<META
HTTP-EQUIV=»Refresh» CONTENT=»время;
URL=документ»>
Такая META-инструкция
дает браузеру примерно такое указание:
«Если через время
в секундах после завершения загрузки
этого документа пользователь не перейдет
к другому документу, начать загрузку
ресурса документ«.
Более конкретно
это может выглядеть, к примеру, вот так:
<META
HTTP-EQUIV=»Refresh» CONTENT=»10;
URL=http://www.yi.com»>
Если пользователь
не предпримет никаких видимых действий
в течение 10 секунд после загрузки
документа, содержащего такую инструкцию,
автоматически будет загружен документ
http://www.yi.com.
Пример 8
В отличие от всех
примеров, которые мы рассматривали
ранее, пример 8 состоит из трех файлов.
Используя
META-инструкцию Refresh,
создадим небольшой слайд-фильм из трех
кадров (файлов 1.html,
1a.html
и 1b.html),
которые будут циклически повторяться.
Для остановки демонстрации нужно будет
воспользоваться любой из гипертекстовых
ссылок.
<
!—файл
1.html
—>
<HTML>
<HEAD>
<TITLE>Пример
8</TITLE>
<META
HTTP-EQUIV=»Refresh» CONTENT=»2; URL=1a.html»>
</HEAD>
<BODY
bgcolor=#FFFFFF text=#000000 link=#FF0000>
<H1>Слайд-демонстрация
цветовых гамм <BR> с помощью
META-инструкции Refresh </H1>
<P>Черный
текст на белом фоне </P>
<P>[<A
HREF=»index.html»>Возврат
</A>|
<A
HREF=»2.html»>Возврат
к
2</A>]</P>
</BODY>
</HTML><!—конец
файла
1.html —>
<!—файл
1a.html —>
<HTML>
<HEAD>
<TITLE>Пример
8a</TITLE>
<META
HTTP-EQUIV=»Refresh» CONTENT=»2; URL=1b.html»>
</HEAD>
<BODY
bgcolor=#000000 text=#FFFFFF link=#FF0000>
<H1>Слайд-демонстрация
цветовых гамм <BR> с помощью
META-инструкции Refresh </H1>
<P>Белый
текст на черном фоне </P>
<P>[<A
HREF=»index.html»>Возврат</A>|
<A
HREF=»2.html»>Возврат
к
2</A>]</P>
</BODY>
</HTML><!—конец
файла
1a.html —>
<!—файл
1b.html
—>
<HTML>
<HEAD>
<TITLE>Пример
8b</TITLE>
<META
HTTP-EQUIV=»Refresh» CONTENT=»2; URL=1.html»>
</HEAD>
<BODY
bgcolor=#C0C0C0 text=#0000FF link=#FF0000>
<H1>Слайд-демонстрация
цветовых гамм <BR> с помощью
META-инструкции Refresh </H1>
<P>Синий
текст на сером фоне </P>
<P>[<A
HREF=»index.html»>Возврат</A>|
<A
HREF=»2.html»>Возврат
к
2</A>]</P>
</BODY>
</HTML><!—конец
файла
1b.html —>
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
Поддержка браузерами
Описание
HTML тег <meta> является пустым элементом и располагается внутри элемента <head>. Он используется для предоставления дополнительной информации (метаданных) о HTML-документе, используемой браузерами и поисковыми системами.
Обычно на одной странице располагается по несколько элементов <meta>, но с различными атрибутами, которые используются например для определения описания страницы, ключевых слов, указания автора документа, последнего изменения, указания кодировки HTML-документа и т.д.
Примечание: содержимое элементов <meta> не отображается на веб-странице.
Атрибуты
- charset:
- Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.
Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.
- content:
- Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
- http-equiv:
- Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.
Возможные значения атрибута:
- default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
- refresh: указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «;url=адрес_страницы»:
<!-- обновление страницы через 10 секунд --> <meta http-equiv="refresh" content="10"> <!-- Перенаправление на другую страницу через 10 секунд --> <meta http-equiv="refresh" content="10;url=httр://www.puzzleweb.ru">
- name:
- Определяет название метаданных. Данный атрибут используется совместно с атрибутом content.
Примечание: атрибут name не должен использоваться в элементе, если в нём уже установлен атрибут http-equiv или charset.
Возможные значения атрибута:
- application-name: указывает название веб-приложения, используемого на странице.
- author: указывает имя автора документа.
- description: определяет краткое описание к содержимому страницы.
Примечание: стоит уделить особое внимание к описанию страницы с помощью атрибута description, так как многие посетители будут сталкиваются с этой информацией во фрагменте ссылки на ваш сайт в результатах поиска.
- generator: указывает один из пакетов программного обеспечения, используемого для создания документа.
- keywords: содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы.
- robots: определяет поведение поисковых роботов на странице.
Значения атрибута content для <meta name=»robots»>:
Значение Описание Поисковик index разрешает роботу индексировать страницу все noindex запрещает роботу индексировать страницу все follow позволяет роботу переходить по ссылкам на странице все nofollow запрещает роботу переходить по ссылкам на странице все noodp запрещает использование общего описания сайта из каталога DMOZ, если таковое имеется, к описанию данной страницы на странице результата поиска google, yahoo, bing noarchive предотвращает кэширование страницы поисковой системой google, yahoo nosnippet предотвращает отображение любого описания страницы на странице результатов поиска google nocache синоним значения noarchive bing - viewport: позволяет определить размер и/или масштаб области просмотра веб-страницы в мобильных браузерах. Параметры для области просмотра указываются в атрибуте content через запятую:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
Значения атрибута content для <meta name=»viewport»>:
Значение Пример значения Допустимые значения Описание width width=device-width
width=320положительное целое число от 1 до 10000 или device-width Определяет ширину в пикселях. Специальное значение device-width указывает, что ширина области просмотра будет равна ширине экрана устройства. height height=device-height
height=640положительное целое число от 1 до 10000 или device-height Определяет высоту в пикселях. Специальное значение device-height указывает, что высота области просмотра будет равна высоте экрана устройства. initial-scale initial-scale=2.0 положительное число от 0.0 до 10.0 Задает масштаб страницы при ее первоначальном просмотре. maximum-scale maximum-scale=2.5 положительное число от 0.0 до 10.0 Задает предел увеличения веб-страницы. minimum-scale minimum-scale=0.5 положительное число от 0.0 до 10.0 Задает предел уменьшения веб-страницы. user-scalable user-scalable=no булево значение (yes или no) При использовании значения no, пользователь не сможет масштабировать веб-страницу. Значение по умолчанию — yes.
Тег <meta> так же поддерживает Глобальные атрибуты
Стиль по умолчанию
Нет.
Пример
<head> <meta charset="UTF-8"> <meta name="description" content="Портал для Web разработчиков"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Автор Я"> </head> <body> Содержимое страницы </body>
Результат данного примера в окне браузера:
Атрибут charset тега <meta>
Со служебным тегом <meta>
(от англ. metadata – метаданные)
мы уже кратко знакомились. Он формирует пустой элемент разметки «meta», который используется для хранения метаданных.
Для сообщения браузеру кодировки документа применяется атрибут charset.
О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен.
Поэтому в процессе верстки нужно всегда использовать элемент «meta» и указывать в нем атрибут
charset=»utf-8″. В случае необходимости, разрешается использовать более одного элемента
«meta», но атрибут charset должен задаваться только один раз в одном из элементов
«meta».
Атрибуты name и content тега <meta>
Имеются у элемента «meta» и другие атрибуты. Так
атрибут name задает имя (регистронезависимое) для пары
«имя=значение». Используется совместно с
атрибутом content, который, соответственно, устанавливает значение для данной
пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку
с запятой. Короче, при помощи этих двух атрибутов задается пара «имя=значение», которая определяется в следующем
формате: <meta name=»имя» content=»значение»>.
Перечислим некоторые из имен, задаваемых атрибутом name, и соответствующих им значений, указываемых в атрибуте
content:
- «author» – в атрибуте content указывается имя автора;
-
«copyright» – если страница разрабатывалась организацией, то авторство обычно не указывается,
а используется название организации; -
«description» – когда атрибут name имеет такое значение, в атрибуте
content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а
также выводе ими аннотации при выдаче по запросу; -
«document-state» – для этого имени атрибут content
может принимать два значения: «static» и «dynamic»; в первом случае поисковым
машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых
машин требуется постоянная индексация веб-страницы; -
«robots» – для этого имени используется ряд значений атрибута content:
- «index» – роботам разрешается индексировать данную страницу;
-
«noindex» – роботам запрещается индексировать данную страницу; при этом она не попадает
в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему; - «follow» – роботам разрешается переходить по ссылкам на данной странице;
-
«nofollow» – роботам запрещается переходить по ссылкам на данной странице; кроме того,
ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank
(определяет «важность» страницы); - «noarchive» – роботам запрещается кешировать данную страницу;
-
«revisit» – используется для управления частотой индексации веб-страницы в поисковой системе;
например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует
указать «21»; -
url – для этого имени атрибут content принимает в качестве
значения адрес, по которому робот поисковой системы перенаправляется для индексации на другую страницу (текущая страница при этом не
индексируется); это нужно для отмены индексации «зеркала» и генерируемых страниц.
Код с использованием элементов «meta» и его атрибутов показан в примере №1.
<!DOCTYPE html> <html> <head> <!-- Сообщаем браузеру кодировку документа --> <meta charset="utf-8"> <!-- Указываем автора страницы --> <meta name="author" content="Romanovsky Peter"> <!-- Описываем страницу --> <meta name="description" content="Атрибуты тега meta"> <!-- Разрешаем индексировать страницу постоянно --> <meta name="document-state" content="dynamic"> <!-- Разрешаем переиндексировать раз в 2 недели --> <meta name="revisit" content="14"> <!-- Разрешаем роботам посещать и ходить по ссылкам страницы --> <meta name="robots" content="index, follow"> <!-- Просим робота поисковой машины индексировать другую страницу. --> <meta name="url" content="https://site.name/html/teg_meta.html"> <title>Пример №1</title> </head> <body> ... Тут расположена выводимая информация. ... </body> </html>
Пример №1. Использование элемента «meta» и его атрибутов
Значение viewport атрибута name
Отдельно хотелось бы обратить внимание на значение «viewport» атрибута
name, которое указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее
масштаб, а также соответствующий ряд значений атрибута content (см. пример №2):
-
«width» – значение задает ширину области просмотра и через знак равно в качестве значений принимает:
-
device-width — ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для
большинства случаев); -
аппаратно-независимые пиксели — задается фиксированная ширина области просмотра в
аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 200px —
10 000px (фиксированную ширину применять не рекомендуется!);
-
device-width — ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для
-
«height» – значение задает высоту области просмотра (используется редко) и через знак равно в
качестве значений принимает:-
device-height — высота области просмотра будет подстраиваться под высоту экрана
(значение подходит для большинства случаев); -
аппаратно-независимые пиксели — задается фиксированная высота области просмотра в
аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 223px —
10 000px (фиксированную высоту применять не рекомендуется!);
-
device-height — высота области просмотра будет подстраиваться под высоту экрана
-
«initial-scale» – устанавливает соответствие для пикселей CSS
(это те пиксели, которые мы задаем в таблицах стилей) и аппаратно-независимых пикселей мобильного устройства (это виртуальные пиксели,
которые являются результатом масштабирования аппаратных (физических) пикселей устройства, их величина примерно одинакова для всех устройств);
проще говоря, свойство устанавливает стартовую величину масштабирования страницы; в качестве значения через знак равно принимаются числа от
0.1 до 10 (чем больше число, тем больше масштаб, т.е. увеличение страницы),
например, «initial-scale=2» можно рассматривать, как увеличение масштаба страницы в два раза; -
«user-scalable» – разрешает либо запрещает пользователю изменять масштаб страницы; в качестве значения
через знак равно принимает yes либо no (масштабирование в ряде случаев
целесообразно запрещать, например, для мобильных приложений).
Отметим, что нами не были перечислены значения minimum-scale и maximum-scale
атрибута content, т.к. их использование нежелательно.
<!DOCTYPE html> <html> <head> <!-- Сообщаем браузеру кодировку документа --> <meta charset="utf-8"> <!-- 1. Ширина области просмотра подстраивается --> <!-- под ширину экрана мобильного устройства автоматически --> <!-- 2. Пользователю разрешается масштабировать страницу (user-scalable=yes) --> <!-- Данный вариант в большинстве случаев наиболее оптимальный --> <meta name="viewport" content="width=device-width, user-scalable=yes"> <title>Элемент «meta» и его атрибуты</title> </head> <body> Тут расположена выводимая информация. </body> </html>
Пример №2 Использование name=»viewport» тега <meta>
Как видно из примера, значения атрибута content обычно перечисляются через запятую, а не записываются в
отдельных элементах «meta».
В большинстве случаев для сайтов, которые специально не делались для мобильных устройств, следует применять конструкцию
<meta name=»viewport» content=»width=device-width, user-scalable=yes»>.
В результате браузеры мобильных устройств самостоятельно выберут нужный масштаб и постараются вместить страницу в размеры окна браузера.
Атрибуты http-equiv и content тега <meta>
Атрибут content используется в паре не только с атрибутом name, но и
с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок
HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером
и состоят из пар имя: значение (разделяются двоеточием). Сам атрибут http-equiv
задает имя пары, аналогично атрибуту name, а атрибут content, соответственно,
значение пары: <meta http-equiv=»имя http-заголовка» content=»значение»>. Однако в одном элементе
«meta» допускается использовать только один из атрибутов: или name или
http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с
помощью атрибута content, в формат заголовка HTTP-ответа и обрабатывают их так,
как будто они прибыли непосредственно от сервера. Атрибут может принимать значения:
-
default-style – указывает предпочтительный для данной страницы стиль; при этом
атрибут content должен содержать
id элемента
<link>, ссылающегося на требуемую внешнюю таблицу стилей, или элемента
<style>, содержащего требуемую внутреннюю таблицу стилей; -
refresh – задает время в секундах до перезагрузки страницы (например,
<meta http-equiv=»refresh» content=»15″>) или перенаправления на другую
страницу, если атрибут content содержит целочисленное положительное число (время в секундах), после
которого идет строка с корректным url-адресом (например,
<meta http-equiv=»refresh» content=»15; url=httрs://site.com»>).
Еще раз кратко о служебной информации
Из всего сказанного выше первым делом нужно запомнить, что при верстке страниц важно указывать кодировку, задавать параметр
«viewport», ссылки на внешние таблицы стилей (это понадобится нам уже при изучениии
CSS) и заголовок документа. Еще раз напомним структуру кода перечисленных элементов:
- <meta charset=»utf-8″>,
- <meta name=»viewport» content=»width=device-width, user-scalable=yes»>,
- <link rel=»stylesheet» href=»путь к таблице стилей»>,
- <title>Текст заголовка документа</title>.
Быстрый переход к другим страницам
In this article, you’ll learn what meta tags are in HTML and how to use them. Then we’ll go over some of the most important meta tags that you need to include in every new HTML project.
Let’s get started!
How to set up an HTML project
When setting up new HTML projects, you’ll find that you have to include the same few tags every single time.
These tags are essential, and you’ll need them to get your HTML site up and running properly, following best practices.
Some code editors offer shortcuts to automatically fill out and enter the tags that you use in every new HTML project. This can save you considerable time.
In the Visual Studio Code editor, you can do this in the following way:
- Make sure you’ve created a file ending in
.html— here you’ll write all of your HTML code. - Inside the empty file type an exclamation mark,
!.
- Click on the exclamation mark with the mention that the following is an Emmet Abbreviation.
Emmet is a plugin for code editors that’s built into Visual Studio Code by default, and it helps you optimise your HTML workflow.
You’ll then see the following code filled out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
When viewing the .html file in the browser of your choice, you’ll see just an empty page.
Le’ts zoom in to the following section of the code that was created:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
What are these meta tags exactly? Why are they there and what purpose do they serve when creating a webpage?
This article will focus on explaining the basics of meta tags and why they are used in HTML documents.
meta tags live within the head tag of the HTML document.
The head tag is used for configurating the HTML file.
You use the head tag to add a title to the webpage, link to a CSS stylesheet, and define more information about the HTML document.
meta tags represent metadata. They are essentially used for defining and describing data about data, and are used to add extra information to the data inside the webpage.
There are many meta tags. Some of them help improve the SEO (Search Engine Optimisation) of your website, making sure that the content of your site is relevant to what people are searching for.
How to define the character set of a website
<meta charset="UTF-8"> defines the character set that will be used in the site.
UTF-8, which stands for 8-bit Unicode Transformation Format, is the standard character encoding used with the latest version of HTML, which is HTML5.
This line should be included in every single webpage created, as it ensures that every character from every language in the world is displayed properly in every browser.
By using the universal UTF-8 as the character set, characters from non-latin languages will not be distorted.
The Google Chrome browser has automatically set the encoding to UTF-8, so you won’t have to worry about that when designing for this browser. But you still need to include <meta charset="UTF-8"> in every HTML file in case this feature is not supported by other browsers.
For example, look at what happens in the Safari browser when this line is not added and I write a heading in a non-latin language, such as Greek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Γεία σου κόσμε!</h1> <!-- Hello world! -->
</body>
</html>
When the HTML document is viewed in the browser, all the characters are distorted.
How to let Microsoft’s Internet Explorer know which rendering view to use
You use the http-equiv="X-UA-Compatible" content="IE=edge" meta tag to choose and define the version of Internet Explorer in which the web page will be renedered.
Always choose the latest one, which is IE=edge.
There are many versions of Microsoft’s browser. In the past the different advances caused headaches to web designers and web developers alike, who worked on making sure websites were usable on legacy browsers.
This tag will ensure that the website will not be rendered as an older version of Internet Explorer, which tend to be buggy.
How to adjust viewport settings
Nowadays, it is important that all sites look good on all devices, especially mobile phones.
So, you need to include the meta name="viewport" content="width=device-width, initial-scale=1.0" tag in every HTML file.
viewport refers to how the site is displayed on different screen sizes, and how much visual area a user has available.
Each device has a different viewport. For example, mobile devices have a smaller one and desktop computers have a larger one.
content="width=device-width is the first step to making sure that websites look good on mobile devices.
It prevents a site that is viewed from a mobile device from looking like it would on a laptop – that is small and far away zoomed out.
This ensures that the HTML will adjust to the width of the device’s screen.
initial-scale=1.0 sets how the webpage scales,and sets the initial zoom when the page is first loaded by the browser.
How to add a description of your webpage
Using a meta description tag for your page helps search engines figure out and rank your website against other websites. It’s used primaraly for SEO (Search Engine Optimization) purposes.
The meta description tag is used to explain in a brief and concise way what your website is about.
A meta description tag could look something like this:
<meta name="description" content="Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public.">
You use the name and content attributes, with the text value passed to content showing up in the search results:
Things to consider when writing a description of your website
- Make sure to keep the description of your website short and not over 160 characters.
- Include useful keywords and key-phrases that people tend to use often when searching for the services that your website provides.
- Explain clearly what your website does and the mission behind it. It is important to get across what sets you apart and the value you provide.
- Be consistent with the voice and tone of your brand.
- Most importantly, stick to describing the content your website actually provides. Don’t try and trick your readers by only aiming to appear high in searches and rankings.
How to add the name of the website’s author
Another useful meta element to include is the author’s name.
This could look like the following:
<meta name="author" content="Quincy Larson">
It can be helpful to know who authored the page.
This info shares who created and built the website, who authored the content, or to whom the copyright belongs.
Conclusion
To summarise, all HTML documents need to include at least the following three meta tags:
<meta charset="UTF-8">, to specify the character set.<meta name="description>", to add a clear description of the site and the services the site provides to readers/customers.<meta name="viewport>, which is the first step sites need to take to be usable on a variety of screen devices.
To learn more about HTML and CSS, check out the Responsive Web Design Certification by freeCodeCamp, where you’ll learn in an interactive way while building fun projects along the way.
Thanks for reading and happy coding!
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started