Title html head: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

HTML HEAD TITLE TITLE HEAD BODY BODY HTML

Лекция 3 Таблицы и фреймы

Лекция 3 Таблицы и фреймы Лектор Ст. преподаватель Купо А.Н. Лекция 3 Таблицы и фреймы Для создания таблиц в языке HTML используются следующие элементы: TABLE — создаёт таблицу. CAPTION — задаёт заголовок

Подробнее

Создание сайтов HTML

Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)

Подробнее

Создание сайтов HTML

Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия

Подробнее

HTML. Создание таблиц.

Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.

Подробнее

<html> <head> <title>название документа</title>

Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе

Подробнее

ОСНОВЫ ПРОГРАММИРОВАНИЯ

ОСНОВЫ ПРОГРАММИРОВАНИЯ Зачем нам знания HTML? Для чего нужен HTML? Как самому создать HTML документ? Для создания HTML файла (документа) необходимо в первую очередь поменять расширение файла текстового

Подробнее

Практикум «Создание Web-сайта Компьютер»

1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание

Подробнее

Язык программирования HTML

Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе «Стандартные». Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно

Подробнее

Информатика и ИКТ Лекция 12

Информатика и ИКТ Лекция 12 ГБОУ СПО «УМТК» Кондаратцева Т.П. 1 курс Методы создания и сопровождения сайта Основы языка гипертекстовой разметки HTML Интернет — это сложная электронная информационная структура,

Подробнее

«Создание WEBстраниц. помощью HTML»

«Создание WEBстраниц с помощью HTML» Работа выполнена Хисматуллиным Ильнуром Рахимзяновичем, учителем информатики Нижнекуюкской средней общеобразовательной школы Атнинского муниципального района Республики

Подробнее

Лабораторная работа 2

Тема: Таблицы в HTML-документах Лабораторная работа 2 Цель: научиться создавать таблицы в HTML-документах Выполнение каждого задания демонстрировать преподавателю.

1. Построение простых таблиц и колонок

Подробнее

Лекция 6. Элементы HTML 4.01 (продолжение)

Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 6. Элементы HTML 4.01 (продолжение) Иваница Сергей Васильевич, ассистент кафедры

Подробнее

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.

Подробнее

Вопрос 3. HTML формы

