Posted:
Дек 21, 2022
Comments:
0 Comments

Html описание тегов: Список HTML тегов на одной странице. Справочник по тегам HTML5

Список HTML тегов на одной странице. Справочник по тегам HTML5

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

Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.











































































































ТегКраткое описание
<!—…—>Комментарий. Подробнее
<!DOCTYPE>Определяет тип документа. Подробнее
<a>Ссылка, гиперссылка, якорь. Подробнее
<abbr>Определяет текст как аббревиатуру. Подробнее
<address>Контактная информация автора или владельца документа. Подробнее
<area>Определяет область на карте-изображении
<article>Статья
<aside>Контент в стороне (содержимое не является основным на странице по смыслу)
<audio>Позволяет вставить воспроизводимый аудио файл. Подробнее
<b>Полужирный текст. Подробнее
<base>Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее
<bdi>Область, где написание текста может имееть другое направления. Подробнее
<bdo>Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее
<blockquote>Цитата. Подробнее
<body>Указывает область body документа. Подробнее
<br>Перенос строки. Подробнее
<button>Кликабельная кнопка. Подробнее
<canvas>Используется для рисовании графики с помощью скриптов
<caption>Подпись таблицы. Подробнее
<cite>Сноска на название материала. Подробнее
<code>Используется для вставки компьютерного кода в текстовом виде. Подробнее
<col>Задает характеристики колонок в таблице. Подробнее
<colgroup>Определяет группу из одной или более колонок таблицы для форматирования. Подробнее
<datalist>Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее
<dd>Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее
<del>Текст, который удален в новой версии документа. Подробнее
<details>Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее
<dfn>Указывает, что содержимое является термином. Подробнее
<dialog>Определяет диалоговое окно или интерактивный элемент
<div>Блочный элемент — один из основных элементов верстки. Подробнее
<dl>Определяет список определений. Подробнее
<dt>Название термина в списке определений <dl>. Подробнее
<em>выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее
<embed>Контейнер для внешнего приложения
<fieldset>Группа связанных элементов в форме. Подробнее
<figcaption>Заголовок для <figure> элемента
<figure>Определяет автономную группу из нескольких элементов (например картинка с подписью)
<footer>Нижний колонтитул
<form>Определяет форму пользовательского ввода. Подробнее
<h2> — <h6>Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее
<head>Указывает область head документа. Подробнее
<header>Блок заголовка
<hr>Горизонтальная линия — тематический разделитель. Подробнее
<html>Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее
<i>Выделяет текст курсивом. Подробнее
<iframe>Определяет встроенный фрейм
<img>Изображение, картинка. Подробнее
<input>Поле для ввода, элемент формы. Подробнее
<ins>Текст, который был добавлен в новой версии документа. Подробнее
<kbd>Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее
<label>Метка для поля ввода. Обычно содержит подпись поля. Подробнее
<legend>Заголовок элементов <fieldset>. Подробнее
<li>Элемент списка. Подробнее
<link>Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее
<main>Основной контент
<map>Контейнер для <area>. Определяет пользовательскую карту на изображении
<mark>Выделенный текст (обычно с помощью подсветки фона). Подробнее
<menu>Контейнер для списка пунктов меню
<menuitem>Определяет элементы, которые пользователь может вызвать из контекстного меню
<meta>Используется для определения мета-данных документа. Подробнее
<meter>Измеритель значений в заданном диапазоне
<nav>Контейнер для навигационных элементов
<noscript>Альтернативный контент для пользователей, отключивших скрипты
<object>Определяет встроенный объект
<ol>Определяет нумерованный список. Подробнее
<optgroup>Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее
<option>Параметр (вариант выбора) в выпадающем списке. Подробнее
<output>Результат вычислений. Подробнее
<p>Абзац. Подробнее
<param>Задает параметры для встроенных объектов
<picture>Контейнер для нескольких изображений
<pre>Предварительно отформатированный текст. Подробнее
<progress>Индикатор выполнения (прогресса)
<q>Цитата в тексте. Подробнее
<rp>Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее
<rt>Аннотация к содержимому тега <ruby>. Подробнее
<ruby>Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее
<s>Перечеркнутый текст. Подробнее
<samp>Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее
<script>Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее
<section>Раздел
<select>Определяет выпадающий список или список с множественным выбором. Подробнее
<small>Текст шрифтом меньшего размера. Подробнее
<source>Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее
<span>Строчный элемент. Подробнее
<strong>Текст, выделенный по значению. Обычно отображается полужирным. Подробнее
<style>Определяет контейнер для определения CSS стилей документа. Подробнее
<sub>Отображает текст в виде нижнего индекса. Подробнее
<summary>Заголовок внутри тега <details>. Подробнее
<sup>Отображает текст в виде верхнего индекса. Подробнее
<table>Определяет таблицу. Подробнее
<tbody>Определяет область контента в таблице. Подробнее
<td>Ячейка в таблице <table>. Подробнее
<textarea>Многострочное поле для ввода. Подробнее
<tfoot>Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее
<th>Ячейка — заголовок в таблице <table>. Подробнее
<thead>Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее
<time>Дата и/или время. Подробнее
<title>Заголовок HTML документа. Подробнее
<tr>Определяет строку в таблице. Подробнее
<track>Определяет текстовую дорожку для тегов <video> и <audio> Подробнее
<ul>Определяет маркированный список. Подробнее
<var>Используется для обозначения содержимого тега как переменной. Подробнее
<video>Позволяет вставить воспроизводимое видео. Подробнее
<wbr>Место, где допускается перенос строки. Подробнее


Устаревшие теги HTML

Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.















ТегКраткое описание
<acronym>Акроним. Используйте тег <abbr> вместо него. Подробнее
<applet>Встроенный апплет. Используйте <embed> или <object> вместо него. Подробнее
<basefont>Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте каскадные таблицы стилей CSS вместо него. Подробнее
<big>Текст большего размера. Используйте каскадные таблицы стилей CSS вместо него. Подробнее
<center>Отцентрованный текст. Используйте каскадные таблицы стилей CSS вместо него. Подробнее
<dir>Список директорий. Используйте <ul> вместо него. Подробнее
<font>Определяет цвет, размер и семейство шрифта. Используйте каскадные таблицы стилей CSS вместо него. Подробнее
<frame>Фрейм внутри <frameset>. Используйте <iframe> вместо него
<frameset>Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько <iframe> элементов
<noframes>Альтернативный текст, если фреймы <frame> не поддерживаются
<strike>Перечеркнутый текст. Используйте <del> или <s> вместо него
<tt>Моноширинный текст. Используйте каскадные таблицы стилей CSS вместо него
<u>Подчеркнутый текст. Используйте каскадные таблицы стилей CSS вместо него

HTML 5 Справочник всех тегов онлайн и примеры

❮ Главная
Дальше ❯

= Новое в HTML5.

