Meta в html – Тег meta, кодировка страницы — Структура HTML-документа — HTML Academy

HTML тег meta

Метаинформация — это данные (информация) о данных.

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

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

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

Теги <meta> должны всегда находиться внутри тега <head>.

Метаданные определяются в виде пары имя-значение.

Если задается атрибут name или http-equiv, то должен быть задан атрибут content. В обратном случае атрибут content не используется.

Разница между HTML 4.01 и HTML5

Атрибут scheme не поддерживается в HTML5.

В HTML5 был добавлен атрибут charset, который облегчил определение кодировки символов страницы:

  • HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5: <meta charset="UTF-8">

Различия между HTML и XHTML

В HTML элемент <meta> - одиночный элемент без закрывающего тега. В XHTML тег <meta> должен закрываться должным образом, а именно — <meta />.

Атрибуты тега <meta>

Атрибут Описание
charset Определяет кодировку символов HTML документа
content Определяет содержание мета информации
http-equiv Определяет HTTP заголовок для пары данные/значение атрибута content
name
Определяет имя для пары данные/значение атрибута content
schema Определяет схему интерпретации значения в атрибуте content

Общие атрибуты

Тег <meta> поддерживает общие атрибуты.

HTML пример

Определяем метаинформацию о HTML документе:


<head>
   <meta charset="UTF-8">
   <meta name="description" content="Бесплатный учебник по веб технологиям">
   <meta name="keywords" content="HTML,CSS,XML,JavaScript">
   <meta name="author" content="msiter">
</head>

Тег - Справочник html

Общая информация

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

Все метатеги размещаются внутри контейнера <head>, до или после тега <title>.

Синтаксис

Спецификация html:
  1. <head>  
  2.  <meta>  
  3. </head>  
<head> <meta> </head>

Закрывающий тег  в спецификации html – отсутствует.

Спецификация xhtml:
  1. <head>  
  2.  <meta />  
  3. </head>  
<head> <meta> </head>

Закрывающий тег  в спецификации xhtml – согласно правилу закрытия одиночного тега.

Атрибуты

  • name - задается имя тега, указывающего для чего он предназначен
  • content - задается само значение мета-тега, с связке со значением имени тега (name)
  • charset - указывается кодировка страницы
  • http-equiv - эквивалент гипертекстовым заголовкам, с помощью данного атрибута формируется заголовок страницы и определяется как он будет обработан

Примеры

Пример 1.
html:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <title>Тег META</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="keywords" content="Ключевые слова">  
  7.   <meta name="description" Content="Описание страницы">  
  8.   <meta name="author" Content="John">  
  9.  </head>  
  10.  <body>  
  11.     Содержимое страницы  
  12.  </body>  
  13. </html>  
<!DOCTYPE HTML> <html> <head> <title>Тег META</title> <meta charset="utf-8"> <meta name="keywords" content="Ключевые слова"> <meta name="description" Content="Описание страницы"> <meta name="author" Content="John"> </head> <body> Содержимое страницы </body> </html>

Мета-теги в HTML | мета-тег description

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание форм в HTML. В данной статье я бы хотел поговорить о мета-тегах в HTML. По сути, мета-теги несут в себе специальную служебную информацию и делятся на несколько типов: для поисковых систем, для страницы, для браузера. Сразу скажу, что все мета-теги вставляются в заголовок документа, т.е. между тегами <head> и </head>.

Давайте постепенно начнем разбираться с мета-тегами для поисковых систем.

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

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

Выпишем все мета-теги для поисковых систем:


<meta name="description" content="Мета-теги в HTML - в данной статье вы можете прочитать обо всех мета-тегах в HTML"/>
<meta name="keywords" content="Мета-теги HTML, мета-теги для поисковых систем, мета-теги для браузера, мета-теги для страницы"/>
<meta name="robots" content="noindex,nofollow"/>

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

У данного мета-тега существуют 4 значения:

index, follow — страницу нужно индексировать и переходить по ссылкам на ней.
index, nofollow — страницу нужно индексировать и не нужно переходить по ссылкам на ней
noindex, follow — страницу не нужно индексировать, но нужно переходить по ссылкам на ней

noindex, nofollow — страницу не нужно индексировать, также не нужно переходить по ссылкам на ней.
Обычно вся информация о том, что нужно индексировать, а что нет, содержится в файле robots.txt, который должен быть абсолютно на любом сайте, но о данном файле поговорим в одной из следующих статей.

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