Вопрос 3. Язык гипертекстовой разметки HTML. HTML (HyperText Markup Language) это коллекция стилей (указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. Годом рождения

Подробнее

<HTML> <HEAD> <TITLE>

Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться

Подробнее

ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА

«ПЕРФОРМИЯ СНГ» г. Москва, Ленинский проспект, 32 Выпуск от 10.02.2009 В шляпные папки Отв. подключение к Интерспидии ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА В ситуации, когда у клиента Интерспидии (далее

Подробнее

WEB-программирование

WEB-программирование Л Е К Ц И И [Shift]+[F5] Ситников С.Ю. Лекция 1 2 Лекция 1 3 Тимоти Джон Бернерс-Ли британский учёный, изобретатель URL, HTTP, HTML, создатель Всемирной паутины Лекция 2 4 Пример элемента

Подробнее

Лабораторная работа 3

Теория Лабораторная работа 3 Задание Требования к отчету HTML (HyperText Markup Language) — язык разметки гипертекста. Создание таблиц в html Таблица — один из основных инструментов для создания web-страниц.

Подробнее

6. Графика. Учебник HTML. Изображения

6. Графика Изображения Поддержка изображений в HTML — путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. Браузер

Подробнее

ОСНОВНЫЕ ТЕГИ HTML. Описание документа

ОСНОВНЫЕ ТЕГИ HTML HTML — Hypertext Markup Language — язык разметки гипертекста — используется для форматирования электронных документов, предназначенных для размещения в глобальной информационной сети

Подробнее

Синтаксис языка HTML

Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.

Подробнее

Лабораторная работа 1

Лабораторная работа 1 Задание 1 Получите образец этого файла у преподавателя и измените стили: Стиль для абзаца: размер шрифта 16 пунктов, цвет — #ffcc00. Стиль для заголовков h2: фоновый цвет — #369,

Подробнее

Глава 10. Фреймы Описание структуры фреймов

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

Подробнее

АТИЛЕКТ.CMS. [Текстовый редактор]

ИНСТРУКЦИЯ к системе администрирования АТИЛЕКТ.CMS [Текстовый редактор] Оглавление Модуль «Текстовый редактор». .. 2 Редактирование данных… 2 Как разместить в тексте ссылку… 4 Ссылка… 4 Якорь… 4

Подробнее

Использование таблиц в web-страницах

Использование таблиц в web-страницах В печатных публикациях таблицы представляют собой основной элемент дизайна. Размещение данных в строках и столбцах облегчает сравнительный анализ данных. Помимо этого

Подробнее

Разработка Web-страниц

Разработка Web-страниц Цель работы: получить представление о создании гипертекстовых документов с помощью языка HTML. Создать персональную Web-страницу. Результат работы файл Моя страница1_фамилия.doc

Подробнее

Лекция 8. Использование CSS

Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 8.

Использование CSS Иваница Сергей Васильевич, ассистент кафедры компьютерной

Подробнее

HTML: работа с текстом Урок 2

HTML: работа с текстом Урок 2 Основной текст располагается body между метками >…. Разд В отличие от текстовых документов прерывания строк в HTML-файлах не существенны. При про Разбиение документа

Подробнее

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3.2. Изображения на веб-страницах Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они не только делают страницы

Подробнее

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR Описание редактора CKeditor Форматирование текста 1. Сервисы редактора CKeditor 2. Стили шрифта 3.

Структурирование текста 4. Выравнивание текста 5. Вставка ссылок,

Подробнее

Лекция Таблицы в HTML

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Таблицы в HTML Лектор

Подробнее

Лекция Работа со стилями CSS

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Работа со стилями CSS

Подробнее

Лабораторная работа 3 Колонки и списки

Лабораторная работа 3 Колонки и списки Microsoft Word 2007 Лабораторная работа 3 Колонки обычно используются в газетных статьях, брошюрах и подобных документах. Строки текста в колонках короче обычных,

Подробнее

Фреймовые структуры FRAMESET

Фреймовые структуры Используя фрэймы, позволяющие разбивать Web-страницы на множественные прокручиваемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений.

Подробнее

Метаданные 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> — там, где ожидается текстовое содержимое.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 1. Атрибуты элемента <link>
Атрибут Описание, принимаемое значение
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 — там, где ожидаются метаданные.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 2. Атрибуты элемента <meta>
Атрибут Описание, принимаемое значение
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'">

6. Элемент <style>

Категории содержимого: метаданные.

Контекст, в котором этот элемент может быть использован: где ожидаются метаданные. Внутри элемента <noscript> который является дочерним элементом <head>. Внутри <body>, где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 3. Атрибуты элемента <style>
Атрибут Описание, принимаемое значение
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>
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="30">
  <title>Автоматическая перезагрузка страницы</title>  
 </head>
 <body>
  <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
 </body>
</html>

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

Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>

Материал взят с разрешения админа здесь





HTML Head


HTML <head> Элемент

<head> элемент является контейнером для метаданных (данные о данных).

HTML метаданные данные о HTML-документе. не отображаются метаданные.

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

Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script>, and <base> .


Опуская <html> и <body> ?

В стандарте HTML5, то <html> тег, то <body> тег, и <head> тег может быть опущен.

Следующий код будет проверять, как HTML5:

w3ii не рекомендует опуская <html> и <body> теги.

<html> элемент является корневым документом. Это рекомендуемое место для определения языка страницы:

<!DOCTYPE html>
<html lang=»en-US»>

Декларирование языка важно для приложений доступности (считыватели экрана) и поисковых систем.

Опуская <html> и <body> может привести к сбою плохо написанный DOM/XML программного обеспечения.

Наконец, опуская <body> может привести к ошибкам в старых браузерах (IE9) .


Опуская <head>

В стандарте HTML5, то <head> тег также может быть опущен.

По умолчанию браузеры будут добавлять все элементы до <body> , чтобы по умолчанию <head> элемент.

Вы можете уменьшить сложность HTML, путем исключения <head> тег:

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


HTML <title> Элемент

<title> элемент определяет заголовок документа.

<title> элемент необходим во всех HTML / XHTML документов.

<title> элемент:

  • определяет заголовок во вкладке браузера
  • обеспечивает заголовок страницы при добавлении в избранное
  • отображает заголовок страницы в результатах поиска

Упрощенный HTML документ:


HTML <style> Элемент

<style> элемент используется для определения стиля информацию для HTML — документа.

Внутри <style> элемент вы определяете , как HTML элементы должны сделать в браузере:


HTML <link> Элемент

<link> элемент определяет отношения страницы на внешний ресурс.

<link> элемент наиболее часто используется для связывания таблиц стилей:


HTML <meta> Элемент

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

Метаданные используются браузерами (how to display content) , с помощью поисковых систем (keywords) , а также других веб — сервисов.

Определение ключевых слов для поисковых систем:

<meta name=»keywords» content=»HTML, CSS, XML, XHTML, JavaScript»>

Определите описание вашей веб-странице:

<meta name=»description» content=»Free Web tutorials on HTML and CSS»>

Определить набор символов, используемый:

Определить автор страницы:

<meta name=»author» content=»Hege Refsnes»>

Обновить документ каждые 30 секунд:

<meta http-equiv=»refresh» content=»30″>

Пример <meta> теги:

пример

<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»Hege Refsnes»>
<meta charset=»UTF-8″>

Попробуй сам »

HTML <script> Элемент

<script> элемент используется для определения на стороне клиента JavaScripts.

Ниже сценарий пишет Hello JavaScript! в HTML — элемент с :

пример

<script>
function myFunction {
    document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
}
</script>

Попробуй сам »

HTML <base> Элемент

<base> элемент определяет базовый URL и базовую цель для всех относительных URL — адресов в странице:


Элементы головы HTML

Тег Описание
<head> Определяет информацию о документе
<title> Определяет название документа
<base> Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице
<link> Определяет связь между документом и внешним ресурсом
<meta> Определяет метаданные о HTML документе
<script> Определяет сценарий на стороне клиента
<style> Определяет информацию о стиле для документа

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 к вашей веб-странице прямо сейчас и проверьте результат в браузере.

HTML-элементов заголовка


Элемент HTML является контейнером для следующих элементов: <название> , <стиль> , , ,

Попробуй сам "

HTML-элемент

Элемент определяет базовый URL-адрес и / или цель для всех относительных URL-адресов на странице.

Тег должен иметь либо href или целевой атрибут, или оба.

Может быть только один единственный элемент в документе!

Пример

Укажите URL-адрес по умолчанию и цель по умолчанию для всех ссылок на странице:



Stickman
базовый тег HTML

Попробуй сам "

Краткое содержание главы

  • Элемент - это контейнер для метаданных (данных о данных)
  • Элемент помещается между тегом и тегом
  • Элемент </code> является обязательным и определяет название документа </li> <li> Элемент <code> <style> </code> используется для определить информацию о стиле для одного документа </li> <li> The <code> <ссылка> </code> тег чаще всего используется для ссылки на внешние таблицы стилей </li> <li> Элемент <code> <meta> </code> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документ и настройки области просмотра </li> <li> Элемент <code> <script> </code> используется для определения клиентских сценариев JavaScripts </li> <li> Элемент <code> <base> </code> определяет базовый URL-адрес и / или цель для всех относительных URL-адресов на странице </li> </ul> <hr/> <h3><span class="ez-toc-section" id="_HTML-9"> Элементы заголовка HTML </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> <br/> <br/> <h2><span class="ez-toc-section" id="HTML-17"> HTML-тег заголовка </span></h2> <br/> <h4><span class="ez-toc-section" id="i-28"> Пример </span></h4> <p> Простой HTML-документ с тегом <title> внутри раздела заголовка: </p> <br/> <br/> <br/> Название документа <br/> <p> <h2><span class="ez-toc-section" id="i-29"> Это заголовок </span></h2> <br/> <p> Это пункт.</p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <p> Дополнительные примеры "Попробуйте сами" ниже. </p> <hr/> <h3><span class="ez-toc-section" id="i-30"> Определение и использование </span></h3> <p> Элемент <code> <head> </code> - это контейнер для метаданные (данные о данных) и помещаются между тегом <html> и <body> тег. </p> <p> Метаданные - это данные об HTML-документе. Метаданные не отображаются. </p> <p> Метаданные обычно определяют заголовок документа, набор символов, стили, сценарии, и другая метаинформация.</p> <p> В элемент <code> <head> </code> могут входить следующие элементы: </p> <hr/> <h3><span class="ez-toc-section" id="i-31"> Поддержка браузера </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="i-32"> Глобальные атрибуты </span></h3> <p> Тег <code> <head> </code> также поддерживает глобальные атрибуты в HTML.</p> <hr/> <h3><span class="ez-toc-section" id="i-33"> Другие примеры </span></h3> <h4><span class="ez-toc-section" id="i-34"> Пример </span></h4> <p> Тег <base> (задает значение по умолчанию URL и цель для всех ссылок на странице) находятся внутри <head>: </p> <br/> <br/> <br/> <p> <img src = "images / stickman.gif" alt = "Stickman"> <br/> <a href="tags/tag_base.asp"> базовый тег HTML </a> </p> <p> </body> <br/> </html> </p> Попробуй сам " <h4><span class="ez-toc-section" id="i-35"> Пример </span></h4> <p> Тег <style> (добавляет информацию о стиле в страница) идет внутрь <head>: </p> <br/> <br/> <br/> h2 {цвет: красный;} <br/> p {цвет: синий;} <br/> <br/> <p> <h2><span class="ez-toc-section" id="i-36"> Заголовок </span></h2> <br/> <p> А пункт.</p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <h4><span class="ez-toc-section" id="i-37"> Пример </span></h4> <p> Тег <link> (ссылки на внешний стиль лист) идет внутрь <head>: </p> <br/> <br/> <br/> <p> <h2><span class="ez-toc-section" id="i-38"> Я отформатирован с помощью связанной таблицы стилей </span></h2> <br/> <p> Я тоже! </p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-39"> связанные страницы </span></h3> <p> Учебное пособие по HTML: заголовок HTML </p> <p> Ссылка на HTML DOM: объект головы </p> <hr/> <h3><span class="ez-toc-section" id="_CSS-2"> Настройки CSS по умолчанию </span></h3> <p> Большинство браузеров будут отображать элемент <code> <head> </code> со следующим значением по умолчанию значения: </p> <p> голова {<br/> дисплей: нет; <br/>} </p> <br/> <h2><span class="ez-toc-section" id="_HTML-10"> Что в голове? Метаданные в HTML - Изучите веб-разработку </span></h2> <p> Заголовок HTML-документа - это часть, которая не отображается в веб-браузере при загрузке страницы.Он содержит такую ​​информацию, как страница <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> <h2> </h2> </code>, который используется для добавления заголовка верхнего уровня к содержимому вашего тела - его также иногда называют заголовком страницы. Но это разные вещи! </p> <ul> <li> Элемент <code> <h2> </h2> </code> появляется на странице при загрузке в браузер - обычно его следует использовать один раз на страницу, чтобы разметить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или что-то еще подходящее. к вашему использованию.) </li> <li> Элемент <code> <title> </code> - это метаданные, которые представляют заголовок всего HTML-документа (а не его содержимое). </li> </ul> <h4><span class="ez-toc-section" id="i-40"> Активное обучение: изучение простого примера </span></h4> <ol> <li> Чтобы начать это активное обучение, мы хотели бы, чтобы вы зашли в наш репозиторий GitHub и загрузили копию нашей страницы title-example.html. Для этого либо <ol> <li> Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, а затем сохраните его в удобном месте.</li> <li> Нажмите кнопку «Raw» на странице GitHub, что приведет к появлению необработанного кода (возможно, в новой вкладке браузера). Затем выберите в браузере меню <em> Файл> Сохранить страницу как ... </em> и выберите подходящее место для сохранения файла. </li> </ol> </li> <li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого: <p> Теперь должно быть совершенно очевидно, где находится содержимое <code> <h2> </h2> </code>, а где - содержимое <code> <title> </code>! </p> </li> <li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.Повеселись с этим. </li> </ol> <p> Содержимое элемента <code> <title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Закладки> Закладка для этой страницы </em> или значок звездочки в строке URL в Firefox), вы увидите содержимое <code> <title> </code>, заполненное как предлагаемое имя закладки. </p> <p> </p> <p> Содержимое <code> <title> </code> также используется в результатах поиска, как вы увидите ниже. </p> <p> Метаданные - это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ - элемент <code> <meta> </code>.Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Есть много различных типов элементов <code> <meta> </code>, которые могут быть включены в <head> вашей страницы, но мы не будем пытаться объяснять их все на данном этапе, так как это будет слишком запутанно. Вместо этого мы объясним несколько вещей, которые вы обычно видите, просто чтобы дать вам представление. </p> <h4><span class="ez-toc-section" id="i-41"> Указание кодировки символов вашего документа </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> <p> <strong> Примечание </strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.Вы все равно должны установить кодировку <code> utf-8 </code> на своей странице, чтобы избежать любых потенциальных проблем в других браузерах. </p> <h4><span class="ez-toc-section" id="i-42"> Активное обучение: поэкспериментируйте с кодировкой символов </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="i-43"> Добавление автора и описания </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> Два таких метаэлемента, которые полезно включить на вашу страницу, определяют автора страницы и предоставляют краткое описание страницы. Давайте посмотрим на пример: </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="i-44"> Активное обучение: Использование описания в поисковых системах </span></h4> <p> Описание также используется на страницах результатов поисковых систем. Давайте рассмотрим упражнение, чтобы изучить этот </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> </p> </li> </ol> <p> <strong> Примечание </strong>: В Google вы увидите некоторые релевантные подстраницы веб-документов MDN, перечисленные под основной ссылкой на главную страницу - они называются дополнительными ссылками и настраиваются в инструментах Google для веб-мастеров - способ улучшить результаты поиска вашего сайта в Google. поисковый движок.</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="i-45"> Другие типы метаданных </span></h4> <p> Путешествуя по сети, вы найдете и другие типы метаданных. Многие функции, которые вы увидите на веб-сайтах, являются проприетарными разработками, разработанными для предоставления определенным сайтам (например, сайтам социальных сетей) определенной информации, которую они могут использовать. </p> <p> Например, Open Graph Data - это протокол метаданных, который Facebook изобрел для предоставления более обширных метаданных для веб-сайтов. В исходном коде 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> <p> Twitter также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например: </p> <pre> <code> <meta name = "twitter: title" content = "Mozilla Developer Network"> </code> </pre> <p> Чтобы еще больше обогатить дизайн своего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах. Чаще всего используется значок <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.ico" type = "image / x-icon"> </code> </pre> </li> </ol> <p> Вот пример значка на панели закладок: </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="_CSS_JavaScript"> Активное обучение: применение CSS и JavaScript к странице </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> </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="_-_HTML">: элемент метаданных документа (заголовок) - HTML: язык разметки гипертекста </span></h2> <p> Элемент <strong> HTML <code> <head> </code> </strong> содержит машиночитаемую информацию (метаданные) о документе, такую ​​как его заголовок, сценарии и таблицы стилей. </p> <p> <strong> Примечание: </strong> <code> <head> </code> в основном содержит информацию для машинной обработки, а не для чтения человеком. Для информации, видимой человеком, такой как заголовки верхнего уровня и перечисленные авторы, см. Элемент <code> <header> </code>.</p> <table> <tbody> <tr> <th scope="row"> Категории содержимого </th> <td> Нет. </td> </tr> <tr> <th scope="row"> Разрешенное содержание </th> <td> <p> Если документ представляет собой документ <code> <iframe> </code> <code> srcdoc </code> или информация о заголовке доступна из протокола более высокого уровня (например, строка темы в электронном письме в формате HTML), ноль или более элементов содержимого метаданных. </p> <p> В противном случае, один или несколько элементов содержимого метаданных, где ровно один является элементом <code> <title> </code>.</p> </td> </tr> <tr> <th scope="row"> Отсутствие тега </th> <td> Начальный тег может быть опущен, если первым делом внутри элемента <code> <head> </code> является элемент. <br/> Конечный тег может быть опущен, если первое, что следует за элементом <code> <head> </code>, не является пробелом или комментарием. </td> </tr> <tr> <th scope="row"> Допущенные родители </th> <td> Элемент <code> <html> </code> в качестве его первого дочернего элемента. </td> </tr> <tr> <th scope="row"> Неявная роль ARIA </th> <td> Без соответствующей роли </td> </tr> <tr> <th scope="row"> Разрешенные роли ARIA </th> <td> № <code> роль </code> разрешена </td> </tr> <tr> <th scope="row"> Интерфейс DOM </th> <td> <code> HTMLHeadElement </code> </td> </tr> </tbody> </table> <pre> <code> <! Doctype html> <html> <head> <title> Название документа

    Таблицы BCD загружаются только в браузере

    • Элементы, которые можно использовать внутри :

    Работа с элементами заголовка HTML

    В этом уроке вы узнаете о важности элементов головы.

    Элемент заголовка HTML

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

    Элементы заголовка в совокупности описывают свойства документа, такие как заголовок, предоставляют метаинформацию, такую ​​как набор символов, указывают браузеру, где найти таблицы стилей или сценарии, которые позволяют расширять HTML-документ высокоактивными и интерактивными способами.

    HTML-элементы, которые могут использоваться внутри элемента : </code>, <code> <base> </code>, <code> <link> </code>, <code> <style> </code>, <code> <meta> </code>, <code> < script> </code> и элемент <code> <noscript> </code>. </p> <h3><span class="ez-toc-section" id="_HTML-13"> Элемент заголовка HTML </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 для всех относительных ссылок, содержащихся в документе, например вы можете установить базовый URL-адрес один раз вверху страницы, а затем все последующие относительные ссылки будут использовать этот URL-адрес в качестве отправной точки.Вот пример:

      
    
    
         Определение базового URL 
        
    
    
        

    Заголовок HTML .

    Гиперссылка в приведенном выше примере фактически преобразуется в https: // www.tutorialrepublic.com/html-tutorial/html-head.php независимо от URL-адреса текущей страницы. Это связано с тем, что относительный URL-адрес, указанный в ссылке: html-tutorial / html-head.php , добавляется в конец базового URL-адреса: https://www.tutorialrepublic.com/ .

    Предупреждение: Элемент HTML должен появляться перед любым элементом, который ссылается на внешний ресурс.HTML допускает только один базовый элемент для каждого документа.


    Элемент ссылки HTML

    Элемент определяет отношения между текущим документом и внешними документами или ресурсами. Обычно элемент ссылки используется для ссылки на внешние таблицы стилей.

      
         Связывание таблиц стилей 
        
      

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

    Примечание: Элемент документа HTML может содержать любое количество элементов . Элемент имеет атрибуты, но не содержит содержимого.


    Элемент стиля HTML

    Элемент

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


    Мета-элемент HTML

    Элемент предоставляет метаданные о документе HTML. Метаданные - это набор данных, который описывает и предоставляет информацию о других данных. Вот пример:

      
         Указание метаданных 
        
        
      

    Более подробно метаэлемент будет объяснен в следующей главе.


    Элемент сценария HTML

    Элемент

    Элементы script и noscript будут подробно объяснены в следующей главе.

    HTML-тег - использование, атрибуты, примеры

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

    включает в себя следующие элементы:

    • Тег определяет заголовок веб-страницы (обязательно). Его можно спутать с тегом <h2><span class="ez-toc-section" id="i-46">, но они разные. Тег </span></h2><h2><span class="ez-toc-section" id="_HTML_CSS_HTML_URL-_URL-_HTML_rel_stylesheet_href_HTML_name_content_JavaScript_HTML-_d3d3d3_1c87c9_a_HTML-_stylecss_CSS_HTML-_-_-_-_HEAD_-_HTML"> определяет заголовок содержимого страницы, тогда как тег <title> представляет собой метаданные, представляющие заголовок всего содержимого HTML, а не его содержимое. </li> <li> Тег <style> содержит код CSS, который определяет, как элементы HTML должны отображаться в браузере.</li> <li> Тег <base> определяет абсолютный (базовый) URL-адрес для всех относительных URL-адресов. </li> <li> Тег <link> определяет отношения между текущим документом HTML и ресурсом, на который он ссылается, или содержит ссылку на внешнюю таблицу стилей. Он может иметь два атрибута: rel = "stylesheet" и href. </li> <li> Тег <meta> предоставляет дополнительную информацию (метаданные) о документе HTML. <head> страницы может включать в себя различные типы элементов <meta>, которые могут содержать атрибуты name и content.</li> <li> Тег <script> содержит сценарий (обычно JavaScript) или ссылку на внешний файл со сценариями. Этот элемент не может быть включен в <head>. Иногда лучше поместить его внизу <body>. Элемент <script> может показаться пустым, но это не так. </li> <li> Тег <noscript> определяет альтернативный текст, который отображается, если браузер не поддерживает сценарии или сценарии отключены пользователем. </li> </ul> <h3> Синтаксис¶ </h3> <p> Тег <head> состоит из пар.Контент записывается между открывающим (<head>) и закрывающим (</head>) тегами. </p> <h4> Пример HTML-тега </h4><head>, используемого с тегами <title> и <style>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа <стиль> тело{ цвет фона: # d3d3d3; } п{ цвет: # 1c87c9; } a { красный цвет; }

      Абзац

      Ссылка
      Попробуйте сами »

      В данном примере тег используется с тегами и <style>.Тег <title> определяет заголовок документа, который отображается в окне браузера. В теге <style> определяется стиль документа: фон документа оранжевый, текст в абзацах, отмеченных тегом <p>, синий, а ссылки в теге <a> розовые. </p> <h4> Пример HTML-тега </h4><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> Попробуйте сами » <h4> Результат¶ </h4> <p> В этом примере мы предоставили ссылку на документ style.css в папке CSS. </p> <h4> Пример HTML-тега </h4><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> Тег <meta> содержит метаданные для поисковых систем - мета-заголовок, мета-описание.</p> <h3> Атрибуты¶ </h3> <p> Тег <head> поддерживает глобальные атрибуты и атрибуты событий. </p> <h2><span class="ez-toc-section" id="_HTML_CSS_HTML_URL-_URL-_HTML_rel_stylesheet_href_HTML_name_content_JavaScript_HTML-_d3d3d3_1c87c9_a_HTML-_stylecss_CSS_HTML-_-_-_-_HEAD_-_HTML"> 🤯 HEAD - Простое руководство по элементам HTML </span></h2> <blockquote> <p> Простое руководство по HTML <code> <head> </code> элементов </p> </blockquote> <p> </p> <h3><span class="ez-toc-section" id="i-47"> Содержание </span></h3> <h3><span class="ez-toc-section" id="i-48"> Рекомендуемый минимум </span></h3> <p> Ниже приведены основные элементы любого веб-документа (веб-сайтов / приложений): </p> <pre> <code> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Приведенные выше 2 метатега * должны * быть первыми в <head> для постоянного обеспечения надлежащего рендеринга документа.Любой другой элемент заголовка должен стоять * после * этих тегов. -> <title> Заголовок страницы

      мета-кодировка - определяет кодировку веб-сайта, utf-8 - стандарт

      meta name = "viewport" - настройки области просмотра, связанные с отзывчивостью мобильных устройств.

      width = device-width - используйте физическую ширину устройства (отлично подходит для мобильных устройств!)

      initial-scale = 1 - начальное масштабирование, 1 означает отсутствие масштабирования

      ⬆ наверх

      Элементы

      Допустимые элементы включают мета , ссылку , заголовок , стиль , скрипт , noscript и base .

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

        
      
      
      
       Заголовок страницы 
      
      
      
      
      
      
      
      
      <стиль>
        / * ... * /
      
      
      
      
      <сценарий>
        // функция (ы) идут сюда
      
      
        

      ⬆ наверх

        
        для постоянного обеспечения надлежащего рендеринга документа.Любой другой элемент заголовка должен стоять * после * этих тегов.
      ->
      
      
      
      , как тег
        применяется только к ресурсам, объявленным после него.
      ->
      
      
      
      
      
      
      
      
      
      
      
      
      
       
       
      
      
      
      
      
      
      
      
       
       
       
       
       
       
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
       
       
      
      
      
        

      ⬆ наверх

      Ссылка

        
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        

      ⬆ наверх

      Иконки

        
      
      
      
      
      
      
      
      
      
      
        

      ⬆ наверх

      Социальные сети

      Facebook Открыть график

      Большая часть контента передается в Facebook в виде URL-адреса, поэтому важно, чтобы вы разметили свой веб-сайт с помощью тегов Open Graph, чтобы контролировать то, как ваш контент отображается на Facebook.Подробнее о Facebook Open Graph Markup

        
      
      
      
      
      
      
      
      
      
        

      Твиттер-карта

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

        
      
      
      
      
      
      
      
        

      Конфиденциальность в Twitter

      Если вы встраиваете твиты на свой веб-сайт, Twitter может использовать информацию с вашего сайта, чтобы адаптировать контент и предложения для пользователей Twitter. Подробнее о параметрах конфиденциальности Twitter.

        
      
        

      Схема.org

        
          
            
            
            
            
            
        

      Примечание: Эти метатеги требуют добавления атрибутов itemscope и itemtype в тег .

      Pinterest

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

        
        

      Facebook Мгновенные статьи

        
      
      
      
      
      
      
      
        

      OEmbed

        
      
        

      QQ / Wechat

      Пользователи делятся веб-страницами с qq WeChat будет иметь форматированное сообщение

        
      
      
        

      ⬆ наверх

      Браузеры / платформы

      Apple iOS

        
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        

      Google Android

        
      
      
      
      
      
      
      
      
        

      Google Chrome

        
      
      
      
        

      Microsoft Internet Explorer

        
      
      
      
      
      
      
      
        

      Минимальная необходимая разметка xml для browserconfig.xml :

        
      
         
           
              
              
              
              
           
         
      
        

      ⬆ наверх

      Браузеры (китайские)

      360 Браузер

        
      
        

      Мобильный браузер QQ

        
      
      
      
      
      
      
      
        

      Мобильный браузер UC

        
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        

      ⬆ наверх

      Ссылки на приложения

        
      
      
      
      
      
      
      
      
      
      
      
        

      ⬆ наверх

      Прочие ресурсы

      ⬆ наверх

      ⬆ наверх

      Другие форматы

      ⬆ наверх

      🌐 Переводы

      ⬆ наверх

      🤝 Содействовали

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

      Направляющая

      Репозиторий HEAD состоит из двух веток:

      1.
      мастер

      Эта ветвь состоит из файла README.md , который отражен на веб-сайте htmlhead.dev. Все изменения в содержании руководства должны вноситься в этот файл.

      Выполните следующие действия для запросов на вытягивание:

      • Изменить только один тег или один связанный набор тегов за раз
      • Используйте двойные кавычки для атрибутов
      • Не включайте завершающую косую черту в самозакрывающиеся элементы - в спецификации HTML5 указано, что они не обязательны.
      • Рассмотрите возможность включения ссылки на документацию, которая поддерживает ваше изменение
      2.
      gh-страниц

      Эта ветка отвечает за сайт htmlhead.dev. Мы используем Jekyll для развертывания файла разметки README.md на страницах GitHub. Все изменения, связанные с сайтом, должны производиться в этой ветке.

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

      🌟 Авторы

      Оцените всех супер классных авторов

      👤 Автор

      Джош Бучи

      💛 Поддержка

      Если этот проект был полезен для вас или вашей организации, пожалуйста, подумайте о поддержке моей работы напрямую:

      Все помогает, спасибо! 🙏

      - Джош

      📝 Лицензия

      ⬆ наверх

      .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *