Содержание

Метатеги | htmlbook.ru

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

Метатеги для поисковых механизмов

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

  • не включайте ключевые слова, которые не содержатся на ваших страницах;
  • не повторяйте ключевые слова;
  • используйте метатеги по их прямому назначению;
  • делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.

description

Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.

Пример 1. Использование Description

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>description</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <meta name="description" content="Сайт об HTML и создании сайтов"> 
 </head> 
 <body> 
  <p>...</p>
 </body>
</html>

keywords

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

Пример 2. Использование Keywords

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>keywords</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система"> 
 </head>
 <body> 
  <p>...</p>
 </body>
</html>

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv=»refresh» (пример 3).

Пример 3. Автозагрузка страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Автозагрузка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru"> 
 </head>
 <body> 
  <p>...</p>
 </body>
</html>

Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.

Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Кодировка

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv=»Content-Type» content=»text/html; charset=имя кодировки»>. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Кодировка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body> 
  <p>Кириллица</p>
 </body>
</html>

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251, переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

META Description — мета-описание страницы сайта в поиске

META-тег Description и описание страницы сайтаMETA-тег Description и описание страницы сайта

Meta description — это мета-описание страницы сайта. Meta-тег description, в отличие от meta keywords, является действующим и достаточно эффективным способом влияния на представление сайта в результатах поиска. Содержимое meta name description content используется при формировании сниппета для описания сайта в поиске.

Сниппет и описание сайта meta description

Все просто. Если на странице заполнен meta тег description, то мета-описание страницы может быть отражено в результатах поиска в качестве описания под ссылкой на сайт. То есть, кроме заголовка страницы title, который используется для формирования названия ссылки на сайт, у нас есть еще одна возможность напрямую повлиять на то, как выглядит сайт в результатах поиска, а значит улучшить факторы ранжирования сайта.

Вот так description выглядит в Яндексе:

Тег meta description ЯндексТег meta description Яндекс

Описание сайта в результатах поиска в Яндексе (сниппет Яндекса)

А вот так description выглядит в Google:

Тег meta description GoogleТег meta description Google

Сниппет описания в результатах поиска в Google (сниппет Google)

Качественный, правильный description может оказать прямое влияние на CTR, что в свою очередь, может отразиться на релевантности страницы сайта. То есть, влияние meta description на позиции сайта в поиске непрямое. Правильный description приглашает людей из поиска перейти на страницу сайта. Поэтому, составление описания сайта в мета-теге description является одним из основных пунктов грамотной SEO оптимизации сайта. Несмотря на то, что обилие ключевых слов здесь не играет непосредственной роли на пути к успеху.

Синтаксис html meta description

Мета-тег description размещается в html сайта внутри тега <head>.

Пример:

<html>
 <head>
  <meta name="description" content="Описание страницы сайта." />
 </head>
</html>

Пример meta description:

<meta name="description" content="Агентство интернет-маркетинга и интернет-рекламы ConvertMonster: создание Landing Page, настройка контекстной рекламы, SEO-анализ, эффективный email-маркетинг." />

Что писать в meta description

О том, как правильно заполнять meta description достаточно подробно пишет как Яндекс, так и Google. Если обобщить доступную информацию, можно вывести несколько правил, которых желательно придерживаться при заполнении мета дескрипшн своего сайта:

Как правильно заполнять meta description:

  1. Точность мета-описания. Description должен соответствовать конкретной веб-странице, а не всему сайту. Он должен отражать текущее, актуальное состояние страницы.
  2. Уникальные описания. Старайтесь создавать различные описания для каждой конкретной страницы и не использовать шаблоны для description. Или, по крайней мере, заполнять description оригинальным описанием на важных, ключевых страницах сайта.
  3. Минимальная длина мета description. Мета-описание не должно быть слишком коротким, из нескольких слов.
  4. Максимальная длина meta description. Размер meta description не должен превышать 100-140 символов. На вопрос нет однозначного ответа. Существуют различные точки зрения о верхней границе длины мета тега description: средние 160 символов или от 120 до 250 знаков. Большинство людей плохо воспринимают текстовую информацию длиной более 120-140 символов (вспомним тот же Twitter).
  5. Форма meta name description. Мета-описание может быть написано как в форме одного (с точкой или без точки на конце) или нескольких предложений, так и в форме перечисления важных параметров, ценных для пользователя.
  6. Содержимое тега meta description.
    Мета-описание должно соответствовать языку страницы сайта, быть кратким, емким, но при этом содержательным. Необходимо коротко и ясно выразить суть содержимого страницы. Размещайте наиболее важную часть описания ближе к началу текста.
  7. Человекопонятный мета дескрипшен. Мета-описание должно быть простым, понятным без чрезмерного употребления ключевых слов/фраз, заглавных букв, рекламных слоганов, лишних символов (для «украшения») и восклицательных знаков.

Яндекс и meta description

Принцип использования тега мета description у поисковых систем схожий. Яндекс использует meta description наравне с фрагментами текста страницы для формирования сниппета. Яндекс дает ответы на некоторые вопросы в инструкции по использованию мета-описания. Почитать можно тут — использование мета-описаний Яндекс

Google и meta description

А вот как

Гугл использует meta description:

Цитата:

В Google используется множество методов выбора текстовых описаний. Самым простым способом контроля содержания описаний является использование мета-тега "description" (англ. описание) для каждой страницы.

Google не стал разоряться на русскоязычную версию статьи про использование мета-описания, однако, вот ссылка на перевод статьи о том, как улучшить описание сайта в результатах поиска при помощи мета-тега description — использование мета-описаний Google

Что в итоге:

Содержимое meta description может быть использовано для формирования части описания сайта в сниппете в результатах поиска Яндекс, Google или другой поисковой системы. Description должен содержать краткое, емкое и актуальное описание страницы в виде предложений или перечисления важных параметров. Длина мета description не должна быть короче трех-четырех слов и не длиннее 140-160 символов. Не стоит превращать дескрипшн в перечисление ключевых слов.

Главная польза для SEO сайта от meta description — возможность задать привлекательное описание страницы сайта в результатах поиска. Правильный мета description может позитивно отразиться на поведенческих факторах сайта через повышение кликабельности сниппета сайта в поиске. Влияет ли meta description на релевантность сайта напрямую? Делитесь аргументами в комментариях.

Пишите интересные, читаемые и информативные комментарии.
Делитесь статьей в социальных сетях.
Подписывайтесь на SEO блог и получайте новые посты.

Получайте бесплатные уроки и фишки по интернет-маркетингу

описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги


Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами <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>
<!DOCTYPE html>
<html>
 <head>
  <meta name="keywords" content="HTML,CSS,JavaScript">
 <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>
<!DOCTYPE html>
<html>
 <head>
  <meta name="robots" content="index, nofollow">
  <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>
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="30">
  <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>
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>





Тег HTML — мета теги страницы description, keywords, viewport

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

Часто используются meta-теги: author, description, keywords, viewport, charset.

Мета теги находятся в области <head> HTML документа (подробнее про <head>). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description, viewport, charset. Это будет плюсом для внутренней оптимизации сайта.

Синтаксис

<meta атрибут="значение" атрибут="значение">

Примеры использования <meta> в HTML коде

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Мета теги в HTML документе. Описание популярных мета тегов, примеры использования на веб странице">
<meta name="author" content="Ivan Ivanov">
</head>
</html>

Основные мета теги

Ниже приведены несколько основных тегов <meta> с комментариями по применению и примерами использования.

Meta-тег description

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

Текст из meta description в сниппете выдачи

Пример использования мета тега description
<meta name="description" content="Краткое описание страницы">

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.

Пример заполнения мета тега keywords
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

Пример использования мета тега viewport

Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:

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

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset
<meta charset="UTF-8">

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh
<meta http-equiv="refresh" content="45"> <!-- Обновление страницы каждые 45 секунд -->

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
charset

character_set

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

content

тестовое значение

Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.

http-equiv

content-type
default-style
refresh

Устанавливает HTTP заголовок для атрибута content.

Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).
Default-style — Предпочтительная таблица стилей.
Refresh — Интервал автообновления страницы.

name

application-name
author
description
generator
keywords
viewport

Имя мета тега. Как и http-equiv определяет суть мета тега.

Application-name — имя веб приложения, которое представляет страница.
Author — имя автора веб страницы.
Description — краткое описание страницы.
Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).
Keywords — ключевые слова страницы.
Viewport — некоторые параметры области просмотра страницы.

Использование тега description на сайте

Серёжа Сыроежкин

Серёжа СыроежкинКопирайтер

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

Примерно так должен выглядеть сниппет вашего сайта в поисковой выдаче:

Если мета тег description будет заполнен неправильно, или его вовсе не будет, то поисковая система формирует описание сайта из «кусков» текста на странице:

Согласитесь, такой текст мало сообщает об информации, которую получит пользователь на сайте. Поэтому использовать тег description нужно. Реализация тега description HTML выглядит следующим образом:

<meta name="description" content="Здесь нужно написать несколько слов о вашем сайте/странице. Укажите информацию, которую получит пользователь, сообщите о преимуществах вашей компании.">

Помимо отображения информации о странице, тег description используется поисковыми системами при ранжировании страниц в поисковой выдаче. Поэтому стоит указать здесь основное ключевое слово, по которому вы хотите выйти в ТОП (но рекомендуется указывать немного «перефразированный» ключ, т.е. немного в другой форме/падеже или просто другими словами). Но нужно не забывать и о поисковом спаме. Не стоит переусердстовать с ключевыми словами, иначе поисковая система просто «выкинет» ваш сайт из выдачи. Так или иначе, этот вопрос выходит за рамки данной статьи, и потому мы не будем останавливаться на нем подробно.

В конструкторе сайтов «Нубекс» есть возможность редактировать тег description для каждой страницы.

Смотрите также:

HTML meta: keywords, description | Указание кодировки

Теги <meta> используются для предоставления информации (метаданных) о веб-странице, метаданные не отображаются на веб-странице, а дают либо какие-то указания браузеру, либо предоставляют дополнительную информацию для поисковых систем:


<head>
  <meta charset="utf-8">
  <title>Не является мета тегом, но должен присутствовать на каждой веб-странице</title>
  <meta name="keywords" content="ключевые слова">
  <meta name="description" content="Краткое описание">
</head>

В нашем примере мы использовали три элемента <meta>: первый указывает браузеру кодировку HTML-документа, два других мета тега предназначены для предоставления информации о содержимом веб-страницы для поисковых систем. Далее мы рассмотрим каждый из них подробнее.

Примечание: теги <meta> должны располагаться в элементе <head>.

Кодировка

Кодировка говорит браузеру, какой набор символов используется на данной веб-странице. Например, страницы могут быть написаны с использованием кодировок для русского, английского, арабского, китайского и множества других семейств символов.

Для указания кодировки используется тег <meta> с атрибутом charset, который рекомендуется располагать в качестве первого элемента внутри <head>:


<head>
  <meta charset="utf-8">
</head>

Примечание: UTF-8 является универсальной кодировкой, поддерживающей большинство языков и спецсимволов.

keywords (ключевые слова)

У любого сайта есть набор ключевых слов и словосочетаний, по которым поисковые системы ищут нужные ресурсы в сети. Именно эти слова и должны составлять содержимое keywords.

Самый простой способ подобрать нужные ключевые слова для текущей страницы — это определить по каким словам вы сами стали бы искать материал, представленный на ней? Вот это и будут нужные ключевые слова. Пример:


<meta name="keywords" content="мета тег, meta, метаданные, keywords, description">

Ключевые слова указываются через запятую или пробел и могут быть написаны в любом регистре. Рекомендуется указывать не более 10-15 ключевых слов или словосочетаний.

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

description (краткое описание)

Значение description используется для краткого описания содержимого, расположенного на текущей странице. Рекомендуемая максимальная длина такого описания не должна превышать 180 символов:


<meta name="description" content="Описание содержимого на данной странице">

Краткое описание страницы может быть использовано поисковыми система на странице с результатами поиска под названием страницы и URL-адреса:

отображение description в результатах поиска

Также краткое описание используется на сайтах некоторых соцсетей, при добавлении ссылки:

отображение description при добавление ссылки в соц сетях

При составлении краткого описания следует учитывать следующие моменты:

  • в описании нужно указывать именно ту информацию, которая отражает содержимое, опубликованное на данной странице;
  • описание должно быть уникальным и не должно повторяться для разных страниц;
  • старайтесь в описание страницы также включать необходимые ключевые слова, которые будут учитываться в поисковых запросах.

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

