Title html head: Тег | htmlbook.ru
Содержание
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной
системе Windows текст заголовка отображается в левом верхнем углу окна браузера
(рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Рис. 1. Вид заголовка в браузере Firefox
Синтаксис
<head>
<title>Заголовок</title>
</head>Закрывающий тег
Обязателен.
Атрибуты
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>htmlbook.ru - Как правильно писать заголовок страницы</title>
</head>
<body>
<p>...</p>
</body>
</html>Примечание
Тег <title> выполняет множество
задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок
страницы.
- По тексту заголовка пользователь получает дополнительную информацию, что
это за сайт, на котором он находится и как называется текущая страница. Не
стоит думать, что достаточно в документе указать логотип сайта и проигнорировать
заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок
также отображается на кнопках панели задач, поэтому можно легко ориентироваться,
с каким сайтом в данный момент работать, а не перелистывать их по очереди. - Большинство браузеров поддерживают возможность сохранения веб-страницы
на локальный компьютер.
В этом случае имя сохраненного файла совпадает с названием
заголовка документа. Если в тексте заголовка содержатся символы недопустимые
в имени файла (\ / : * ? » < > |), они будут проигнорированы или
автоматически заменены другими дозволенными символами. - При сохранении в разделе браузера «Избранное», адрес текущей страницы с
ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список,
как правило, хранится в виде отдельных файлов, к их именам также прилагается
уже вышеописанное правило. - В результатах поиска по ключевым словам, поисковые системы используют заголовок
страницы для указания ссылки на данный документ. Интересно написанный заголовок,
содержащий ключевые слова, привлечет больше внимания посетителей и увеличит
шансы на то, что сайт посетит больше людей.
В этом случае имя сохраненного файла совпадает с названиемHead HTML уроки для начинающих академия
Элемент HTML <head>
Элемент <head> является контейнером для метаданных (данные о данных) и помещается между тегом <html> и тегом <body>.
Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Метаданные обычно определяют название документа, набор символов, стили, ссылки, сценарии и другую мета-информацию.
Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.
Элемент HTML <Title>
Элемент <title> определяет название документа и является обязательным для всех документов HTML/XHTML.
Элемент <title>:
- Определяет заголовок на вкладке «Обозреватель»
- предоставляет заголовок страницы при добавлении в избранное
- Отображает заголовок страницы в результатах поисковой системы
Простой HTML-документ:
Пример
<head>
<title>Page
Title</title>
</head>
<body>
The content of the document.
…..
</body>
</html>
Элемент HTML <Style>
Элемент <style> используется для определения сведений о стиле для одной страницы HTML:
Пример
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
Элемент HTML <Link>
Элемент <link> используется для связывания с внешними таблицами стилей:
Пример
<link rel=»stylesheet» href=»mystyle.css»>
Совет: Чтобы узнать все о CSS, посетите наш Учебник CSS.
Элемент HTML <meta>
Элемент <meta> используется для указания, какой набор символов используется, описание страницы, ключевые слова, автор и другие метаданные.
Метаданные используются браузерами (как отображать содержимое), поисковыми системами (ключевыми словами) и другими веб-службами.
Определите используемый набор символов:
Определите описание веб-страницы:
<meta name=»description» content=»Free Web tutorials»>
Определите ключевые слова для поисковых систем:
<meta name=»keywords» content=»HTML, CSS, XML, JavaScript»>
Определите автора страницы:
<meta name=»author» content=»html5css.
ru»>
Обновлять документ каждые 30 секунд:
<meta http-equiv=»refresh» content=»30″>
Пример <meta> тегов:
Пример
<meta charset=»UTF-8″>
<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»John
Doe»>
Настройка видового экрана
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах следует включить следующий элемент <meta> видового экрана:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Элемент видового экрана <meta> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с тегом видового экрана <meta>:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Элемент HTML <script>
Элемент <script> используется для определения JavaScript-кода на стороне клиента.
Этот JavaScript пишет «Hello JavaScript!» в HTML-элемент с ID = «Demo»:
Пример
<script>
function myFunction {
document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
}
</script>
Элемент HTML <base>
Элемент <base> указывает базовый URL-адрес и базовый целевой объект для всех относительных URL-адресов на странице:
Пример
<base href=»https://html5css.
ru/images/» target=»_blank»>
Пропуск <HTML>, <head> и <BODY>?
Согласно стандарту HTML5; <html>, <body> и тег <head> могут быть опущены.
Следующий код будет проверяться как HTML5:
Примере
Page Title
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
Примечание:
хтмл5ксс не рекомендует опускать теги <html> и <body> . Пропуск этих тегов может привести к сбою программного обеспечения DOM или XML и подавать ошибки в старых браузерах (IE9).
Однако Пропуск тега <head> был распространенной практикой уже довольно давно.
Элементы HTML-головки
| Тег | Description |
|---|---|
| <head> | Определяет сведения о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или целевой объект по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные HTML-документа |
| <script> | Определяет сценарий на стороне клиента |
| <style> | Определяет сведения о стиле для документа |
Метаданные HTML-документа
К метаданным относится содержимое, которое устанавливает представление или поведение остального содержимого, отношения документа с другими документами, или передает другую «внешнюю» информацию.
HTML-элементы, семантика которых связана с метаданными
1. Элемент <head>
Категории содержимого: нет.
Контекст, в котором этот элемент может быть использован: как первый элемент в элементе <html>.
Пропуск тегов: начальный тег <head> может быть пропущен, если элемент <head> пуст, или если сразу после него идет другой HTML-элемент. Закрывающий тег </head> может быть пропущен, если он не следует сразу за пробелом или за комментарием.
<!DOCTYPE html>
<html lang="ru">
<title>Тест</title>
<body>
<h2>Тестовая страница</h2>
</body>Для элемента доступны глобальные атрибуты.
Раздел <head>...</head> содержит набор технической информации (метаданных) о текущей веб-странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.
д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
Набор метаданных может быть как большим, так и маленьким:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Документ с небольшим head</title>
</head>
<body>
...<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Документ с большим head</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet alternate" href="big.css" title="Большой текст">
<script src="main.js"></script>
</head>
<body>
...2. Элемент <title>
Категории содержимого: метаданные.
Контекст, в котором этот элемент может быть использован: в элементе <head>, не содержащем других элементов <title>.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <title> представляет заголовок или название документа (веб-страницы). Авторы должны использовать заголовки, которые дают поисковой системе понять, что содержится на странице, даже если заголовки используются вне контекста, например, в истории, закладках пользователя или в результатах поиска. Заголовок документа может отличаться от заголовка первого уровня, поскольку <h2> не должен стоять отдельно, когда он вырван из контекста.
<title>Подробное руководство по Flexbox</title>
...
<h2>Что такое Flexbox</h2>
<p>...</p>Текст внутри <title> отображается браузером в заголовке окна. Также этот текст будет содержать ссылку на ваш сайт на странице результатов поиска. Длина заголовка должна быть не более 60 символов, чтобы поместиться полностью.
В одном документе должно быть не более одного элемента <title>. Элемент <title> является обязательным в большинстве ситуаций, но если протокол более высокого уровня предоставляет информацию о заголовке, например, в строке «Тема» электронного письма, когда HTML используется в качестве формата создания электронного письма, элемент <title> может быть опущен.
3. Элемент <base>
Категории содержимого: метаданные.
Контекст, в котором этот элемент может быть использован: в элементе <head>, не содержащем других элементов <base>.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты.
Элемент <base> с помощью атрибута href предоставляет базовый URL документа для парсинга всех относительных URL-адресов на странице, установленных атрибутами src и href.
Атрибут target задает тип окна просмотра по умолчанию при переходе по всем гиперссылкам.
В одном документе может быть только один элемент <base> и он должен иметь атрибут href, target или оба сразу.
Элемент <base> должен находиться перед любыми другими элементами в дереве, которые имеют атрибуты, определенные как принимающие URL, кроме элемента <html> (его атрибут manifest не подвержен влиянию элемента <base>).
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Пример для элемента base</title>
<base href="https://www.example.com/news/index.html">
</head>
<body>
<p>Посетите страницу <a href="archives.html">архивов</a>.</p>
</body>
</html>Ссылка в приведенном выше примере будет ссылкой на https://www.example.com/news/archives.html.
4. Элемент <link>
Категории содержимого: метаданные.
Если его использование разрешено в <body> — потоковое или текстовое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидаются метаданные. В элементе <noscript>, который является дочерним элементом элемента <head>. Если элемент разрешен в <body> — там, где ожидается текстовое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| href | Задает адрес гиперссылки. |
| crossorigin | Описывает, как элемент обрабатывает CORS-запросы, предназначен для использования со ссылками на внешние ресурсы. |
| rel | Задает тип указанной ссылки, может содержать как одно значение, так и набор разделенных пробелами ключевых слов: alternate, dns-prefetch, icon, next, pingback, preconnect, prefetch, preload, prerender, search, serviceworker.  |
| rev | Описывает обратное отношение текущего документа к связываемому документу, как определено атрибутом href. |
| media | Указывает, к какому типу медиа относится ресурс. Значение должно быть допустимым списком медиазапросов. |
| nonce | Используется в проверках политики безопасности контента, представляет криптографический одноразовый номер, который может использоваться политикой безопасности содержимого, чтобы определить, будет ли внешний ресурс, указанный в ссылке, загружаться и применяться к документу. |
| hreflang | Задает язык связанного ресурса. |
| type | Устанавливает подсказку для типа ссылочного ресурса. |
| referrerpolicy | Указывает URL источника запроса при переходе с одной страницы на другую. |
| sizes | Задает размеры иконок (для rel="icon") для визуальных медиа, значение носит рекомендательный характер. |
| title | Устанавливает заголовок ссылки, альтернативное имя таблицы стилей. |
Атрибут href элемента <link> позволяет связывать HTML-документ с различным видами ресурсов, например, таблицами стилей, скриптами, альтернативными формами документа и ссылками навигации (оглавление, предыдущие и последующие страницы, уведомления об авторских правах и т.п.).
Тип связанного ресурса задается значением обязательного атрибута rel.
С помощью элемента <link> можно создать две категории ссылок: ссылки на внешние ресурсы и гиперссылки. Например, следующий элемент ссылки создает две гиперссылки (на одну и ту же страницу):
<link rel="author license" href="/about">Семантика первой состоит в том, что целевая страница содержит информацию об авторе текущей страницы, семантика второй заключается в том, что целевая страница содержит информацию о лицензии, под которой предоставляется текущая страница.
Гиперссылки, созданные с помощью элемента <link> и его атрибута rel, применяются ко всему документу. Это отличается от атрибута rel элементов <a> и <area>, который указывает тип ссылки, контекст которой определяется местоположением ссылки в документе.
Если значения атрибута rel содержат только ключевые слова, разрешенные в <body>, элемент <link> можно использовать там, где ожидается фразовое содержание, то есть внутри <body>.
5. Элемент <meta>
Категории содержимого: метаданные.
Контекст, в котором этот элемент может быть использован: если для элемента указаны атрибуты charset и http-equiv, то в элементе <head>. Если значением атрибута не является content-type, то внутри элемента <noscript>, являющимся дочерним элементом <head>.
Если присутствует атрибут name — там, где ожидаются метаданные.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| charset | Определяет кодировку символов, используемую в документе. В документе должен быть один элемент <meta> с атрибутом charset. Необходимо использовать utf-8 или другую кодировку, совместимую с ASCII. |
| content | Задает значение метаданных документа или прагма директив. |
| http-equiv | Задает прагма директиву. |
| name | Устанавливает название/имя метаданных документа. |
Элемент <meta> представляет различные виды метаданных, которые не могут быть выражены с использованием элементов <title>, <base>, <link>, <style> и <script>.
Для элемента обязательно должен быть определен один из атрибутов — name, http-equiv или charset. Если указан атрибут name или http-equiv, также должен присутствовать атрибут content (или пропущен, если нет соответствующих значений).
Стандартные названия метаданных
Для атрибута name доступны следующие значения (чувствительны к регистру):
-
application-name — значение должно быть короткой строкой произвольной формы, содержащей название веб-приложения, которое представляет страница. Если страница не является веб-приложением, application-name не должно использоваться. В одном документе должно быть не более одного названия веб-приложения.
Браузеры могут использовать название веб-приложения в пользовательском интерфейсе вместо <title>, поскольку <title> может содержать сообщения о состоянии и тому подобное, относящиеся к состоянию страницы в определенный момент времени, а не просто как название приложения.
- author — значение должно быть строкой произвольной формы с указанием имени одного из авторов страницы.
- description — значение должно быть строкой произвольной формы, описывающей страницу. Значение должно быть подходящим для использования в каталоге страниц, например, в поисковой системе.
-
generator — значение должно быть строкой произвольной формы, которая идентифицирует один из пакетов программного обеспечения, использованных для создания документа. Это значение не должно использоваться на страницах, разметка которых не создается программным обеспечением, например на страницах, разметка которых была написана пользователем в текстовом редакторе.
<meta name="generator" content="WordPress 5.2"> -
keywords — значение должно быть набором разделенных запятыми ключевых слов, относящихся к странице. Многие поисковые системы не рассматривают такие ключевые слова, потому что эта функция исторически использовалась ненадежно и спамила результаты поиска.
<meta name="keywords" content="шрифт,шрифты,типографика"> -
referrer — необязательное поле заголовка HTTP, которое позволяет отслеживать перемещения пользователей между страницами в инструментах аналитики, а также понять происхождение входящего трафика. Реферер передаётся при переходе с http на любой тип сайта, при переходе с https на https, и не передаётся при переходе с https на http.
В наиболее распространенной ситуации это означает, что когда пользователь щелкает гиперссылку в браузере, на сервер отправляется запрос, содержащий целевую веб-страницу. Запрос может содержать поле referer, в котором указана последняя страница, на которой был пользователь (то есть та, на которой он щелкнул ссылку).
Значения атрибута content:
- no-referrer — не передает никакую информацию о реферере.
- no-referrer-when-downgrade — передает реферальные данные только сайтам на HTTPS. Поведение браузера по умолчанию, если не указано иное.
- unsafe-url — всегда передает полный URL реферера.
- origin-when-cross-origin — отправляет полный URL при переходе на страницы в рамках одного сайта, вне зависимости от протокола, а на все остальные — только базовый домен/поддомен.
<meta name="referrer" content="origin-when-cross-origin"> -
viewport — позволяет определять конкретные характеристики области просмотра, например, ширину макета и коэффициент масштабирования веб-страниц. Можно запретить или ограничить пользователям возможность масштабирования, используя такие значения, как content="user-scalable=no" или content="width=device-width, initial-scale=1.0, maximum-scale=1.0".
Могут быть конкретные случаи использования, в которых целесообразно предотвращение масштабирования пользователями, например, приложения-карты — когда пользовательские функции масштабирования обрабатываются с помощью сценариев, но в целом такой практики следует избегать.
Распознаваемые свойства атрибута content:
-
width — определяет ширину области просмотра, значением может быть определенное количество пикселей, например, width=768 или ключевое слово device-width (соответствует 100vw).
<meta name="viewport" content="width=device-width, initial-scale=1"> - height — определяет высоту области просмотра, значением может быть определенное количество пикселей, например, height=480 или ключевое слово device-height (соответствует 100vh)
- initial-scale — указывает браузеру соотношение пикселей CSS и устройства.
- minimum-scale — определяет наименьший допустимый коэффициент масштабирования.
- maximum-scale — определяет максимально допустимый коэффициент масштабирования.
- user-scalable — указывает, может ли коэффициент масштабирования быть изменен в результате взаимодействия с пользователем или нет.
-
Поведение браузера по умолчанию, если не указано иное.
Прагма директивы
Когда атрибут http-equiv указан в элементе <meta>, элемент <meta> является прагма директивой, которая предоставляет дополнительную информацию о документе:
-
content-type — является альтернативной формой установки атрибута charset.
<meta http-equiv="content-type" content="text/html; charset=utf-8"> -
default-style — задает имя альтернативной таблицы стилей, используемой по умолчанию.
<meta http-equiv="default-style" content="default"> -
refresh — устанавливает таймер для обновления и перенаправления. Например, главная страница новостного сайта может содержать следующую разметку в элементе <head>, чтобы обеспечить автоматическую перезагрузку страницы с сервера каждые пять минут:
<meta http-equiv="refresh" content="300">Последовательность страниц может использоваться в качестве автоматического слайд-шоу, если каждая страница обновляется до следующей страницы в последовательности с использованием следующей разметки:
<meta http-equiv="refresh" content="20; url=page4. html"> -
content-security-policy — позволяет настроить политику защиты содержимого, с помощью которой можно защищаться, например, от межсайтового скриптинга:
<meta http-equiv="content-security-policy" content="script-src 'self'">
html">6. Элемент <style>
Категории содержимого: метаданные.
Контекст, в котором этот элемент может быть использован: где ожидаются метаданные. Внутри элемента <noscript> который является дочерним элементом <head>. Внутри <body>, где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Указывает, к каким медиа применяются стили. Значение должно быть допустимым списком медиазапросов. Браузер должен применять стили, когда значение атрибута media соответствует среде и применяются другие соответствующие условия. Если атрибут media пропущен, по умолчанию он принимает значение all, то есть стили применяются ко всем видам медиа. |
| nonce | Представляет криптографический одноразовый номер, который может использоваться политикой безопасности содержимого, чтобы определить, будет ли стиль, указанный элементом, применяться к документу. |
| type | Устанавливает язык таблиц стилей, значение должно быть допустимым MIME-типом. Значением по умолчанию является text/css. |
| title | Задает альтернативное имя таблиц стилей. |
Элемент <style> позволяет авторам встраивать информацию о стилях в свои документы. Элемент не представляет какое-либо содержимое для пользователя.
Элемент <style> желательно использовать внутри раздела <head>.
<!DOCTYPE html>
<html>
<head>
<title>Моя любимая книга</title>
<style>
em {
font-style: normal;
color: red;
}
</style>
</head>
<body>
<p>Моя <em>любимая</em> книга - «Приключения Алисы в Стране чудес».</p>
</body>
</html>По материалам Document metadata
описание(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>
</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>
wm-school.ru">
<title>Автозагрузка новой страницы</title>
</head>
<body>
<p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
</body>
</html>Материал взят с разрешения админа здесь
HTML элемент title. Заголовок страницы.
Сейчас давайте рассмотрим очень важный элемент, который должен присутствовать на веб-странице – это элемент title.
title – это элемент страницы, который также относится к метаданным.
Начнем с того, что элемент <title> должен располагаться внутри элемента head. Основная его задача это задание заголовка для веб-страницы.
Где вы можете видеть заголовки веб-страниц?
Есть несколько случаев:
1) В имени закладки страницы в браузере.
2) В результатах поисковой выдачи от поисковых машин.
Т.е. заголовок веб-страницы – это ее имя.
Давайте прямо сейчас добавим заголовок для веб-страницы, в заготовку, которую мы создавали в прошлых уроках.
<!doctype html> <html> <head> <title>Пример заголовка страницы</title> </head> </html>
Для того, чтобы увидеть результат, давайте откроем полученную веб-страницу в браузере и убедимся, что все работает.
Пока страница еще пустая, но заголовок в ней уже изменился.
В спецификации сказано, что заголовок у документа должен быть даже тогда, когда у документа нет никакого содержимого.
Этот как раз наш текущий пример.
Кроме того, нужно иметь в виду, что в документе должен быть только один элемент title. Так писать не правильно:
<!doctype html> <html> <head> <title>Пример заголовка страницы</title><title>Пример заголовка страницы2</title></head> </html>
В разных браузерах могут возникнуть конфликты, и ничто не может гарантировать, что у Вас будет отображаться нужный заголовок в нужном месте.
Заголовок веб-страницы– это очень важный элемент, от которого могут зависеть позиции страницы в поисковых системах и удобство для пользователя. Поэтому стоит всегда уделять этому повышенное внимание.
Добавьте элемент title к вашей веб-странице прямо сейчас и проверьте результат в браузере.
Title компьютер title — создание сайта в блокноте.
Не привычный заголовок для статьи? Речь пойдёт не о компьютерах, речь в статье пойдёт об элементарном HTML-сайте. Рассмотрим то, как с помощью блокнота, встроенного в стандартный пакет программ для Windows, создать простой сайт.
Создание WEB-сайта «Компьютер»
Создадим элементарный сайт на HTML про компьютеры. Пусть это будет WEB-сайт про персональный компьютер, на котором мы хотим рассказать о том, что такое Персональный Компьютер (ПК), создадим соответствующие страницы: главную, страницу о программном обеспечении и о компьютерных терминах. Начнём создавать сайт с самого начала, для этого нажимаем на меню компьютера «Пуск» — «Все программы» — «Стандартные» — «Блокнот», запускаем блокнот и начинаем разбираться с программированием сайта.
Самое первое в создании сайта
Итак, мы хотим создать свой сайт с помощью блокнота. Для этого следует знать, что WEB-страница формируется с помощью специальных тегов. Теги должны быть заключены в угловые скобки, представляющие из себя знаки больше или меньше. Теги страницы могут быть парными или одиночными. Парные теги должны иметь открывающий и закрывающий тег — всё вместе это называется контейнер. Например, два тега
— это контейнер.
Закрывающий тег от открывающего отличается тем, что перед ним обязательно указывается прямой слэш, то есть знак «/». Все теги могут быть записаны как с помощью прописных, так и с помощью строчных букв.
Весь html-код страницы должен быть помещён внутри контейнера
Без указания этих тегов браузеры не смогут правильно интерпретировать содержимое страницы.
Далее что следует знать — web-страницы делятся на две логические части. Это заголовок и содержимое.
Заголовок страницы и TITLE
Есть такой контейнер
— это заголовок WEB-страницы.
Заголовок содержит в себе название документа и некоторую справочную информацию о данной странице. Это может быть информация об используемой кодировке, указание не файл стилей, об используемом программном обеспечении сайта и так далее. Пока что эта информация нам не особо полезна.
Также есть специальный контейнер
— между этим открывающим и закрывающим тегом указывается название веб-страницы. Данное название отображается в строке заголовка браузера. Допусти, указав
<ТIТLE>Компьютер</ТIТLЕ>
|
|
<ТIТLE>Компьютер</ТIТLЕ> |
мы увидим в заголовке в браузере название «Компьютер».
Итак, заголовок нашей страницы принимает такой вид:
<HEAD>
<ТIТLE>Компьютер</ТIТLЕ>
</HEAD>
|
|
<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD> |
Содержимое веб-страницы
— это контейнер, куда помещается всё основное содержимое страницы сайта.
Данный контейнер может содержать таблицы, бегущие строки, ссылки на звуковые, видео и графические файлы, текст и так далее.
Чтобы понимать принцип создания сайта с нуля в блокноте, поместит в основной контейнер текст:
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
|
|
<BODY> Компьютер — это электронное вычислительное устройство. </BODY> |
Основа WEB-страницы
Итак, со структурой мы разобрались. Открываем блокнот и вносим туда следующий текст:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
</HTML>
|
|
<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер — это электронное вычислительное устройство. </BODY> </HTML> |
Чтобы было удобнее — для размещения сайта создать также отдельную папку, куда можно будет складывать все файлы сайта. Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.
Чтобы увидеть созданную и сохранённую страницу сайта — открываем файл index.htm или index.html с помощью браузера. Создание других страниц и дальнейшую проработку сайта рассмотрим в следующих статьях.
Тег HTML заголовок страницы как правильно заполнять
Тег <title> определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег <title> с глобальным атрибутом title — это разные вещи.
Элемент находится в <head> области страницы (подробнее про раздел head).
-k-html-lang-en-head-2613032.png’ /> Можно использовать только один тег title на странице.
Синтаксис
<title>Заголовок HTML документа</title>Содержимое тега заголовка <title> используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования <title> в HTML коде
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<!-- контент страницы -->
</body>
</html>Поддержка браузерами
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег <title> нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег <title> поспособствует поднятию позиции страницы сайта при ранжировании.
Многие CMS поддерживают автогенерацию <title> заголовка. Обычно при этом используется заголовок страницы <h2> и название раздела сайта (например, для страницы товара интернет магазина: название товара из h2 и категория товара). Хотя эта схема не является идеальной, ее использование оправдано во многих случаях.
Вот пример тега title для этой страницы (один из вариантов):
<title>Тег title HTML заголовок страницы - справочник HTML тегов Guru Weba</title>HTML-элементов заголовка
Элемент HTML
является контейнером для следующих элементов:
<название> , <стиль> ,
, ,
Попробуй сам "
HTML-элемент
Элемент определяет базовый URL-адрес и / или цель для всех относительных URL-адресов на странице.
Тег должен иметь либо
href или целевой атрибут, или оба.
Может быть только один единственный
элемент в документе!
Пример
Укажите URL-адрес по умолчанию и цель по умолчанию для всех ссылок на странице:
asp"> базовый тег HTML Попробуй сам "
Краткое содержание главы
- Элемент
о данных) - Элемент
- Элемент
</code> является обязательным и<br /> определяет название документа </li> <li> Элемент <code><br /> <style> </code> используется для<br /> определить информацию о стиле для одного документа </li> <li> The <code> <ссылка> </code><br /> тег чаще всего используется для ссылки на внешние таблицы стилей </li> <li> Элемент <code> <meta> </code> обычно<br /> используется для указания набора символов, описания страницы, ключевых слов, автора<br /> документ и настройки области просмотра </li> <li> Элемент <code> <script> </code> используется для определения клиентских сценариев JavaScripts </li> <li> Элемент <code> <base> </code> определяет<br /> базовый URL и / или цель для всех относительных URL на странице </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_HTML"></span> Элементы заголовка HTML <span class="ez-toc-section-end"></span></h3> <table> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <head> </td> <td> Определяет информацию о документе </td> </tr> <tr> <td> <название> </td> <td> Определяет заголовок документа </td> </tr> <tr> <td> <база> </td> <td> Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице </td> </tr> <tr> <td> <ссылка> </td> <td> Определяет связь между документом и внешним ресурсом </td> </tr> <tr> <td> <meta> </td> <td> Определяет метаданные о документе HTML </td> </tr> <tr> <td> <скрипт> </td> <td> Определяет клиентский сценарий </td> </tr> <tr> <td> <стиль> </td> <td> Определяет информацию о стиле для документа </td> </tr> </table> <h2><span class="ez-toc-section" id="HTML-%D1%82%D0%B5%D0%B3_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0"></span> HTML-тег заголовка <span class="ez-toc-section-end"></span></h2> <p></p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-12"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Простой HTML-документ с тегом <title> внутри раздела заголовка: </p> <p></p> <p> Название документа </p> <p><h2><span class="ez-toc-section" id="%D0%AD%D1%82%D0%BE_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Это заголовок <span class="ez-toc-section-end"></span></h2> <p> </p> <p> Это<br /> пункт.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/900igr.net/up/datas/117155/008.jpg' /><noscript><img src='/800/600/http/900igr.net/up/datas/117155/008.jpg' /></noscript> </p> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <p> Дополнительные примеры "Попробуйте сами" ниже. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span> Определение и использование <span class="ez-toc-section-end"></span></h3> <p> Элемент <code> <head> </code> - это контейнер для<br /> метаданные (данные о данных) и помещаются между тегом <html> и <body><br /> тег. </p> <p> Метаданные - это данные об HTML-документе. Метаданные не отображаются. </p> <p> Метаданные обычно определяют заголовок документа, набор символов, стили, сценарии,<br /> и другая метаинформация.</p> <p> В элемент <code> <head> </code> могут входить следующие элементы: </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0"></span> Поддержка браузера <span class="ez-toc-section-end"></span></h3> <table> <tr> <th> Элемент </th> <th title="Chrome"/> <th title="Internet Explorer / Edge"/> <th title="Firefox"/> <th title="Safari"/> <th title="Opera"/> </tr> <tr> <td> <head> </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> </tr> </table> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B"></span> Глобальные атрибуты <span class="ez-toc-section-end"></span></h3> <p> Тег <code> <head> </code> также поддерживает глобальные атрибуты в HTML.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/image1.slideserve.com/3480583/rnek-2-zem-n-reng-l.jpg' /><noscript><img src='/800/600/https/image1.slideserve.com/3480583/rnek-2-zem-n-reng-l.jpg' /></noscript> </p> <hr/> <h3><span class="ez-toc-section" id="%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B"></span> Другие примеры <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-13"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Тег <base> (задает значение по умолчанию<br /> URL и цель для всех ссылок на странице) находятся внутри <head>: </p> <p> </p> <p> <img class="lazy lazy-hidden" src = "images / stickman.gif" alt = "Stickman"><noscript><img src = "images / stickman.gif" alt = "Stickman"></noscript> <br /> <a href="tags/tag_base.asp"> базовый тег HTML </a> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-14"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Тег </p> <style> (добавляет информацию о стиле в<br /> страница) идет внутрь <head>: </p> <p> h2 {цвет: красный;} <br /> p {цвет: синий;} </p> <p><h2><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Заголовок <span class="ez-toc-section-end"></span></h2> <p> </p> <p> А<br /> пункт.</p> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-15"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Тег <link> (ссылки на внешний стиль<br /> лист) идет внутрь <head>: </p> <p> </p> <p><h2><span class="ez-toc-section" id="%D0%AF_%D0%BE%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D1%81%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D0%BE%D0%B9_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9"></span> Я отформатирован с помощью связанной таблицы стилей <span class="ez-toc-section-end"></span></h2> <p></p> <p> Я тоже! </p> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <hr/> <h3><span class="ez-toc-section" id="%D1%81%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> связанные страницы <span class="ez-toc-section-end"></span></h3> <p> Учебное пособие по HTML: заголовок HTML </p> <p> Ссылка на HTML DOM: объект головы </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_CSS_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Настройки CSS по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Большинство браузеров будут отображать элемент <code> <head> </code> со следующим значением по умолчанию<br /> значения: </p> <p> голова {<br /> дисплей: нет; <br />} </p> <p> </p> <h2><span class="ez-toc-section" id="HTML-%D1%82%D0%B5%D0%B3_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0-2"></span> HTML-тег заголовка <span class="ez-toc-section-end"></span></h2> <p></p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-16"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Определите заголовок для вашего HTML-документа: </p> <p></p> <p> Справка по элементам HTML </p> <p><h2><span class="ez-toc-section" id="%D0%AD%D1%82%D0%BE_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-2"></span> Это заголовок <span class="ez-toc-section-end"></span></h2> <p> </p> <p> Это абзац.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.info/slide/12131892/70/images/19/Koneksi+PHP+-+MySQL+%3CHTML%3E+%3CHEAD%3E.jpg' /><noscript><img src='/800/600/https/slideplayer.info/slide/12131892/70/images/19/Koneksi+PHP+-+MySQL+%3CHTML%3E+%3CHEAD%3E.jpg' /></noscript> </p> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <hr/> <h3><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-2"></span> Определение и использование <span class="ez-toc-section-end"></span></h3> <p> Тег <code> <title> </code> определяет заголовок документа.<br /> Заголовок должен состоять только из текста и отображаться в строке заголовка браузера или в<br /> вкладка страницы. </p> <p> Тег <code> <title> </code> является обязательным в HTML.<br /> документы! </p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации.<br /> (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка.<br /> при включении страниц в результаты поиска.</p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное </li> <li> отображает заголовок страницы в результатах поиска. </li> </ul> <p> Вот несколько советов по созданию хороших заголовков: </p> <ul> <li> Используйте более длинный описательный заголовок (избегайте заголовков из одного или двух слов) </li> <li> Поисковые системы будут отображать около 50-60 символов заголовка, поэтому попробуйте<br /> не иметь заголовков длиннее этого </li> <li> Не используйте только список слов в качестве заголовка (это может уменьшить<br /> позиция в поисковой выдаче) </li> </ul> <p> Итак, постарайтесь сделать заголовок максимально точным и содержательным! </p> <p> <b> Примечание: </b> Нельзя иметь более одного элемента <code> <title> </code> в документе HTML.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/image3.slideserve.com/6976364/http-cookie9-l.jpg' /><noscript><img src='/800/600/https/image3.slideserve.com/6976364/http-cookie9-l.jpg' /></noscript> </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-2"></span> Поддержка браузера <span class="ez-toc-section-end"></span></h3> <table> <tr> <th> Элемент </th> <th title="Chrome"/> <th title="Internet Explorer / Edge"/> <th title="Firefox"/> <th title="Safari"/> <th title="Opera"/> </tr> <tr> <td> <название> </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> </tr> </table> <hr/> <h3><span class="ez-toc-section" id="%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B-2"></span> Глобальные атрибуты <span class="ez-toc-section-end"></span></h3> <p> Тег <code> <title> </code> также поддерживает глобальные атрибуты в HTML.</p> <hr/> <h3><span class="ez-toc-section" id="%D1%81%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-2"></span> связанные страницы <span class="ez-toc-section-end"></span></h3> <p> Учебное пособие по HTML: заголовок HTML </p> <p> Ссылка на HTML DOM: титульный объект </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_CSS_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-2"></span> Настройки CSS по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Большинство браузеров отображают элемент <code> <title> </code> со следующими значениями по умолчанию: </p> <p> заголовок {<br /> дисплей: нет; <br />} </p> <p> </p> <h2><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D0%B2_%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%B5_%D0%9C%D0%B5%D1%82%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B2_HTML_-_%D0%98%D0%B7%D1%83%D1%87%D0%B8%D1%82%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D1%83"></span> Что в голове? Метаданные в HTML - Изучите веб-разработку <span class="ez-toc-section-end"></span></h2> <p> Заголовок HTML-документа - это часть, которая не отображается в веб-браузере при загрузке страницы.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.biz.tr/slide/14012766/86/images/16/Head+%28Ba%C5%9F%29+B%C3%B6l%C3%BCm%C3%BC+%3Chtml%3E.jpg' /><noscript><img src='/800/600/https/slideplayer.biz.tr/slide/14012766/86/images/16/Head+%28Ba%C5%9F%29+B%C3%B6l%C3%BCm%C3%BC+%3Chtml%3E.jpg' /></noscript> Он содержит такую информацию, как страница <code> <title> </code>, ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на настраиваемые значки и другие метаданные (данные об HTML, такие как автор, и важные ключевые слова, описывающие документ.) В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой. </p> <table> <tbody> <tr> <th scope="row"> Предварительные требования: </th> <td> Базовые знания HTML, как описано в Приступая к работе с HTML.</td> </tr> <tr> <th scope="row"> Цель: </th> <td> Чтобы узнать о заголовке HTML, его назначении, наиболее важных элементах, которые он может содержать, и о том, какое влияние оно может иметь на документ HTML. </td> </tr> </tbody> </table> <p> Давайте вернемся к простому HTML-документу, который мы рассмотрели в предыдущей статье: </p> <pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница Это моя страница
Заголовок HTML - это содержимое элемента
Моя тестовая страница Однако на больших страницах голова может быть довольно заполнена. Попробуйте посетить некоторые из ваших любимых веб-сайтов и использовать инструменты разработчика, чтобы проверить их содержимое. Наша цель здесь не в том, чтобы показать вам, как использовать все, что можно поместить в голову, а в том, чтобы научить вас, как использовать основные элементы, которые вы хотите включить в голову, и дать вам некоторое представление.Давайте начнем.
Мы уже видели в действии элемент
</code> - его можно использовать для добавления заголовка к документу. Однако это можно запутать с элементом <code> </p> <h2> </h2> <p></code>, который используется для добавления заголовка верхнего уровня к содержимому вашего тела - его также иногда называют заголовком страницы.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.info/slide/12633481/76/images/21/Tag+List+%282%29+Script%3A+%3Chtml%3E+%3Chead%3E.jpg' /><noscript><img src='/800/600/https/slideplayer.info/slide/12633481/76/images/21/Tag+List+%282%29+Script%3A+%3Chtml%3E+%3Chead%3E.jpg' /></noscript> Но это разные вещи! </p> <ul> <li> Элемент <code><br /> <h2> </h2> <p></code> появляется на странице при загрузке в браузер - обычно его следует использовать один раз на страницу, чтобы разметить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или что-то еще подходящее. к вашему использованию.) </li> <li> Элемент <code> <title> </code> - это метаданные, которые представляют заголовок всего HTML-документа (а не его содержимое). </li> </ul> <h4><span class="ez-toc-section" id="%D0%90%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B0"></span> Активное обучение: изучение простого примера <span class="ez-toc-section-end"></span></h4> <ol> <li> Чтобы начать это активное обучение, мы хотели бы, чтобы вы зашли в наш репозиторий GitHub и загрузили копию нашей страницы title-example.html. Для этого либо <ol> <li> Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, а затем сохраните его в удобном месте.</li> <li> Нажмите кнопку «Raw» на странице GitHub, что приведет к появлению необработанного кода (возможно, в новой вкладке браузера). Затем выберите в браузере меню <em> Файл> Сохранить страницу как .<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/waydu.ru/blog/wp-content/uploads/2019/03/primer.png' /><noscript><img src='/800/600/https/waydu.ru/blog/wp-content/uploads/2019/03/primer.png' /></noscript> .. </em> и выберите подходящее место для сохранения файла. </li> </ol> </li> <li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого: <p> Теперь должно быть совершенно очевидно, где находится содержимое <code> </p> <h2> </h2> <p></code>, а где - содержимое <code> <title> </code>! </p> </li> <li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.Повеселись с этим. </li> </ol> <p> Содержимое элемента <code> <title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Закладки> Закладка для этой страницы </em> или значок звездочки в строке URL в Firefox), вы увидите содержимое <code> <title> </code>, заполненное как предлагаемое имя закладки. </p> </p> <p> Содержимое <code> <title> </code> также используется в результатах поиска, как вы увидите ниже. </p> <p> Метаданные - это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ - элемент <code> <meta> </code>.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.zhyk.ru/images/ADb5r.png' /><noscript><img src='/800/600/https/i.zhyk.ru/images/ADb5r.png' /></noscript> Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Существует множество различных типов элементов <code> <meta> </code>, которые могут быть включены в <head> вашей страницы, но мы не будем пытаться объяснять их все на данном этапе, так как это будет слишком запутанно. Вместо этого мы объясним несколько вещей, которые вы обычно видите, просто чтобы дать вам представление. </p> <h4><span class="ez-toc-section" id="%D0%A3%D0%BA%D0%B0%D0%B7%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B8_%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%BE%D0%B2_%D0%B2%D0%B0%D1%88%D0%B5%D0%B3%D0%BE_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Указание кодировки символов вашего документа <span class="ez-toc-section-end"></span></h4> <p> В примере, который мы видели выше, эта строка была включена: </p> <pre> <code> <meta charset = "utf-8"> </code> </pre> <p> Этот элемент определяет кодировку символов документа - набор символов, который разрешено использовать в документе.<code> utf-8 </code> - это универсальный набор символов, который включает практически любые символы любого человеческого языка. Это означает, что ваша веб-страница сможет поддерживать отображение на любом языке; поэтому рекомендуется устанавливать это на каждой создаваемой вами веб-странице! Например, ваша страница может нормально обрабатывать английский и японский языки: </p> <p> Если вы установите кодировку символов на <code> ISO-8859-1 </code>, например (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть неправильно: </p> </p> <p> <strong> Примечание </strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/allyslide.com/thumbs_2/7ba9b325b61c26fbd7ec58abd6866863/img9.jpg' /><noscript><img src='/800/600/https/allyslide.com/thumbs_2/7ba9b325b61c26fbd7ec58abd6866863/img9.jpg' /></noscript> Вы все равно должны установить кодировку <code> utf-8 </code> на своей странице, чтобы избежать любых потенциальных проблем в других браузерах. </p> <h4><span class="ez-toc-section" id="%D0%90%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D1%8D%D0%BA%D1%81%D0%BF%D0%B5%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D1%83%D0%B9%D1%82%D0%B5_%D1%81_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%BE%D0%B9_%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%BE%D0%B2"></span> Активное обучение: поэкспериментируйте с кодировкой символов <span class="ez-toc-section-end"></span></h4> <p> Чтобы попробовать это, вернитесь к простому шаблону HTML, полученному в предыдущем разделе на <code> <title> </code> (страница title-example.html), попробуйте изменить значение мета-кодировки на <code> ISO-8859-1 </code>, и добавьте японский язык на свою страницу. Это код, который мы использовали: </p> <pre> <code> <p> Японский пример: ご 飯 が 熱 い。 </p> </code> </pre> <h4><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B0_%D0%B8_%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D1%8F"></span> Добавление автора и описания <span class="ez-toc-section-end"></span></h4> <p> Многие элементы <code> <meta> </code> включают <code> name </code> и <code> content </code> attributes: </p> <ul> <li> <code> имя </code> определяет тип метаэлемента; какой тип информации он содержит.</li> <li> <code> содержимое </code> указывает фактическое мета-содержимое. </li> </ul> <p> Два таких метаэлемента, которые полезно включить на вашу страницу, определяют автора страницы и предоставляют краткое описание страницы.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.biz.tr/slide/1998918/8/images/14/%3CHEAD%3E+Etiketinin+Alt+Etiketleri.jpg' /><noscript><img src='/800/600/https/slideplayer.biz.tr/slide/1998918/8/images/14/%3CHEAD%3E+Etiketinin+Alt+Etiketleri.jpg' /></noscript> Давайте посмотрим на пример: </p> <pre> <code> <meta name = "author" content = "Chris Mills"> <meta name = "description" content = "Область обучения веб-документации MDN предоставляет полные новички в Интернете со всем, что им нужно знать, чтобы получить начал с разработки веб-сайтов и приложений."> </code> </pre> <p> Указание автора полезно во многих отношениях: полезно иметь возможность понять, кто написал страницу, если у вас есть какие-либо вопросы по содержанию, и вы хотели бы с ними связаться. Некоторые системы управления контентом имеют средства для автоматического извлечения информации об авторе страницы и предоставления ее для этих целей. </p> <p> Указание описания, включающего ключевые слова, относящиеся к содержанию вашей страницы, полезно, поскольку оно может повысить позицию вашей страницы при релевантных поисках, выполняемых в поисковых системах (такие действия называются поисковой оптимизацией или SEO.) </p> <h4><span class="ez-toc-section" id="%D0%90%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D1%8F_%D0%B2_%D0%BF%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D1%85_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%85"></span> Активное обучение: Использование описания в поисковых системах <span class="ez-toc-section-end"></span></h4> <p> Описание также используется на страницах результатов поисковых систем.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/image1.slideserve.com/2766156/rnek-8-yazi-b-y-kl-l.jpg' /><noscript><img src='/800/600/https/image1.slideserve.com/2766156/rnek-8-yazi-b-y-kl-l.jpg' /></noscript> Давайте рассмотрим упражнение, чтобы изучить этот </p> <ol> <li> Перейдите на главную страницу сети разработчиков Mozilla. </li> <li> Просмотр исходного кода страницы (Правый / <kbd> Ctrl </kbd> + щелкните страницу, выберите <em> Просмотреть исходный код страницы </em> из контекстного меню.) </li> <li> Найдите метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться): <pre> <code> <meta name = "description" content = "Сайт веб-документов MDN предоставляет информацию об открытых веб-технологиях включая HTML, CSS и API для веб-сайтов и прогрессивные веб-приложения."> </code> </pre> </li> <li> Теперь поищите «MDN Web Docs» в своей любимой поисковой системе (мы использовали Google). Вы заметите содержание элемента description <code> <meta> </code> и <code> <title> </code>, используемое в результатах поиска - определенно стоит иметь! </p> </li> </ol> <p> <strong> Примечание </strong>: В Google вы увидите некоторые релевантные подстраницы веб-документов MDN, перечисленные под основной ссылкой на главную страницу - они называются дополнительными ссылками и настраиваются в инструментах Google для веб-мастеров - способ улучшить результаты поиска вашего сайта в Google.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_3/e91854e61c541b08a852b5eaa0c2d4b5/img14.jpg' /><noscript><img src='/800/600/https/myslide.ru/documents_3/e91854e61c541b08a852b5eaa0c2d4b5/img14.jpg' /></noscript> поисковый движок.</p> <p> <strong> Примечание </strong>: Многие функции <code> <meta> </code> просто больше не используются. Например, ключевое слово <code> <meta> </code> element (<code> <meta name = "keywords" content = "fill, in, your, keywords, here"> </code>), которое должно предоставлять ключевые слова для поисковых систем для определения релевантности эта страница для различных поисковых запросов - игнорируется поисковыми системами, потому что спамеры просто заполняли список ключевых слов сотнями ключевых слов, искажая результаты.</p> <h4><span class="ez-toc-section" id="%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5_%D1%82%D0%B8%D0%BF%D1%8B_%D0%BC%D0%B5%D1%82%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85"></span> Другие типы метаданных <span class="ez-toc-section-end"></span></h4> <p> Путешествуя по сети, вы найдете и другие типы метаданных. Многие функции, которые вы увидите на веб-сайтах, являются проприетарными творениями, разработанными для предоставления определенным сайтам (например, сайтам социальных сетей) определенной информации, которую они могут использовать. </p> <p> Например, Open Graph Data - это протокол метаданных, который Facebook изобрел для предоставления более подробных метаданных для веб-сайтов.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.info/slide/1973894/7/images/34/Dasar+Tag+HTML+Images+%3Chtml%3E+%3Chead%3E.jpg' /><noscript><img src='/800/600/https/slideplayer.info/slide/1973894/7/images/34/Dasar+Tag+HTML+Images+%3Chtml%3E+%3Chead%3E.jpg' /></noscript> В исходном коде MDN Web Docs вы найдете это: </p> <pre> <code> <meta property = "og: image" content = "https: // разработчик.mozilla.org/static/img/opengraph-logo.png "> <meta property = "og: description" content = "Сеть разработчиков Mozilla (MDN) предоставляет информация об открытых веб-технологиях, включая HTML, CSS и API для обоих веб-сайтов и приложения HTML5. Он также документирует продукты Mozilla, такие как Firefox OS. "> <meta property = "og: title" content = "Mozilla Developer Network"> </code> </pre> <p> Одним из следствий этого является то, что когда вы ссылаетесь на MDN Web Docs на facebook, ссылка появляется вместе с изображением и описанием: более широкий опыт для пользователей.</p> </p> <p> Twitter также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например: </p> <pre> <code> <meta name = "twitter: title" content = "Mozilla Developer Network"> </code> </pre> <p> Чтобы еще больше обогатить дизайн своего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/900igr.net/up/datas/116354/055.jpg' /><noscript><img src='/800/600/http/900igr.net/up/datas/116354/055.jpg' /></noscript> Наиболее часто используемым из них является значок <strong> favicon </strong> (сокращение от «значок избранного», относящееся к его использованию в списках «избранного» или «закладок» в браузерах).</p> <p> Скромный значок существует уже много лет. Это первый значок такого типа: квадратный значок размером 16 пикселей, используемый в нескольких местах. Вы можете видеть (в зависимости от браузера) значки, отображаемые на вкладке браузера, содержащей каждую открытую страницу, и рядом со страницами, отмеченными закладками на панели закладок. </p> <p> Значок может быть добавлен на вашу страницу с помощью: </p> <ol> <li> Сохранение его в том же каталоге, что и индексная страница сайта, в формате <code> .ico </code> (большинство браузеров будут поддерживать значки в более распространенных форматах, таких как <code>.gif </code> или <code> .png </code>, но использование формата ICO гарантирует, что он будет работать еще в Internet Explorer 6.) </li> <li> Добавление следующей строки в блок HTML <code> <head> </code> для ссылки на него: <pre> <code> <link rel = "shortcut icon" href = "favicon.<img class="lazy lazy-hidden" src="//jumper.su/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/image3.slideserve.com/6924840/xhtml1-l.jpg' /><noscript><img src='/800/600/https/image3.slideserve.com/6924840/xhtml1-l.jpg' /></noscript> ico" type = "image / x-icon"> </code> </pre> </li> </ol> <p> Вот пример значка на панели закладок: </p> </p> <p> В наши дни есть много других типов значков, которые нужно учитывать.Например, вы найдете это в исходном коде домашней страницы MDN Web Docs: </p> <pre> <code> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon144.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon114.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon72.png"> <link rel = "apple-touch-icon-precomposed" href = "https: // разработчик.mozilla.org/static/img/favicon57.png "> <link rel = "shortcut icon" href = "https://developer.mozilla.org/static/img/favicon32.png"> </code> </pre> <p> Комментарии объясняют, для чего используется каждый значок - эти элементы охватывают такие вещи, как предоставление красивого значка с высоким разрешением для использования при сохранении веб-сайта на главном экране iPad. </p> <p> Не слишком беспокойтесь о реализации всех этих типов значков прямо сейчас - это довольно продвинутая функция, и от вас не ожидается, что вы будете знать об этом, чтобы продвигаться по курсу.Основная цель здесь - сообщить вам, что это такое, на случай, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов. </p> <p> <strong> Примечание: </strong> Если ваш сайт использует политику безопасности контента (CSP) для повышения своей безопасности, политика применяется к значку. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива <code> img-src </code> заголовка <code> Content-Security-Policy </code> не препятствует доступу к нему. </p> <p> Практически все веб-сайты, которые вы будете использовать в наши дни, будут использовать CSS, чтобы они выглядели круто, и JavaScript для поддержки интерактивных функций, таких как видеоплееры, карты, игры и многое другое.Чаще всего они применяются к веб-странице с использованием элемента <code> <link> </code> и элемента <code> <script> </code> соответственно. </p> <ul> <li> <p> Элемент <code> <link> </code> всегда должен находиться внутри заголовка вашего документа. Это принимает два атрибута: <code> rel = "stylesheet" </code>, который указывает, что это таблица стилей документа, и <code> href </code>, который содержит путь к файлу таблицы стилей: </p> <pre> <code> <link rel = "stylesheet" href = "my-css-file.css "> </code> </pre> </li> <li> <p> Элемент <code> <script> </code> также должен идти в заголовок и должен включать атрибут <code> src </code>, содержащий путь к JavaScript, который вы хотите загрузить, и <code> defer </code>, который в основном инструктирует браузер загружать JavaScript в в то же время, что и HTML страницы. Это полезно, поскольку гарантирует, что весь HTML-код загружен до запуска JavaScript, так что вы не получите ошибок в результате попытки JavaScript получить доступ к элементу HTML, которого еще нет на странице.На самом деле существует несколько способов обработать загрузку JavaScript на вашей странице, но это наиболее надежный способ использовать для современных браузеров (для других см. Стратегии загрузки сценариев). </p> <pre> <code> <script src = "my-js-file.js" defer> </script> </code> </pre> <p> <strong> Примечание </strong>: Элемент <code> <script> </code> может выглядеть как пустой элемент, но это не так, поэтому ему нужен закрывающий тег. Вместо того, чтобы указывать на внешний файл сценария, вы также можете поместить свой сценарий внутри элемента <code> <script> </code>.</p> </li> </ul> <h4><span class="ez-toc-section" id="%D0%90%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_CSS_%D0%B8_JavaScript_%D0%BA_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5"></span> Активное обучение: применение CSS и JavaScript к странице <span class="ez-toc-section-end"></span></h4> <ol> <li> Чтобы начать это активное обучение, возьмите копию наших файлов meta-example.html, script.js и style.css и сохраните их на локальном компьютере в папке тот же каталог. Убедитесь, что они сохранены с правильными именами и расширениями файлов. </li> <li> Откройте файл HTML как в браузере, так и в текстовом редакторе. </li> <li> Следуя приведенной выше информации, добавьте <code> <link> </code> и <code> <script> </code> элементов в ваш HTML, чтобы ваши CSS и JavaScript были применены к вашему HTML.</li> </ol> <p> Если все сделано правильно, при сохранении HTML и обновлении браузера вы увидите, что все изменилось: </p> </p> <ul> <li> JavaScript добавил на страницу пустой список. Теперь, когда вы щелкните в любом месте списка, появится диалоговое окно с просьбой ввести текст для нового элемента списка. Когда вы нажимаете кнопку ОК, новый элемент списка будет добавлен к списку, содержащему текст. Когда вы щелкаете по существующему элементу списка, появляется диалоговое окно, позволяющее изменить текст элемента.</li> <li> CSS заставил фон стать зеленым, а текст стал больше. Он также стилизовал часть содержимого, которое JavaScript добавил на страницу (красная полоса с черной рамкой - это стиль, который CSS добавил в список, сгенерированный JS). </li> </ul> <p> <strong> Примечание </strong>: Если вы застряли в этом упражнении и не можете применить CSS / JS, попробуйте просмотреть нашу страницу с примерами css-and-js.html. </p> <p> Наконец, стоит упомянуть, что вы можете (и действительно должны) установить язык своей страницы.Это можно сделать, добавив атрибут lang к открывающему тегу HTML (как показано в meta-example.html и показано ниже). </p> <pre> <code> <html lang = "en-US"> </code> </pre> <p> Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно проиндексирован поисковыми системами, если установлен его язык (например, позволяющий ему правильно отображаться в результатах, зависящих от языка), и он полезен для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово «шесть» существует как во французском, так и в английском языках, но произносится по-разному.) </p> <p> Вы также можете настроить распознавание подразделов документа на разных языках. Например, мы могли бы настроить раздел японского языка, чтобы он распознавался как японский, например: </p> <pre> <code> <p> Пример на японском языке: <span lang = "ja"> ご 飯 が 熱 い。 </span>. </p> </code> </pre> <p> Эти коды определены стандартом ISO 639-1. Вы можете найти больше о них в разделе «Языковые теги в HTML и XML». </p> <p> Это знаменует собой конец нашего быстрого ознакомления с HTML-головой - здесь вы можете сделать гораздо больше, но исчерпывающий тур на данном этапе был бы скучным и запутанным, и мы просто хотели дать вам представление о самом главном. обычные вещи, которые вы сейчас там найдете! В следующей статье мы рассмотрим основы текста HTML.</p> <h2><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_HTML"></span> Работа с элементами заголовка HTML <span class="ez-toc-section-end"></span></h2> <p> Из этого урока вы узнаете о важности элементов головы. </p> <h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_HTML"></span> Элемент заголовка HTML <span class="ez-toc-section-end"></span></h3> <p> Элемент <code> <head> </code> в первую очередь является контейнером для всех элементов заголовка, которые предоставляют дополнительную информацию о документе (метаданные) или ссылки на другие ресурсы, которые необходимы для правильного отображения или правильного поведения документа в веб-браузере.</p> <p> Элементы заголовка в совокупности описывают свойства документа, такие как заголовок, предоставляют метаинформацию, такую как набор символов, указывают браузеру, где найти таблицы стилей или сценарии, которые позволяют расширять HTML-документ высокоактивными и интерактивными способами. </p> <p> HTML-элементы, которые могут использоваться внутри элемента <code> <head> </code>: <code> <title> </code>, <code> <base> </code>, <code> <link> </code>, <code> </p> <style> </code>, <code> <meta> </code>, <code> < script> </code> и элемент <code> <noscript> </code>.</p> <h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_HTML-2"></span> Элемент заголовка HTML <span class="ez-toc-section-end"></span></h3> <p> Элемент <code> <title> </code> определяет заголовок документа. </p> <p> Элемент заголовка требуется во всех документах HTML / XHTML для создания действительного документа. В документе разрешен только один элемент заголовка, и он должен быть помещен в элемент <code> <head> </code>. Элемент заголовка содержит простой текст и сущности; он не может содержать других тегов разметки. </p> <p> Название документа может использоваться для разных целей.Например: </p> <ul> <li> Для отображения заголовка в строке заголовка браузера и на панели задач. </li> <li> Чтобы указать заголовок для страницы, когда она добавляется в избранное или добавляется в закладки. </li> <li> Кому отображает заголовок страницы в результатах поисковой системы. </li> </ul> <p> В следующем примере показано, как разместить заголовок в документе HTML. </p> <pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> <title> Простой HTML-документ Привет, мир!
Совет: Хороший заголовок должен быть коротким и соответствовать содержанию документа, потому что поисковые роботы обращают особое внимание на слова, используемые в заголовке.В идеале заголовок должен быть менее 65 символов. См. Рекомендации по названиям.
Базовый элемент HTML
Элемент HTML
Определение базового URL Гиперссылка в приведенном выше примере фактически преобразуется в
https: // www.tutorialrepublic.com/html-tutorial/html-head.phpнезависимо от URL-адреса текущей страницы. Это связано с тем, что относительный URL-адрес, указанный в ссылке:html-tutorial / html-head.php, добавляется в конец базового URL-адреса:https://www.tutorialrepublic.com/.Предупреждение: Элемент HTML
Элемент ссылки HTML
Элемент
Связывание таблиц стилей Пожалуйста, ознакомьтесь с разделом руководства по CSS, чтобы подробно узнать о таблицах стилей.
Примечание: Элемент
Элемент стиля HTML
Элемент
Примечание: Встроенная таблица стилей должна использоваться, когда отдельный документ имеет уникальный стиль.Если одна и та же таблица стилей используется в нескольких документах, то более подходящей будет внешняя таблица стилей. См. Руководство по стилям HTML, чтобы узнать об этом больше.
Мета-элемент HTML
Элемент
Указание метаданных Более подробно метаэлемент будет объяснен в следующей главе.
Элемент сценария HTML
Элемент
Элементы script и noscript будут подробно объяснены в следующей главе.
Тег HTML
- использование, атрибуты, примеры
Тег
содержит метаданные (заголовок документа, набор символов, стили, ссылки, сценарии), конкретную информацию о веб-странице, которая не отображается для пользователя.Метаданные предоставляют браузерам и поисковым системам техническую информацию о веб-странице.
включает в себя следующие элементы:- Тег
определяет заголовок веб-страницы (обязательно). Его можно спутать с тегом<br /> <h2><span class="ez-toc-section" id="_%D0%BD%D0%BE_%D0%BE%D0%BD%D0%B8_%D1%80%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5_%D0%A2%D0%B5%D0%B3"></span>, но они разные. Тег <span class="ez-toc-section-end"></span></h2> <h2> определяет заголовок содержимого страницы, тогда как тег <title> представляет собой метаданные, представляющие заголовок всего содержимого HTML, а не его содержимое. </li> <li> Тег<br /> <style> содержит код CSS, который определяет, как элементы HTML должны отображаться в браузере.</li> <li> Тег <base> определяет абсолютный (базовый) URL-адрес для всех относительных URL-адресов. </li> <li> Тег <link> определяет отношения между текущим документом HTML и ресурсом, на который он ссылается, или содержит ссылку на внешнюю таблицу стилей. Он может иметь два атрибута: rel = "stylesheet" и href. </li> <li> Тег <meta> предоставляет дополнительную информацию (метаданные) о документе HTML. <head> страницы может включать в себя различные типы элементов <meta>, которые могут содержать атрибуты имени и содержимого.</li> <li> Тег <script> содержит сценарий (обычно JavaScript) или ссылку на внешний файл со сценариями. Этот элемент не может быть включен в <head>. Иногда лучше поместить его внизу <body>. Элемент <script> может показаться пустым, но это не так. </li> <li> Тег <noscript> определяет альтернативный текст, который отображается, если браузер не поддерживает сценарии или сценарии отключены пользователем. </li> </ul> <h3> Синтаксис¶ </h3> <p> Тег <head> состоит из пар.Контент записывается между открывающим (<head>) и закрывающим (</head>) тегами. </p> <h4> Пример HTML-тега </h4> <p><head>, используемого с тегами <title> и </p> <style>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа <стиль> тело{ цвет фона: # d3d3d3; } п{ цвет: # 1c87c9; } a { красный цвет; }Абзац
СсылкаПопробуйте сами »
В данном примере тег
используется с тегамии </p> <style>.Тег <title> определяет заголовок документа, который отображается в окне браузера. В теге </p> <style> определяется стиль документа: фон документа оранжевый, текст в абзацах, отмеченных тегом </p> <p>, синий, а ссылки в теге <a> розовые. </p> <h4> Пример HTML-тега </h4> <p><head>, используемого с тегом <link>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text / css" href = "css / style.css "> </head> <body> <p> Содержание страницы </p> </body> </html> </code> </pre> <p> Попробуйте сами »</p> <h4> Результат¶ </h4> <p> В этом примере мы предоставили ссылку на документ style.css в папке CSS. </p> <h4> Пример HTML-тега </h4> <p><head>, используемого с тегом <meta>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <meta name = "title" content = "Книги HTML и CSS"> <meta name = "description" content = "Основы HTML и CSS для начинающих"> <meta http-Equiv = "refresh" content = "30"> </head> <body> <p> Содержание страницы </p> </body> </html> </code> </pre> <p> Попробуйте сами »</p> <p> Тег <meta> содержит метаданные для поисковых систем - мета-заголовок, мета-описание.</p> <h3> Атрибуты¶ </h3> <p> Тег <head> поддерживает глобальные атрибуты и атрибуты событий. </p> <hr/> <p> </p> <h2> Глобальная структура документа HTML </h2> <p> Глобальная структура документа HTML</p> <h3><span class="ez-toc-section" id="71_%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D1%83_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82"></span> 7.1 Введение в структуру HTML<br /> документ <span class="ez-toc-section-end"></span></h3> <p> Документ HTML 4 состоит из трех частей: </p> <ol> <li> строка, содержащая версию HTML<br /> информация, </li> <li> декларативный раздел заголовка (разделенный заголовком <samp> HEAD </samp><br /> элемент), </li> <li> тело, которое содержит фактическое содержимое документа.Тело может быть<br /> реализуется элементом <samp> BODY </samp> или <samp><br /> Элемент FRAMESET </samp>. </li> </ol> <p> Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или<br /> после каждого раздела. Разделы 2 и 3 должны быть разделены кодом <samp> HTML </samp>.<br /> элемент. </p> <p> Вот пример простого HTML-документа: </p> <pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <ГОЛОВА> <TITLE> Мой первый HTML-документ <ТЕЛО>Привет, мир!
Действительный документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа
называет определение типа документа (DTD), используемое для документа (см.
[ISO8879]).HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих
декларации типов документов в своих документах. DTD различаются по элементам
они поддерживают.- HTML 4.01 Strict DTD включает все элементы и
атрибуты, которые не были
устарели или не отображаются в документах набора фреймов. Для документов, использующих
это DTD, используйте это объявление типа документа: - HTML 4.01
Переходный DTD включает в себя все, что входит в строгий DTD plus
устаревшие элементы и атрибуты (большинство из которых касается визуального представления).
Для документов, которые используют это DTD, используйте это объявление типа документа: - DTD набора фреймов HTML 4.01 включает
все в переходных кадрах DTD plus.Для документов, использующих
это DTD, используйте это объявление типа документа:
URI в каждом объявлении типа документа позволяет пользовательским агентам загружать
DTD и любые наборы сущностей, которые
нужный. Следующие (относительные) URI относятся к DTD и
наборы сущностей для HTML 4:Связь между общедоступными идентификаторами и файлами может быть указана с помощью
файл каталога в формате, рекомендованном Oasis Open Consortium (см.[OASISOPEN]).Образец файла каталога
для HTML 4.01 включен в начало раздела, посвященного справочнику SGML.
информация для HTML. Последние две буквы декларации обозначают
язык DTD. Для HTML это всегда английский («EN»).Примечание. Начиная с версии HTML 4.01 от 24 декабря,
Рабочая группа HTML придерживается следующей политики:- Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые
соответствуют DTD данной спецификации. Рабочая группа HTML
оставляет за собой право исправлять известные ошибки. - Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать
особенности будущих HTML 4 DTD, которые он не распознает.
Это означает, что в объявлении типа документа авторы могут безопасно использовать
системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы
может также выбрать использование системного идентификатора, который относится к конкретному (датированному)
версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу
их первоначальный адрес в исходной форме.Начальный тег: необязательно , Конечный тег:
опциональноОпределения атрибутов
- версия = cdata [CN]
- Не рекомендуется.
значение этого атрибута указывает, какая версия HTML DTD управляет текущей
документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа.
декларация.
Атрибуты, определенные в другом месте
После объявления типа документа остальная часть HTML-документа
содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это
состав:... Сюда идет голова, тело и т. Д ...
7.4 Заголовок документа
7.4.1
HEAD элементНачальный тег: необязательно , Конечный тег:
опциональноОпределения атрибутов
- профиль = uri [CT]
- Этот атрибут определяет расположение одного или нескольких профилей метаданных,
разделенные пробелом.Для будущих расширений пользовательские агенты должны учитывать
значение должно быть списком, хотя эта спецификация рассматривает только первый
URI должен быть значимым. Профили обсуждаются ниже в
раздел по метаданным.
Атрибуты, определенные в другом месте
Элемент HEAD содержит информацию о текущем документе, например
в качестве названия, ключевых слов, которые могут быть полезны для поисковых систем, и других данных
это не считается содержанием документа. Пользовательские агенты обычно не отображают
элементы, которые появляются в
ГОЛОВА в качестве содержания.Однако они могут сделать
Информация в HEAD доступна пользователям через другие механизмы.7.4.2
TITLE элементTITLE - - (#PCDATA) - (% head.misc;) - заголовок документа ->
Начальный тег: требуется , Конечный тег:
требуетсяАтрибуты, определенные в другом месте
Каждый документ HTML должен иметь НАЗВАНИЕ
элемент в разделе HEAD .Авторы должны использовать элемент TITLE для идентификации содержимого
документ. Поскольку пользователи часто обращаются к документам вне контекста,
авторы должны предоставлять заголовки с богатым контекстом. Таким образом, вместо названия, такого как
«Введение», которое не дает много контекстной справки, авторы
должен содержать заголовок, например "Введение в средневековое пчеловодство"
вместо.По причинам доступности пользовательские агенты всегда должны делать содержимое
Элемент TITLE доступен пользователям (включая TITLE
элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя.
агент (например, в качестве подписи, произносится).Заголовки могут содержать символьные сущности
(для акцентированных символов, специальных символов и т. д.), но не может содержать других
разметка (включая комментарии). Вот образец названия документа:<ГОЛОВА>
Исследование динамики населения ... другие элементы головки... <ТЕЛО> ... тело документа ... - HTML 4.01 Strict DTD включает все элементы и
- Тег
Вместо этого задача руководителя - содержать метаданные о документе. В приведенном выше примере голова довольно маленькая: