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:

<head>
<meta>
</head>

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

Спецификация xhtml:

<head>
<meta />
</head>

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

Атрибуты

name — задается имя тега, указывающего для чего он предназначен

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

Примеры

Пример 1.

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>

<!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. Их значение гораздо выше мета-тегов, которые мы рассматривали в статье по мета-тегам для страницы, поэтому с данным материалом необходимо ознакомиться каждому.

Сначала давайте разберём то, как вставляются мета-теги для браузера. Как и другие типы мета-тегов, они вставляются внутри тега <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«. Если Вы укажите адрес текущей страницы, то у Вас будет просто происходить обновление через заданный промежуток времени, что бывает очень даже полезно и удобно.

Создано 22.03.2011 13:27:03
Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]