Тег <title>

Тег <title> является частью метаданных и используется для указания заголовка страницы. Заголовок страницы можно сравнить с названием главы книги, так как он должен говорить пользователям и поисковым системам об информации представленной на странице.

Заголовок должен содержать важные ключевые слова для того, чтобы поисковые системы могли включить вашу страницу в результаты поиска по определенным запросам. Также он может помочь пользователям решить, стоит ли посетить ваш сайт или нет, так как они будут видеть заголовок в качестве текста ссылки в результатах поиска:

тег title

Тег <title> является одним из наиболее важных тегов на странице. Рассмотрим небольшой список рекомендаций, которых нужно придерживаться для написания оптимизированного заголовка для поисковых систем:

  • Длина заголовка не должна превышать 70 символов, включая пробелы.
  • Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее — наименее.
  • Для разделения ключевых слов или фраз лучше использовать вертикальную черту «|». Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
  • Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
  • Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
  • Не дублируйте текст тега <title>, заголовок должен быть уникальным для каждой страницы сайта.
  • Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:

<title>Тема страницы|Ключевые слова|Название компании или сайта</title>
<!-- или так -->
<title>Ключевые слова|О нас|Название компании или сайта</title>

Мета тег DESCRIPTION — Основы html для начинающих

     В ранее опубликованной статье «Теги HTML. Тег <meta>» мы познакомили Вас с тегом <meta> и структурой его построения -> ТЕГ -> АТРИБУТ -> ЗНАЧЕНИЕ. Как уже отмечалось такая структура является основой для всех тег кода HTML. Сегодня тема нашей статьи  метатег DESCRIPTION, который исполняет функции значения атрибута name тега meta. Если написать полную фразу тега meta то она будет выглядеть так:
     
    <meta name=»description» content=»…»>
 
    В кавычках стоит знак многоточия, туда будем вставлять текст. А в остальном должно быть все понятно: тег meta -> атрибут name -> значение description. Все очень просто. В предыдущей статье «Теги HTML. Тег <meta>» говорилось, что тег meta служит для связи странички сайта с поисковыми системами и броузерами, а также хранения и передачи информации им предназначеной. Так вот — тег DESCRIPTION создано для  краткого описания темы сайта или отдельной страницы и дальнейшей передачи описания с помощью тега meta поисковым системам. Вставим, вместо многоточия, краткое описание сайта в наш код, для примера такое, «Приусадебный участок и его уход»:
 
        <meta name=»description» content=»Приусадебный участок и его уход»>

    Теперь открываем наш файл  index.html в  Блокноте  или скачиваем его здесь и вставляем  вышеприведенную фразу в код файла.  Это будет выглядеть так, Screen 1.    Проверяем страничку в

                                                         


                                                          Screen 1. Вставляем meta  description.

броузере. Все работает. Фразы «Приусадебный участок и его уход», которую мы вставили в код не видно на экране, потому что мета тег description имеет свойства  информационного тега. Оно предназначено для поисковых систем и не влияет на вид странички, Screen 2.
 
                                                          
                                                       Screen 2. Description name только информационный тег.

Некоторые рекомендации по  применению meta description:

  1. тег description всегда расположен только в теге meta, который в свою очередь  находится в блоке <head> </head>;
  2. Вставляемое описание должно быть коротким, длина этого тега не может  превышать 150 — 200 знаков;
  3. Поисковые системы придают ему особое значение, поэтому в описание надо стараться вставить ключевые слова и фразы;
  4. Описание странички должно быть уникальным, не похожим на description других страничек сайта;
  5. Текст тега не должен повторять заголовок titl;


В прочем можно description не вписывать совсем в код. Ничего не изменится. Однако ухудшится положение ресурса в ТОПе поисковиков. Все  дело в том, что meta description положительно влияет на оптимизацию сайта. С помощью его Яндекс и Google быстрее находят запрашиваемые странички сайтов.  Поэтому лучшим вариантом будет, если description постоянно будет находится в коде html.
 