<meta name = "author" content = "Aleksey Gulynin" />
<meta name = "generator" content = "Wordpress" />
<meta name = "reply-to" content = "[email protected]" />
<meta name = "site-created" content = "25.05.2014" />

Кратенько напишу о каждом из этих мета-тегов, хотя здесь и так всё прозрачно.
Мета-тег author указывает на автора данной страницы. Очень редко где встречал, разве что новички обычно вставляют его на свой сайт.
Мета-тег generator указывает на то, в чем была сделана данная страница. Обычно данный тег присутствует у всех систем управления контентом (CMS), таких как Joomla, WordPress. И обычно люди убирают данный мета-тег, чтобы скрыть, что их сайт сделан на данной CMS (однако, если взглянуть на код страницы, то итак становится понятно,на чем она сделана).

Мета-тег reply-to указывает на e-mail автора.
Мета-тег site-created указывает на то, когда был создан сайт.
Включать или нет мета-теги для страниц своего сайта — решать вам, но смысла особо большого в этом я не вижу.

Осталась ещё одна группу мета-тегов — это мета-теги для браузера. Это также очень важная группа мета-тегов. Сразу примеры:


<meta http-equiv = "Content-type" content = "text/html; charset = utf-8" />
<meta http-equiv = "Content-language" content = "ru" />
<meta http-equiv = "Refresh" content = "10; url = https://alekseygulynin.ru" />

Мета-тег Content-type является, на мой взгляд, самым важным мета-тегом, так как в нём указывается тип страницы и кодировка. Если не указывать данный мета-тег, то в будущем могут возникнуть проблемы с кодировкой на сайте. О том, как решить данную проблему, вы можете прочитать в этой статье.
Мета-тег Content-language указывает язык страницы. Обычно браузеры сами распознают язык на странице.

Мета-тег Refresh отвечает за обновление страницы. В данном случае написано, что каждые 10 секунд будет происходить обновление страницы и переход на мой сайт. Автообновление страницы бывает нужным, например для страницы, содержащий заказы интернет-магазина.

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

В данной статье вы узнали что такое мета-теги в HTML и рассмотрели наиболее важные из них.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Следующая статья >

Мета-теги для браузера в HTML

Вы здесь: Главная - HTML - HTML Основы - Мета-теги для браузера в HTML

Мета-теги для браузера в HTML

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

Сначала давайте разберём то, как вставляются мета-теги для браузера. Как и другие типы мета-тегов, они вставляются внутри тега <head> по следующему синтаксису:

<meta http-equiv = "name_meta" content = "content_meta" />

Процесс вставки мета-тегов для браузера в HTML такой же, как и для мета-тегов для страницы, однако, здесь вместо атрибута "name" используется атрибут "http-equiv". Теперь перечислю самые важные мета-теги для браузера:

  • Content-type - важнейший мета-тег, который содержит тип документа, а также его кодировку. Всегда пишите данный мета-тег!
  • Content-language - мета-тег, содержащий язык данной страницы.
  • refresh - мета-тег, позволяющий запускать либо автоматическое обновление, либо редирект на другую страницу (сайт) через заданный промежуток времени.

Чтобы стало понятно, как использовать эти мета-теги для браузера в HTML, приведу пример:

<head>
  <meta http-equiv = "Content-type" content = "text/html; charset = windows-1251" />
  <meta http-equiv = "Content-language" content = "ru" />
  <meta http-equiv = "refresh" content = "10; url = http://mysite.ru" />
</head>

Я ещё раз напоминаю о важности мета-тега "Content-type". Это одна из причин того, почему так много сайтов имеют неправильную кодировку. Я часто читаю в книгах, слышу, что говорят люди о том, что якобы браузер сам правильно определяет кодировку. Это не так! В большинстве случаев, так оно и есть, но он не всегда это делает правильно, поэтому необходимо указывать мета-тег "Content-type" на каждой странице сайта.

Что касается мета-тега "refresh", то здесь всё просто: число (в примере - 10) означает, через какое количество секунд перейти по адресу, указанному в параметре "url". Если Вы укажите адрес текущей страницы, то у Вас будет просто происходить обновление через заданный промежуток времени, что бывает очень даже полезно и удобно.

  • Мета-теги для браузера в HTML
    Создано 22.03.2011 13:27:03
  • Мета-теги для браузера в HTML Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Отправить ответ

avatar
  Подписаться  
Уведомление о