ТегОписание
<!—…—>Определяет комментарий
<!DOCTYPE> Определяет тип документа
<a>Определяет гиперссылку
<abbr>Определяет аббревиатуру или акроним
<acronym>Не поддерживается в HTML5. Использовать <abbr> Вместо.
Определяет акроним
<address>Определяет контактные данные автора/владельца документа
<applet>Не поддерживается в HTML5. Использовать <embed> or <object> Вместо.
Определяет встроенный апплет
<area>Определяет область внутри изображения-карты
<article>Определяет статью
<aside>Определяет содержание в стороне от содержимого страницы
<audio>Определяет звуковое содержимое
<b>Определяет полужирный текст
<base>Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>Не поддерживается в HTML5. Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi>Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>Переопределяет текущее направление текста
<big>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<blockquote>Определяет раздел, который цитируется из другого источника
<body>Определяет тело документа
<br>Определяет один разрыв строки
<button>Определяет нажатую кнопку
<canvas>Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption>Определяет заголовок таблицы
<center>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<cite>Определяет название работы
<code>Определяет часть кода компьютера
<col>Задает свойства столбца для каждого столбца в <colgroup> element 
<colgroup>Задает группу из одного или нескольких столбцов в таблице для форматирования
<data>Связывает данное содержимое с машинно-читаемым переводом
<datalist>Задает список предварительно заданных параметров для элементов управления вводом
<dd>Определяет описание/значение термина в списке описания
<del>Определяет текст, который был удален из документа
<details>Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn>Представляет определяющий экземпляр термина
<dialog>Определяет диалоговое окно или окно
<dir>Не поддерживается в HTML5. Использовать <ul> Вместо.
Определяет список каталогов
<div>Определяет раздел в документе
<dl>Определяет список описания
<dt>Определяет термин/имя в списке описания
<em>Определяет подчеркнутый текст 
<embed>Определяет контейнер для внешнего (не HTML) приложения
<fieldset>Группирует связанные элементы в форме
<figcaption>Определяет заголовок для <figure> Элемент
<figure>Указывает автономное содержимое
<font>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<footer>Определяет нижний колонтитул для документа или раздела
<form>Определяет HTML-форму для ввода данных пользователем
<frame>Не поддерживается в HTML5.
Определяет окно (фрейм) в фрейме
<frameset>Не поддерживается в HTML5.
Определяет набор фреймов
<h2> to <h6>Определяет заголовки HTML
<head>Определяет сведения о документе
<header>Определяет заголовок документа или раздела
<hr> Определяет тематическое изменение содержания
<html>Определяет корень HTML-документа
<i>Определяет часть текста в альтернативный голос или настроение
<iframe>Определяет встроенный фрейм
<img>Определяет изображение
<input>Определяет элемент управления вводом
<ins>Определяет текст, вставленный в документ
<kbd>Определяет ввод с клавиатуры
<label>Определяет метку для <input> Элемент
<legend>Определяет заголовок для <fieldset> Элемент
<li>Определяет элемент списка
<link>Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main>Указывает основное содержимое документа
<map>Определяет изображение на стороне клиента-Map
<mark>Определяет выделенный/выделенный текст
<menu>Определяет список/меню команд
<menuitem>Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta>Определяет метаданные HTML-документа
<meter>Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav>Определяет навигационные ссылки
<noframes>Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript>Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object>Определяет внедренный объект
<ol>Определяет упорядоченный список
<optgroup>Определяет группу связанных параметров в раскрывающемся списке
<option>Определяет параметр в раскрывающемся списке
<output>Определяет результат вычисления
<p>Определяет абзац
<param>Определяет параметр для объекта
<picture>Определяет контейнер для нескольких ресурсов изображения
<pre>Определяет предварительно отформатированный текст
<progress>Представляет ход выполнения задачи
<q>Определяет краткое предложение
<rp>Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>Определяет текст, который больше не является правильным
<samp>Определяет выборку выходных данных из компьютерной программы
<script>Определяет сценарий на стороне клиента
<section>Определяет раздел в документе
<select>Определяет раскрывающийся список
<small>Определяет меньший текст
<source>Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span>Определяет раздел в документе
<strike>Не поддерживается в HTML5. Использовать <del> или <s> Вместо.
Определяет текст зачеркивания
<strong>Определяет важный текст
<style>Определяет сведения о стиле для документа
<sub>Определяет текст с подстрочным текстом
<summary>Определяет видимый заголовок для <details> Элемента
<sup>Определяет текст с надписью
<svg>Определяет контейнер для графики SVG
<table>Определяет таблицу
<tbody>Группирует содержимое тела в таблице
<td>Определяет ячейку в таблице
<template>Определяет шаблон
<textarea>Определяет многострочный элемент управления вводом (область текста)
<tfoot>Группирует содержимое нижнего колонтитула в таблице
<th>Определяет ячейку заголовка в таблице
<thead>Группирует содержимое заголовка в таблице
<time>Определяет дату и время
<title>Определяет заголовок документа
<tr>Определяет строку в таблице
<track>Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет телетайп текст
<u>Определяет текст, который должен быть стилистически отличается от обычного текста
<ul>Определяет неупорядоченный список
<var>Определяет переменную
<video>Определяет видео или фильм
<wbr>Определяет возможный разрыв строки

❮ Главная
Дальше ❯

Тег HTML dl

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Список описаний с терминами и описаниями:

Кофе

  

Черный горячий напиток

Молоко

  

Белый холодный напиток

Попробуйте сами »

Определение и использование

Тег

определяет список описания.

Тег

используется в сочетании с

(определяет
термины/имена) и

(описывает каждый термин/имя).

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

Элемент
<дл> Да Да Да Да Да

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Связанные страницы

Руководство по HTML: Списки HTML

Справочник по HTML DOM: Объект DList

Настройки по умолчанию

Большинство браузеров отображают элемент

Пример 9005 CSS со следующими значениями по умолчанию3:

6

dl {
  display: block;
  Верхнее поле: 1em;
 нижнее поле: 1em;
  левое поле: 0;
 правое поле: 0;
}

Попробуйте сами »

❮ Предыдущая
Полный справочник HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top1 Examples
Примеры HTML

Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Что в голове? Метаданные в HTML — Изучите веб-разработку

  • Предыдущий

    • Обзор

  • : введение в HTML
  • Следующий

Заголовок HTML-документа — это часть, которая не отображается в веб-браузере при загрузке страницы. Он содержит такую ​​информацию, как страница </code> , ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на пользовательские значки и другие метаданные (данные о HTML, такие как автор и важные ключевые слова, описывающие документ). Веб-браузеры используют информацию, содержащуюся в заголовке, для правильного отображения HTML-документа. В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/1/4/7/147a53d48f962c288ab7defe11146e6c.png' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/1/4/7/147a53d48f962c288ab7defe11146e6c.png' /></noscript></p><table><tbody><tr><th scope="row"> Предпосылки:</th><td> Базовое знакомство с HTML, как описано в<br /> Начало работы с HTML.</td></tr><tr><th scope="row"> Цель:</th><td> Чтобы узнать о заголовке HTML, его назначении, наиболее важных элементах,<br /> может содержать и какое влияние это может оказать на HTML-документ.</td></tr></tbody></table><p> Давайте вернемся к простому HTML-документу, который мы рассмотрели в предыдущей статье:</p><pre> <!ДОКТИП HTML> <html lang="en-US"> <голова> <метакодировка="utf-8" /> <title>Моя тестовая страница <тело>

Это моя страница

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

 <голова>
  <метакодировка="utf-8" />
  Моя тестовая страница

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