90000 HTML meta tag 90001 90002 90003 Example 90004 90005 Describe metadata within an HTML document: 90006 90005 90002 90002 90002 90002 90002 90002 90006 Try it Yourself » 90005 More «Try it Yourself» examples below. 90006 90017 90018 Definition and Usage 90019 90005 The 90021 90022 tag defines metadata about an HTML document. Metadata is data (information) about data. 90006 90005 90021 90022 tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.90006 90005 Metadata will not be displayed on the page, but is machine parsable. 90006 90005 Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. 90006 90005 There is a method to let web designers take control over the viewport (The user’s visible area of ​​a web page), through the 90021 90022 tag (See «Setting The Viewport «example below). 90006 90017 90018 Browser Support 90019 90039 90040 90041 Element 90042 90043 90044 90045 90046 90047 90048 90040 90050 90051 90050 Yes 90051 90050 Yes 90051 90050 Yes 90051 90050 Yes 90051 90050 Yes 90051 90048 90063 90017 90018 Attributes 90019 90039 90040 90041 Attribute 90042 90041 Value 90042 90041 Description 90042 90048 90040 90050 charset 90051 90050 90080 character_set 90081 90051 90050 Specifies the character encoding for the HTML document 90051 90048 90040 90050 content 90051 90050 90080 text 90081 90051 90050 Specifies the value associated with the http-equiv or name attribute 90051 90048 90040 90050 http-equiv 90051 90050 content-security-policy 90002 content-type 90002 default-style 90002 refresh 90051 90050 Provides an HTTP header for the information / value of the content attribute 90051 90048 90040 90050 name 90051 90050 application-name 90002 author 90002 description 90002 generator 90080 90002 90081 keywords 90002 viewport 90051 90050 Specifies a name for the metadata 90051 90048 90063 90017 90018 Global Attributes 90019 90005 The 90021 90022 tag also supports the Global Attributes in HTML.90006 90017 90017 90018 More Examples 90019 90005 90135 Define keywords for search engines: 90136 90006 90005 90006 90005 90135 Define a description of your web page: 90136 90006 90005 90006 90005 90135 Define the author of a page: 90136 90006 90005 90006 90005 90135 Refresh document every 30 seconds: 90136 90006 90005 90006 90005 90135 Setting the viewport to make your website look good on all devices: 90136 90006 90005 90006 90017 90018 Setting the Viewport 90019 90005 The viewport is the user’s visible area of ​​a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen. 90006 90005 You should include the following 90021 90022 element in all your web pages: 90006 90005 90006 90005 This gives the browser instructions on how to control the page’s dimensions and scaling.90006 90005 The 90021 width = device-width 90022 part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). 90006 90005 The 90021 initial-scale = 1.0 90022 part sets the initial zoom level when the page is first loaded by the browser. 90006 90005 Here is an example of a web page 90186 without 90187 the viewport meta tag, and the same web page 90186 with 90187 the viewport meta tag: 90006 90005 90192 Tip: 90193 If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.90006 90005 You can read more about the viewport in our Responsive Web Design — The Viewport Tutorial. 90006 90017 90018 Related Pages 90019 90005 HTML tutorial: HTML Head 90006 90005 HTML DOM reference: Meta Object 90006 90017 90018 Default CSS Settings 90019 90005 None. 90006 90002 .90000 What’s in the head? Metadata in HTML — Learn web development 90001 90002 The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page 90003 90004, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.) In this article we’ll cover all of the above and more, in order to give you a good basis for working with markup.90005 90006 90007 90008 90009 Prerequisites: 90010 90011 Basic HTML familiarity, as covered in Getting started with HTML. 90012 90013 90008 90009 Objective: 90010 90011 To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document. 90012 90013 90020 90021 90022 What is the HTML head? 90023 90002 Let’s revisit the simple HTML document we covered in the previous article: 90005 90026 <! DOCTYPE html><Html><Head><Meta charset = "utf-8"><Title> My test page </ title> </ Head><Body><P> This is my page </ p> </ Body> </ Html> 90027 90002 The HTML head is the contents of the 90003<head> 90004 element — unlike the contents of the 90003<body> 90004 element (which are displayed on the page when loaded in a browser), the head’s content is not displayed on the page .Instead, the head’s job is to contain metadata about the document. In the above example, the head is quite small: 90005 90026<head><Meta charset = "utf-8"><Title> My test page </ title> </ Head> 90027 90002 In larger pages however, the head can get quite full. Try going to some of your favorite websites and use the developer tools to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you’ll want to include in the head, and give you some familiarity.Let’s get started. 90005 90022 Adding a title 90023 90002 We’ve already seen the 90003<title> 90004 element in action — this can be used to add a title to the document. This however can get confused with the 90003<h2> 90004 element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things! 90005 90046 90047 The 90003<h2> 90004 element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) 90050 90047 The 90003<title> 90004 element is metadata that represents the title of the overall HTML document (not the document’s content.) 90050 90055 90056 Active learning: Inspecting a simple example 90057 90058 90047 To start off this active learning, we’d like you to go to our GitHub repo and download a copy of our title-example.html page. To do this, either 90058 90047 Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.90050 90047 Press the «Raw» button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser’s 90064 File> Save Page As … 90065 menu and choose a sensible place to save the file. 90050 90067 90050 90047 Now open the file in your browser. You should see something like this: 90002 It should now be completely obvious where the 90003<h2> 90004 content appears, and where the 90003<title> 90004 content appears! 90005 90050 90047 You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser.Have some fun with it. 90050 90067 90002 The 90003<title> 90004 element contents are also used in other ways. For example, if you try bookmarking the page (90064 Bookmarks> Bookmark This Page 90065 or the star icon in the URL bar in Firefox), you will see the 90003<title> 90004 contents filled in as the suggested bookmark name. 90005 90002 90005 90002 The 90003<title> 90004 contents are also used in search results, as you’ll see below. 90005 90002 Metadata is data that describes data, and HTML has an «official» way of adding metadata to a document — the 90003<meta> 90004 element.Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of 90003<meta> 90004 elements that can be included in your page’s<head>, but we will not try to explain them all at this stage, as it would just get too confusing. Instead, we’ll explain a few things that you might commonly see, just to give you an idea. 90005 90056 Specifying your document’s character encoding 90057 90002 In the example we saw above, this line was included: 90005 90026<meta charset = "utf-8"> 90027 90002 This element simply specifies the document’s character encoding — the character set that the document is permitted to use.90003 utf-8 90004 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it’s therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine: 90005 90002 If you set your character encoding to 90003 ISO-8859-1 90004, for example (the character set for the Latin alphabet), your page rendering may appear all messed up: 90005 90002 90005 90002 90117 Note 90118: Some browsers (e.g. Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. You should still set an encoding of 90003 utf-8 90004 on your page anyway, to avoid any potential problems in other browsers. 90005 90056 Active learning: Experiment with character encoding 90057 90002 To try this out, revisit the simple HTML template you obtained in the previous section on 90003<title> 90004 (the title-example.html page), try changing the meta charset value to 90003 ISO-8859-1 90004, and add the Japanese to your page.This is the code we used: 90005 90026<p> Japanese example: ご 飯 が 熱 い. </ P> 90027 90056 Adding an author and description 90057 90002 Many 90003<meta> 90004 elements include 90003 name 90004 and 90003 content 90004 attributes: 90005 90046 90047 90003 name 90004 specifies the type of meta element it is; what type of information it contains. 90050 90047 90003 content 90004 specifies the actual meta content. 90050 90055 90002 Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page.Let’s look at an example: 90005 90026<meta name = "author" content = "Chris Mills"><Meta name = "description" content = "The MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications. "> 90027 90002 Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.90005 90002 Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO.) 90005 90056 Active learning: The description’s use in search engines 90057 90002 The description is also used on search engine result pages. Let’s go through an exercise to explore this 90005 90058 90047 Go to the front page of The Mozilla Developer Network.90050 90047 View the page’s source (Right / 90168 Ctrl 90169 + click on the page, choose 90064 View Page Source 90065 from the context menu.) 90050 90047 Find the description meta tag. It will look something like this (although it may change over time): 90026<meta name = "description" content = "The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. "> 90027 90050 90047 Now search for «MDN Web Docs» in your favorite search engine (We used Google.) You’ll notice the description 90003<meta> 90004 and 90003<title> 90004 element content used in the search result — definitely worth having! 90002 90005 90050 90067 90002 90117 Note 90118: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in Google’s webmaster tools — a way to make your site’s search results better in the Google search engine. 90005 90002 90117 Note 90118: Many 90003<meta> 90004 features just are not used any more.For example, the keyword 90003<meta> 90004 element (90003<meta name = "keywords" content = "fill, in, your, keywords, here"> 90004) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results. 90005 90056 Other types of metadata 90057 90002 As you travel around the web, you’ll find other types of metadata, too.A lot of the features you’ll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use. 90005 90002 For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you’ll find this: 90005 90026<meta property = "og: image" content = "https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"><Meta property = "og: description" content = "The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps.It also documents Mozilla products, like Firefox OS. "><Meta property = "og: title" content = "Mozilla Developer Network"> 90027 90002 One effect of this is that when you link to MDN Web Docs on facebook, the link appears along with an image and description: a richer experience for users. 90005 90002 90005 90002 Twitter also has its own similar proprietary metadata called Twitter Cards, which has a similar effect when the site’s URL is displayed on twitter.com. For example: 90005 90026<meta name = "twitter: title" content = "Mozilla Developer Network"> 90027 90022 Adding custom icons to your site 90023 90002 To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.The most commonly used of these is the 90117 favicon 90118 (short for «favorites icon», referring to its use in the «favorites» or «bookmarks» lists in browsers). 90005 90002 The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel. 90005 90002 A favicon can be added to your page by: 90005 90058 90047 Saving it in the same directory as the site’s index page, saved in 90003.ico 90004 format (most browsers will support favicons in more common formats like 90003 .gif 90004 or 90003 .png 90004, but using the ICO format will ensure it works as far back as Internet Explorer 6.) 90050 90047 Adding the following line into your HTML’s 90003<head> 90004 block to reference it: 90026<link rel = "shortcut icon" href = "favicon.ico" type = "image / x-icon"> 90027 90050 90067 90002 Here is an example of a favicon in a bookmarks panel: 90005 90002 90005 90002 There are lots of other icon types to consider these days as well.For example, you’ll find this in the source code of the MDN Web Docs homepage: 90005 90026 <! - third-generation iPad with high-resolution Retina display: -><Link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <! - iPhone with high-resolution Retina display: -><Link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <! - first- and second-generation iPad: -><Link rel = "apple-touch-icon-precomposed" href = "https: // developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png "> <! - non-Retina iPhone, iPod Touch, and Android 2.1 + devices: -><Link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <! - basic favicon -><Link rel = "shortcut icon" href = "https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"> 90027 90002 The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad’s home screen.90005 90002 Do not worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you will not be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites ‘source code. 90005 90002 90117 Note: 90118 If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the 90003 Content-Security-Policy 90004 header’s 90003 img-src 90004 directive is not preventing access to it.90005 90022 Applying CSS and JavaScript to HTML 90023 90002 Just about all websites you’ll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the 90003<link> 90004 element and the 90003 <script>90004 element, respectively. 90005 90046 90047 90002 The 90003 <link> 90004 element should always go inside the head of your document.This takes two attributes, 90003 rel = "stylesheet" 90004, which indicates that it is the document's stylesheet, and 90003 href 90004, which contains the path to the stylesheet file: 90005 90026 <link rel = "stylesheet" href = "my-css-file.css"> 90027 90050 90047 90002 The 90003 <script> 90004 element should also go into the head, and should include a 90003 src 90004 attribute containing the path to the JavaScript you want to load, and 90003 defer 90004, which basically instructs the browser to load the JavaScript at the same time as the page's HTML.This is useful as it makes sure that the HTML is all loaded before the JavaScript runs, so that you do not get errors resulting from JavaScript trying to access an HTML element that does not exist on the page yet. There are actually a number of ways to handle loading JavaScript on your page, but this is the most foolproof one to use for modern browsers (for others, read Script loading strategies). 90005 90026 <script src = "my-js-file.js" defer> </ script> 90027 90002 90117 Note 90118: The 90003 <script> 90004 element may look like an empty element, but it's not, and so needs a closing tag.Instead of pointing to an external script file, you can also choose to put your script inside the 90003 <script> 90004 element. 90005 90050 90055 90056 Active learning: applying CSS and JavaScript to a page 90057 90058 90047 To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions. 90050 90047 Open the HTML file in both your browser, and your text editor.90050 90047 By following the information given above, add 90003 <link> 90004 and 90003 <script> 90004 elements to your HTML, so that your CSS and JavaScript are applied to your HTML. 90050 90067 90002 If done correctly, when you save your HTML and refresh your browser you should be able to see that things have changed: 90005 90002 90005 90046 90047 The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item.When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text. 90050 90047 The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.) 90050 90055 90002 90117 Note 90118: If you get stuck in this exercise and can not get the CSS / JS to apply, try checking out our css-and-js.html example page. 90005 90022 Setting the primary language of the document 90023 90002 Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.) 90005 90026 <html lang = "en-US"> 90027 90002 This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.) 90005 90002 You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so: 90005 90026 <p> Japanese example: <span lang = "ja"> ご 飯 が 熱 い. </ Span>. </ P> 90027 90002 These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML. 90005 90022 Summary 90023 90002 That marks the end of our quickfire tour of the HTML head - there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of ​​the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.90005 90022 In this module 90023 .90000 90001 HTML Element Reference - By Category 90002 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <! DOCTYPE> 90011 90010 Defines the document type 90011 90008 90003 90010 <html> 90011 90010 Defines an HTML document 90011 90008 90003 90010 <head> 90011 90010 Contains metadata / information for the document 90011 90008 90003 90010 <title> 90011 90010 Defines a title for the document 90011 90008 90003 90010 <body> 90011 90010 Defines the document's body 90011 90008 90003 90010 <h2> to <h6> 90011 90010 Defines HTML headings 90011 90008 90003 90010 <p> 90011 90010 Defines a paragraph 90011 90008 90003 90010 <br> 90011 90010 Inserts a single line break 90011 90008 90003 90010 <hr> 90011 90010 Defines a thematic change in the content 90011 90008 90003 90010 <! -...--> 90011 90010 Defines a comment 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <acronym> 90011 90010 Not supported in HTML5. Use <abbr> instead. 90079 Defines an acronym 90011 90008 90003 90010 <abbr> 90011 90010 Defines an abbreviation or an acronym 90011 90008 90003 90010 <address> 90011 90010 Defines contact information for the author / owner of a document / article 90011 90008 90003 90010 <b> 90011 90010 Defines bold text 90011 90008 90003 90010 <bdi> 90011 90010 Isolates a part of text that might be formatted in a different direction from other text outside it 90011 90008 90003 90010 <bdo> 90011 90010 Overrides the current text direction 90011 90008 90003 90010 <big> 90011 90010 Not supported in HTML5.Use CSS instead. 90079 Defines big text 90011 90008 90003 90010 <blockquote> 90011 90010 Defines a section that is quoted from another source 90011 90008 90003 90010 <center> 90011 90010 Not supported in HTML5. Use CSS instead. 90079 Defines centered text 90011 90008 90003 90010 <cite> 90011 90010 Defines the title of a work 90011 90008 90003 90010 <code> 90011 90010 Defines a piece of computer code 90011 90008 90003 90010 <del> 90011 90010 Defines text that has been deleted from a document 90011 90008 90003 90010 <dfn> 90011 90010 Specifies a term that is going to be defined within the content 90011 90008 90003 90010 <em> 90011 90010 Defines emphasized text 90011 90008 90003 90010 <font> 90011 90010 Not supported in HTML5.Use CSS instead. 90079 Defines font, color, and size for text 90011 90008 90003 90010 <i> 90011 90010 Defines a part of text in an alternate voice or mood 90011 90008 90003 90010 <ins> 90011 90010 Defines a text that has been inserted into a document 90011 90008 90003 90010 <kbd> 90011 90010 Defines keyboard input 90011 90008 90003 90010 <mark> 90011 90010 Defines marked / highlighted text 90011 90008 90003 90010 <meter> 90011 90010 Defines a scalar measurement within a known range (a gauge) 90011 90008 90003 90010 <pre> 90011 90010 Defines preformatted text 90011 90008 90003 90010 <progress> 90011 90010 Represents the progress of a task 90011 90008 90003 90010 <q> 90011 90010 Defines a short quotation 90011 90008 90003 90010 <rp> 90011 90010 Defines what to show in browsers that do not support ruby ​​annotations 90011 90008 90003 90010 <rt> 90011 90010 Defines an explanation / pronunciation of characters (for East Asian typography) 90011 90008 90003 90010 <ruby> 90011 90010 Defines a ruby ​​annotation (for East Asian typography) 90011 90008 90003 90010 <s> 90011 90010 Defines text that is no longer correct 90011 90008 90003 90010 <samp> 90011 90010 Defines sample output from a computer program 90011 90008 90003 90010 <small> 90011 90010 Defines smaller text 90011 90008 90003 90010 <strike> 90011 90010 Not supported in HTML5.Use <del> or <s> instead. 90079 Defines strikethrough text 90011 90008 90003 90010 <strong> 90011 90010 Defines important text 90011 90008 90003 90010 <sub> 90011 90010 Defines subscripted text 90011 90008 90003 90010 <sup> 90011 90010 Defines superscripted text 90011 90008 90003 90010 <template> 90011 90010 Defines a container for content that should be hidden when the page loads 90011 90008 90003 90010 <time> 90011 90010 Defines a specific time (or datetime) 90011 90008 90003 90010 <tt> 90011 90010 Not supported in HTML5.Use CSS instead. 90079 Defines teletype text 90011 90008 90003 90010 <u> 90011 90010 Defines some text that is unarticulated and styled differently from normal text 90011 90008 90003 90010 <var> 90011 90010 Defines a variable 90011 90008 90003 90010 <wbr> 90011 90010 Defines a possible line-break 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <form> 90011 90010 Defines an HTML form for user input 90011 90008 90003 90010 <input> 90011 90010 Defines an input control 90011 90008 90003 90010 <textarea> 90011 90010 Defines a multiline input control (text area) 90011 90008 90003 90010 <button> 90011 90010 Defines a clickable button 90011 90008 90003 90010 <select> 90011 90010 Defines a drop-down list 90011 90008 90003 90010 <optgroup> 90011 90010 Defines a group of related options in a drop-down list 90011 90008 90003 90010 <option> 90011 90010 Defines an option in a drop-down list 90011 90008 90003 90010 <label> 90011 90010 Defines a label for an <input> element 90011 90008 90003 90010 <fieldset> 90011 90010 Groups related elements in a form 90011 90008 90003 90010 <legend> 90011 90010 Defines a caption for a <fieldset> element 90011 90008 90003 90010 <datalist> 90011 90010 Specifies a list of pre-defined options for input controls 90011 90008 90003 90010 <output> 90011 90010 Defines the result of a calculation 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <img> 90011 90010 Defines an image 90011 90008 90003 90010 <map> 90011 90010 Defines a client-side image map 90011 90008 90003 90010 <area> 90011 90010 Defines an area inside an image map 90011 90008 90003 90010 <canvas> 90011 90010 Used to draw graphics, on the fly, via scripting (usually JavaScript) 90011 90008 90003 90010 <figcaption> 90011 90010 Defines a caption for a <figure> element 90011 90008 90003 90010 <figure> 90011 90010 Specifies self-contained content 90011 90008 90003 90010 <picture> 90011 90010 Defines a container for multiple image resources 90011 90008 90003 90010 <svg> 90011 90010 Defines a container for SVG graphics 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <ul> 90011 90010 Defines an unordered list 90011 90008 90003 90010 <ol> 90011 90010 Defines an ordered list 90011 90008 90003 90010 <li> 90011 90010 Defines a list item 90011 90008 90003 90010 <dir> 90011 90010 Not supported in HTML5.Use <ul> instead. 90079 Defines a directory list 90011 90008 90003 90010 <dl> 90011 90010 Defines a description list 90011 90008 90003 90010 <dt> 90011 90010 Defines a term / name in a description list 90011 90008 90003 90010 <dd> 90011 90010 Defines a description of a term / name in a description list 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <table> 90011 90010 Defines a table 90011 90008 90003 90010 <caption> 90011 90010 Defines a table caption 90011 90008 90003 90010 <th> 90011 90010 Defines a header cell in a table 90011 90008 90003 90010 <tr> 90011 90010 Defines a row in a table 90011 90008 90003 90010 <td> 90011 90010 Defines a cell in a table 90011 90008 90003 90010 <thead> 90011 90010 Groups the header content in a table 90011 90008 90003 90010 <tbody> 90011 90010 Groups the body content in a table 90011 90008 90003 90010 <tfoot> 90011 90010 Groups the footer content in a table 90011 90008 90003 90010 <col> 90011 90010 Specifies column properties for each column within a <colgroup> element 90011 90008 90003 90010 <colgroup> 90011 90010 Specifies a group of one or more columns in a table for formatting 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <style> 90011 90010 Defines style information for a document 90011 90008 90003 90010 <div> 90011 90010 Defines a section in a document 90011 90008 90003 90010 <span> 90011 90010 Defines a section in a document 90011 90008 90003 90010 <header> 90011 90010 Defines a header for a document or section 90011 90008 90003 90010 <footer> 90011 90010 Defines a footer for a document or section 90011 90008 90003 90010 <main> 90011 90010 Specifies the main content of a document 90011 90008 90003 90010 <section> 90011 90010 Defines a section in a document 90011 90008 90003 90010 <article> 90011 90010 Defines an article 90011 90008 90003 90010 <aside> 90011 90010 Defines content aside from the page content 90011 90008 90003 90010 <details> 90011 90010 Defines additional details that the user can view or hide 90011 90008 90003 90010 <dialog> 90011 90010 Defines a dialog box or window 90011 90008 90003 90010 <summary> 90011 90010 Defines a visible heading for a <details> element 90011 90008 90003 90010 <data> 90011 90010 Adds a machine-readable translation of a given content 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <head> 90011 90010 Defines information about the document 90011 90008 90003 90010 <meta> 90011 90010 Defines metadata about an HTML document 90011 90008 90003 90010 <base> 90011 90010 Specifies the base URL / target for all relative URLs in a document 90011 90008 90003 90010 <basefont> 90011 90010 Not supported in HTML5.Use CSS instead. 90079 Specifies a default color, size, and font for all text in a document 90011 90008 90003 90004 Tag 90005 90004 Description 90005 90008 90003 90010 <script> 90011 90010 Defines a client-side script 90011 90008 90003 90010 <noscript> 90011 90010 Defines an alternate content for users that do not support client-side scripts 90011 90008 90003 90010 <applet> 90011 90010 Not supported in HTML5.Use <embed> or <object> instead. 90079 Defines an embedded applet 90011 90008 90003 90010 <embed> 90011 90010 Defines a container for an external (non-HTML) application 90011 90008 90003 90010 <object> 90011 90010 Defines an embedded object 90011 90008 90003 90010 <param> 90011 90010 Defines a parameter for an object 90011 90008 90720.90000 HTML html tag 90001 90002 90003 Example 90004 90005 A simple HTML document: 90006 90002 90002 90002 Title of the document 90002 90002 90005 <h2> This is a heading </ h2> 90002 <p> This is a paragraph. </ P> 90006 90005 </ body> 90002 </ Html> 90006 Try it Yourself » 90018 90019 Definition and Usage 90020 90005 The 90022 <html> 90023 tag represents the root of an HTML document.90006 90005 The 90022 <html> 90023 tag is the container for all other HTML elements (except for the <! DOCTYPE> tag). 90006 90005 90030 Note: 90031 You should always include the lang attribute inside the 90022 <html> 90023 tag, to declare the language of the Web page. This is meant to assist search engines and browsers. 90006 90018 90019 Browser Support 90020 90038 90039 90040 Element 90041 90042 90043 90044 90045 90046 90047 90039 90049 <html> 90050 90049 Yes 90050 90049 Yes 90050 90049 Yes 90050 90049 Yes 90050 90049 Yes 90050 90047 90062 90018 90018 90019 Attributes 90020 90038 90039 90040 Attribute 90041 90040 Value 90041 90040 Description 90041 90047 90039 90049 xmlns 90050 90049 http: // www.w3.org/1999/xhtml 90050 90049 Specifies the XML namespace attribute (If you need your content to conform to XHTML) 90050 90047 90062 90018 90019 Global Attributes 90020 90005 The 90022 <html> 90023 tag also supports the Global Attributes in HTML. 90006 90018 90019 Related Pages 90020 90005 HTML tutorial: HTML Introduction 90006 90005 HTML DOM reference: HTML Object 90006 90018 90019 Default CSS Settings 90020 90005 Most browsers will display the 90022 <html> 90023 element with the following default values: 90006 html {90002 display: block; 90002} 90005 html: focus {90002 outline: none; 90002} 90006 .<div class='yarpp-related yarpp-related-none'> <h3></h3> </div> <div class="clear"></div> </div> <br class="clear" /> </div> <hr /> <div class="comments"> <div class="wpdiscuz_top_clearing"></div> <div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div> <h3 id="wc-comment-header"> Отправить ответ </h3> <div id="wpcomm" class="wpdiscuz_unauth wpd-default"> <div class="wpdiscuz-form-top-bar"> <div class="wpdiscuz-ftb-left"> <div id="wc_show_hide_loggedin_username"> </div> </div> <div class="wpd-clear"></div> </div> <div class="wc_social_plugin_wrapper"> </div> <div class="wc-form-wrapper wc-main-form-wrapper" id='wc-main-form-wrapper-0_0' > <div class="wpdiscuz-comment-message" style="display: block;"></div> <form class="wc_comm_form wc_main_comm_form" method="post" enctype="multipart/form-data"> <div class="wc-field-comment"> <div class="wpdiscuz-item wc-field-textarea" > <div class="wpdiscuz-textarea-wrap "> <div class="wc-field-avatararea"> <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo avatar-default' height='40' width='40' loading='lazy'/> </div> <textarea id="wc-textarea-0_0" placeholder="Начать обсуждение..." required name="wc_comment" class="wc_comment wpd-field"></textarea> </div> </div> <div class="clearfix"></div> </div> <div class="wc-form-footer" style="display: none;"> <div class="wpd-form-row"> <div class="wpd-form-col-left"> <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-user"></i></div> <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title=""> </div> <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-at"></i></div> <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*"> </div> <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-link"></i></div> <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website"> </div> </div> <div class="wpd-form-col-right"> <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper"> <div class="wc-captcha-input"> <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha" class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA"> </div> <div class="wc-label wc-captcha-label"> <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://narcosis-css.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f8169315a893" width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img alt="refresh" class="" src="https://narcosis-css.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a> <input type="hidden" id="c5f8169315a893" class="wpdiscuz-cnonce" name="cnonce" value="c5f8169315a893" /> </div> <div class="clearfix"></div> </div> <div class="wc-field-submit"> <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии"> <input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" /> <span class="wpd_label__text"> <span class="wpd_label__check"> <i class="fas fa-bell wpdicon wpdicon-on"></i> <i class="fas fa-bell-slash wpdicon wpdicon-off"></i> </span> </span> </label> <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий"> </div> </div> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> <input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id"> </form> </div> <div id = "wpdiscuz_hidden_secondary_form" style = "display: none;"> <div class="wc-form-wrapper wc-secondary-form-wrapper" id='wc-secondary-form-wrapper-wpdiscuzuniqueid' style='display: none;' > <div class="wpdiscuz-comment-message" style="display: block;"></div> <div class="wc-secondary-forms-social-content"></div><div class="clearfix"></div> <form class="wc_comm_form wc-secondary-form-wrapper" method="post" enctype="multipart/form-data"> <div class="wc-field-comment"> <div class="wpdiscuz-item wc-field-textarea" > <div class="wpdiscuz-textarea-wrap "> <div class="wc-field-avatararea"> <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=48&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=96&d=mm&r=g 2x' class='avatar avatar-48 photo avatar-default' height='48' width='48' loading='lazy'/> </div> <textarea id="wc-textarea-wpdiscuzuniqueid" placeholder="Присоединиться к обсуждению..." required name="wc_comment" class="wc_comment wpd-field"></textarea> </div> </div> <div class="clearfix"></div> </div> <div class="wc-form-footer" style="display: none;"> <div class="wpd-form-row"> <div class="wpd-form-col-left"> <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-user"></i></div> <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title=""> </div> <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-at"></i></div> <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*"> </div> <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon"> <div class="wpd-field-icon"><i class="fas fa-link"></i></div> <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website"> </div> </div> <div class="wpd-form-col-right"> <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper"> <div class="wc-captcha-input"> <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha" class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA"> </div> <div class="wc-label wc-captcha-label"> <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://narcosis-css.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f8169315ad40" width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img alt="refresh" class="" src="https://narcosis-css.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a> <input type="hidden" id="c5f8169315ad40" class="wpdiscuz-cnonce" name="cnonce" value="c5f8169315ad40" /> </div> <div class="clearfix"></div> </div> <div class="wc-field-submit"> <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии"> <input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" /> <span class="wpd_label__text"> <span class="wpd_label__check"> <i class="fas fa-bell wpdicon wpdicon-on"></i> <i class="fas fa-bell-slash wpdicon wpdicon-off"></i> </span> </span> </label> <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий"> </div> </div> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> <input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id"> </form> </div> </div> <div class="wpdiscuz-front-actions"> <div class="wpdiscuz-sbs-wrap"> <span><i class="far fa-envelope" aria-hidden="true"></i>  Подписаться  <i class="fas fa-caret-down" aria-hidden="true"></i></span> </div> <div class="clearfix"></div> </div> <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden"> <form action="https://narcosis-css.ru/wp-admin/admin-ajax.php?action=addSubscription" method="post" id="wpdiscuz-subscribe-form"> <div class="wpdiscuz-subscribe-form-intro">Уведомление о </div> <div class="wpdiscuz-subscribe-form-option" style="width:40%;"> <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" > <option value="post">новые последующие комментарии</option> <option value="all_comment" >новые ответы на мои комментарии</option> </select> </div> <div class="wpdiscuz-item wpdiscuz-subscribe-form-email"> <input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/> </div> <div class="wpdiscuz-subscribe-form-button"> <input id="wpdiscuz_subscription_button" type="submit" value="›" name="wpdiscuz_subscription_button" /> </div> <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="5988e6e549" /><input type="hidden" name="_wp_http_referer" value="/raznoe-2/html-teg-description-metategi-htmlbook-ru.html" /> <input type="hidden" value="3969" name="wpdiscuzSubscriptionPostId" /> </form> <div class="wpdiscuz_clear"></div> </div> <div id="wcThreadWrapper" class="wc-thread-wrapper"> <div class="wpdiscuz-comment-pagination"> </div> </div> <div class="wpdiscuz_clear"></div> </div> </div> <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div> </div> </div> <div id="sidebar-container"> <ul id="sidebar"> <li id="search-6" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://narcosis-css.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form></li> <li id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});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></div></li></ul></div></div><div id="sub-footer"><div class="container"><div class="sub-footer-left"><p> © 2020, *Narcosis* by STORM.</p></div><div class="sub-footer-right"> <a href="/sitemap.xml">Карта сайта</a></div></div></div></div><style type="text/css">.pgntn-page-pagination{text-align:left!important}.pgntn-page-pagination-block{width:60%!important;padding:0 0 0 0}.pgntn-page-pagination a{color:#1e14ca!important;background-color:#ffffff!important;text-decoration:none!important;border:1px solid #cccccc!important}.pgntn-page-pagination a:hover{color:#000!important}.pgntn-page-pagination-intro,.pgntn-page-pagination .current{background-color:#efefef!important;color:#000!important;border:1px solid #cccccc!important}.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none!important}.single-gallery .pagination.gllrpr_pagination{display:block!important}</style><a id='wpdUserContentInfoAnchor' style='display:none;' rel='#wpdUserContentInfo' data-wpd-lity>wpDiscuz</a><div id='wpdUserContentInfo' style='overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;' class='lity-hide'></div><link rel='stylesheet' id='pgntn_stylesheet-css' href='https://narcosis-css.ru/wp-content/plugins/pagination/css/nav-style.css' type='text/css' media='all' /> <script type='text/javascript' src='https://narcosis-css.ru/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1' id='jquery-form-js' defer></script> <script type='text/javascript' src='https://narcosis-css.ru/wp-includes/js/comment-reply.min.js' id='comment-reply-js' defer></script> <script type='text/javascript' src='https://narcosis-css.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js' defer></script> <script type='text/javascript' src='https://narcosis-css.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js' defer></script> <script type='text/javascript' src='https://narcosis-css.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js' defer></script> <script type='text/javascript' src='https://narcosis-css.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js' defer></script> <script type='text/javascript' id='ez-toc-js-js-extra'>/* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */</script> <script type='text/javascript' src='https://narcosis-css.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js' defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){return} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){return} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://narcosis-css.ru/wp-content/plugins/wp-rocket/assets/js/lazyload/12.0/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> </body></html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->