Мы уже видели элемент </code> в действии — его можно использовать для добавления заголовка к документу. Однако его можно спутать с элементом <code></p><h2></h2><p></code>, который используется для добавления заголовка верхнего уровня к основному содержимому — его также иногда называют заголовком страницы. Но это разные вещи!</p><ul><li> Элемент <code><br /><h2></h2><p></code> появляется на странице при загрузке в браузере — обычно его следует использовать один раз на странице, чтобы разметить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или что-то еще).<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/4b/0f/55/4b0f55185c49e10842041dc30bfbfcf6--design-social-design-digital.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/4b/0f/55/4b0f55185c49e10842041dc30bfbfcf6--design-social-design-digital.jpg' /></noscript> подходит для вашего использования.)</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> «Сохранить страницу как… </em>» вашего браузера и выберите подходящее место для сохранения файла.</li></ol></li><li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого:</p><p> Теперь должно быть совершенно очевидно, где появляется содержимое <code></p><h2></h2><p></code> и где появляется содержимое <code><title> </code>!</li><li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/4/8b495a4edf565ebd979b1fb4ef0f97ee.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/4/8b495a4edf565ebd979b1fb4ef0f97ee.jpeg' /></noscript> Повеселитесь с этим.</li></ol><p> Содержимое элемента <code><title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Bookmarks > Bookmark This Page </em> или значок звездочки в адресной строке в Firefox), вы увидите содержимое <code><title> </code>, заполненное в качестве предлагаемого имени закладки.</p></p><p> Содержимое <code><title> </code> также используется в результатах поиска, как вы увидите ниже.</p><p> Метаданные — это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ — элемент <code><meta> </code>. Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Существует множество различных типов элементов <code><meta> </code>, которые можно включить в<head> вашей страницы, но мы не будем пытаться объяснить их все на данном этапе, так как это может слишком запутать. Вместо этого мы объясним несколько вещей, которые вы можете часто видеть, просто чтобы дать вам представление.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/7/8/07824c3a10ddb278da83d5a82d464906.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/7/8/07824c3a10ddb278da83d5a82d464906.jpeg' /></noscript></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> <meta charset="utf-8" /> </pre><p> Этот элемент указывает кодировку символов документа — набор символов, который разрешено использовать документу. <code> utf-8 </code> — это универсальный набор символов, который включает практически любой символ любого человеческого языка. Это означает, что ваша веб-страница сможет отображать любой язык; поэтому рекомендуется устанавливать это на каждой веб-странице, которую вы создаете! Например, ваша страница прекрасно справляется с английским и японским языками:</p><p> Если вы установите кодировку символов, например, <code> ISO-8859-1 </code> (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть совершенно испорченным:</p></p><p> <strong> Примечание: </strong> Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/2/5928d21c35602b72093e1300099632b3.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/2/5928d21c35602b72093e1300099632b3.jpeg' /></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> <p>Пример на японском языке: ご飯が熱い。</p> </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> имя </code> и <code> содержимое </code> атрибуты:</p><ul><li> <code> имя </code> определяет тип метаэлемента; какой тип информации он содержит.</li><li> <code> content </code> указывает фактический метаконтент.</li></ul><p> Два таких метаэлемента, которые полезно включить на страницу, определяют автора страницы и дают краткое описание страницы.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/6/b266812776742c61d259d7e1c1a1d7b4.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/6/b266812776742c61d259d7e1c1a1d7b4.jpeg' /></noscript> Рассмотрим пример:</p><pre> <meta name="author" content="Chris Mills" /> <мета имя = "описание" content="Область обучения MDN Web Docs направлена ​​на предоставление полные новички в Интернете со всем, что им нужно знать, чтобы получить начал с разработки веб-сайтов и приложений." /> </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" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/8/8/8882ba6073d3055ce0ccc07872a8b1a4.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/8/8/8882ba6073d3055ce0ccc07872a8b1a4.jpeg' /></noscript> Давайте выполним упражнение, чтобы изучить этот</p><ol><li> Перейдите на главную страницу The Mozilla Developer Network.</li><li> Просмотр источника страницы (щелкните правой кнопкой мыши страницу, выберите <em> Просмотр источника страницы </em> в контекстном меню.)</li><li> Найти метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться):<pre> <мета имя = "описание" content="Сайт веб-документов MDN предоставляет информацию об открытых веб-технологиях включая HTML, CSS и API для веб-сайтов и прогрессивные веб-приложения." /> </pre></li><li> Теперь поищите «MDN Web Docs» в своей любимой поисковой системе (мы использовали Google). Вы заметите описание <code><meta> </code> и <code><title> </code> элементов содержимого, используемых в результатах поиска — определенно стоит иметь!</p></li></ol><p> <strong> Примечание: </strong> В Google вы увидите некоторые релевантные подстраницы веб-документов MDN, перечисленные под ссылкой на главную страницу — они называются дополнительными ссылками и настраиваются в инструментах Google для веб-мастеров — это способ улучшить результаты поиска вашего сайта в поиске Google.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/1/7/c/17c9a3931f09df640cb99a2ac3694653.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/7/c/17c9a3931f09df640cb99a2ac3694653.jpeg' /></noscript> двигатель.</p><p> <strong> Примечание: </strong> Многие функции <code><meta> </code> больше не используются. Например, элемент ключевого слова <code><meta> </code> ( <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" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf3.ppt-online.org/files3/slide/h/HQ9diZlwfrnRU50Lo8tPhxkpOzYMDWVSCJTBcv/slide-0.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf3.ppt-online.org/files3/slide/h/HQ9diZlwfrnRU50Lo8tPhxkpOzYMDWVSCJTBcv/slide-0.jpg' /></noscript> В исходном коде веб-документов MDN вы найдете следующее:</p><pre> <meta свойство = «ог: изображение» content="https://developer.mozilla.org/static/img/opengraph-logo.png" /> <мета свойство = «ог: описание» content="Сеть разработчиков Mozilla (MDN) предоставляет информация об открытых веб-технологиях, включая HTML, CSS и API для обоих веб-сайтов. и HTML-приложения." /> <meta property="og:title" content="Сеть разработчиков Mozilla" /> </pre><p> Одним из последствий этого является то, что когда вы ссылаетесь на веб-документы MDN на Facebook, ссылка появляется вместе с изображением и описанием: более удобный интерфейс для пользователей.</p></p><p> Твиттер также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например:</p><pre> <meta name="twitter:title" content="Mozilla Developer Network" /> </pre><p> Чтобы еще больше обогатить дизайн вашего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/b/b/0bbac2e9d7764135a50748cde906a423.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/b/b/0bbac2e9d7764135a50748cde906a423.jpeg' /></noscript> Чаще всего используется 9.0280 favicon </strong> (сокращение от «значок избранного», относящееся к его использованию в списках «избранное» или «закладки» в браузерах).</p><p> Скромный фавикон существует уже много лет. Это первая иконка такого типа: 16-пиксельная квадратная иконка, используемая в нескольких местах. Вы можете увидеть (в зависимости от браузера) значки избранного, отображаемые на вкладке браузера, содержащей каждую открытую страницу, и рядом со страницами, отмеченными закладками, на панели закладок.</p><p> Фавикон можно добавить на вашу страницу следующим образом:</p><ol><li> Сохранив его в том же каталоге, что и главная страница сайта, сохраненную в <code> Формат .ico </code> (большинство также поддерживает значки избранного в более распространенных форматах, таких как <code> .gif </code> или <code> .png </code> )</li><li> Добавление следующей строки в блок HTML <code><head> </code> для ссылки на него:<pre> <link rel="icon" href="favicon.ico" type="image/x-icon" /> </pre></li></ol><p> Вот пример фавикона в панели закладок:</p></p><p> В наши дни есть много других типов значков.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files1/slide/h/htxMypP0jgd3wAnfaQTbEJGDIcmsUkuYSNviqH65XR/slide-17.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/h/htxMypP0jgd3wAnfaQTbEJGDIcmsUkuYSNviqH65XR/slide-17.jpg' /></noscript> Например, вы найдете это в исходном коде домашней страницы MDN Web Docs:</p><pre> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon144.png" /> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png" /> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png" /> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <ссылка отн = "значок" href="https://developer.mozilla.org/static/img/favicon32.png" /> </pre><p> Комментарии объясняют, для чего используется каждый значок — эти элементы охватывают такие вещи, как предоставление хорошего значка с высоким разрешением для использования при сохранении веб-сайта на главном экране iPad.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image1.slideserve.com/3575582/slide2-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image1.slideserve.com/3575582/slide2-l.jpg' /></noscript></p><p> Не беспокойтесь о внедрении всех этих типов значков прямо сейчас — это довольно продвинутая функция, и вам не нужно знать об этом, чтобы продвигаться по курсу. Основная цель здесь — сообщить вам, что это такое, на случай, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов.</p><p> <strong> Примечание: </strong> Если ваш сайт использует политику безопасности контента (CSP) для повышения безопасности, эта политика применяется к фавиконам. Если вы столкнулись с проблемами, когда фавикон не загружается, убедитесь, что директива <code> img-src </code> заголовка <code> Content-Security-Policy </code> не препятствует доступу к нему.</p><p> Почти все веб-сайты, которые вы будете использовать в наши дни, будут использовать CSS, чтобы придать им крутой вид, и JavaScript для поддержки интерактивных функций, таких как видеоплееры, карты, игры и многое другое. Они чаще всего применяются к веб-странице с использованием 9Элемент 0022<link> </code> и элемент <code> <script></code>соответственно.<img class="lazy lazy-hidden"loading='lazy'src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/prezentacii.org/upload/cloud/19/01/111577/images/screen4.jpg'/><noscript><img loading='lazy'src='/800/600/http/prezentacii.org/upload/cloud/19/01/111577/images/screen4.jpg'/></noscript></p><ul><li>Элемент<code><link></code>всегда должен находиться внутри заголовка вашего документа.Он принимает два атрибута:<code>rel="stylesheet"</code>,который указывает,что это таблица стилей документа,и<code>href</code>,который содержит путь к файлу таблицы стилей:<pre><link rel="stylesheet"href="my-css-file.css"/></pre></li><li><code><сценарий>9Элемент 0023 также должен находиться в голове и включать атрибут<code>src</code>,содержащий путь к JavaScript,который вы хотите загрузить,и<code>defer</code>,который в основном указывает браузеру загружать JavaScript после того,как страница завершила анализ HTML..Это полезно,так как гарантирует,что весь HTML-код будет загружен до запуска JavaScript,поэтому вы не получите ошибок,возникающих из-за того,что JavaScript пытается получить доступ к HTML-элементу,которого еще нет на странице.На самом деле существует несколько способов обработки загрузки JavaScript на вашей странице,но это самый надежный способ использования для современных браузеров(для других см.<img class="lazy lazy-hidden"loading='lazy'src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/b/59bc07cab56ad3f9a996de9c44a98932.jpeg'/><noscript><img loading='lazy'src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/b/59bc07cab56ad3f9a996de9c44a98932.jpeg'/></noscript>Стратегии загрузки скриптов).<pre><script src="my-js-file.js"отсрочка></script> </pre><p> <strong> Примечание: </strong> Элемент <code> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://consei.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://consei.ru/wp-content/cache/autoptimize/js/autoptimize_3aa3f4eee099f2ae4825514f384a8d8e.js"></script></body></html>