HTML теги — справочник с примерами и описанием команд
В этом справочнике мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов.
Вы узнаете, что это такое и для чего нужно.
Также на примерах я покажу как это все используется.
Содержание:
- Что это такое
- Виды
- Основные элементы
- Справочник:
- Основной контейнер
- Служебные
- Коды для текста
- Таблицы
- Изображения
- Списки
- Гиперссылки
- Встроенный контент
- Для группировки
- Формы
Что такое html теги
HTML тег — это специальный код (элемент или команда), который указывает браузеру, как интерпретировать документ для пользователя.
Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.
С помощью таких команд мы общаемся с браузером и как бы программируем его действия.
Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.
Между угловыми скобками обязательно должны присутствовать кодовые слова.
Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.
Например, выделение текста жирным:
<b>Жирный текст</b>
Ниже мы еще к этому вернемся.
Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.
Однако стандарт подразумевает писать их в нижнем регистре.
У тега могут быть атрибуты.
Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.
К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.
<a href="https://site.ru">Текст ссылки</a>
Виды хтмл тегов
Все хтмл теги подразделяются на два вида:
- Одиночные
- Парные
Парные имеют открывающий и закрывающий тег.
Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.
К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца.
Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.
<p>Пример небольшого текстового абзаца</p>
Обратите внимание!
К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда. В данном примере конец абзаца.
Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.
Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным.
Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.
<p><b>Пример</b> небольшого текстового абзаца</p>Наглядный пример выделения
Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.
Одиночные состоят из одного тега. Например, <hr>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.
<br> <!-- перенос строки --> <hr> <!-- разделитель --> <input type="text"> <!-- поле ввода --> <img src="logo.png"> <!-- вывод изображения -->
Основные html теги
Сейчас затронем основные html теги, которые имеют важную роль среди остальных элементов. Такие команды обязательно должны присутствовать на каждой странице.
Вот они:
- doctype
- html
- head
- body
Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.
Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий).
Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.
Head содержит в себе служебные теги. Они предназначены для работы поисковых систем и браузеров.
Обычно эта информация не видна пользователю.
Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.
Вот так выглядит скелет любой html-страницы:
<!doctype html> <html> <head> </head> <body> </body> </html>
Справочник HTML
Здесь расположен справочник html тегов. Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документа.
Все теги имеют описание. А при переходе по ссылке, можно более подробно узнать о данном элементе. Там вы увидите подробные определения и примеры использования.
Тег HTML
О нем говорили выше. Это главный контейнер, который содержит почти все элементы страницы. Закрывающая его часть всегда должна идти в самом конце документа.
Имя | Описание | Значение свойства display |
---|---|---|
<html></html> | корневой элемент html-документа | block |
Служебные
Служебные теги предназначены для поисковых систем и браузеров.
Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.
Имя | Описание | Значение свойства display |
---|---|---|
<!—…—> | комментарий | none |
<!DOCTYPE> | объявление типа документа | none |
<head></head> | контейнер для метаданных html-документа | none |
<title></title> | заголовок / имя html-документа | none |
<meta> | мета-данные веб-страницы | none |
<link> | подключает внешние таблицы стилей | none |
<script></script> | подключает сценарии к странице | none |
<style></style> | подключает встраиваемые таблицы стилей | none |
<base> | базовый url-адрес, относительно которого вычисляются относительные адреса | none |
<noscript></noscript> | секция, не поддерживающая скрипт | block |
HTML теги для текста
Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.
Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.
Имя | Описание | Значение свойства display |
---|---|---|
<h2></h2> — <h6></h6> | заголовки шести уровней | block |
<p></p> | параграфы в тексте | block |
<br> | перенос текста на новую строку | none |
<hr> | горизонтальная линия | block |
<wbr> | возможное место разрыва длинной строки | none |
<blockquote></blockquote> | большая цитата | block |
<cite></cite> | источник цитирования | inline |
<q></q> | краткая цитата | inline |
<code></code> | фрагмент программного кода | inline |
<kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
<pre></pre> | выводит текст с пробелами и переносами | block |
<samp></samp> | результат выполнения сценария | block |
<var></var> | выделяет переменные из программ | block |
<del></del> | перечёркивает текст, помечая как удаленный | block |
<s></s> | перечёркивает неактуальный текст | block |
<dfn></dfn> | выделяет термин курсивом | block |
<em></em> | выделяет важные фрагменты текста курсивом | block |
<i></i> | выделяет текст курсивом без акцента | block |
<strong></strong> | выделяет полужирным важный текст | block |
<b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | block |
<ins></ins> | подчёркивает изменения в тексте | block |
<u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | block |
<mark></mark> | выделяет фрагменты текста желтым фоном | block |
<small></small> | отображает текст шрифтом меньшего размера | block |
<sub></sub> | подстрочное написание символов | block |
<sup></sup> | надстрочное написание символов | block |
<time></time> | дата / время документа или статьи | block |
<abbr></abbr> | аббревиатура или акроним | none |
<address></address> | контактные данные автора документа или статьи | block |
<bdi></bdi> | изолирует текст, читаемый справа налево | inline |
<bdo></bdo> | задаёт направление написания текста | inline |
<ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
<rp></rp> | тег для скобок вокруг символов | none |
<rt></rt> | расшифровка символов | block |
Теги таблицы HTML
Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице.
Особенно они пригодятся в аналитических материалах. Так пользователи могут быстро сориентироваться в ваших данных.
Имя | Описание | Значение свойства display |
---|---|---|
<table></table> | html-таблица | table |
<tr></tr> | строка таблицы | table-row |
<th></th> | заголовок столбца таблицы | table-cell |
<td></td> | ячейка таблицы | table-cell |
<thead></thead> | блок заголовков таблицы | table-header-group |
<tbody></tbody> | тело таблицы | table-row-group |
<tfoot></tfoot> | нижний колонтитул таблицы | table-footer-group |
<caption></caption> | подпись к таблице | table-caption |
<col> | выбирает для форматирования столбцы | table-column |
<colgroup></colgroup> | контейнер для одного или нескольких <col> | table-column-group |
Картинки
Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации.
Еще полезно и в SEO.
Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.
Имя | Описание | Значение свойства display |
---|---|---|
<img> | html-изображения | inline |
<map></map> | активные области на карте-изображении | inline |
<area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
<canvas></canvas> | холст-контейнер для динамического отображения изображений | inline-block |
Списки
Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции.
Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.
Название | Описание | Значение свойства display |
---|---|---|
<ol></ol> | упорядоченный нумерованный список | block |
<ul></ul> | маркированный список | block |
<li></li> | элемент списка | list-item |
<dl></dl> | контейнер для термина и его описания | block |
<dt></dt> | задаёт термин | block |
<dd></dd> | расшифровывает термин | block |
Ссылки
Тег ссылки в html всегда один. Будьте осторожны при его использовании.
Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме.
Также в атрибуте данного тега внимательно прописывайте адрес перехода.
Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом.
Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!
Встраиваемый контент
Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации.
Например, вы сначала написали текстовую инструкцию. После этого в самом конце можно вставить видео с наглядной демонстрацией работы.
Имя | Описание | Значение свойства display |
---|---|---|
<audio></audio> | добавляет аудио-файлы | inline-block |
<video></video> | добавляет видео-файлы | inline-block |
<source> | указывает местоположение и тип альтернативных файлов для <audio> и <video> | none |
<track> | субтитры для элементов <audio> и <video> | none |
<embed> | встраивает внешний интерактивный контент или плагин | inline-block |
<object></object> | контейнер для встраивания мультимедиа | inline-block |
<param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
<iframe></iframe> | создаёт встроенный фрейм | block |
Группировка контента
Дополнительная группировка контента по различным секциям страницы. Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.
Структура страницыК примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц.
Это улучшает как удобство пользования, так и скорость загрузки страницы.
Имя | Описание | Значение свойства display |
---|---|---|
<body></body> | тело html-документа | block |
<div></div> | контейнер для разделов html-документа, группирует блочные элементы | block |
<span></span> | контейнер для строчных элементов | inline |
<header></header> | секция для вводной информации сайта или группы навигационных ссылок | block |
<footer></footer> | секция для нижнего колонтитула документа или раздела | block |
<section></section> | логическая область (раздел) страницы, обычно с заголовком | block |
<article></article> | раздел контента, образующий независимую часть документа или сайта | block |
<aside></aside> | контент страницы, имеющий косвенное отношение к основному контенту | block |
<nav></nav> | раздел документа, содержащий навигационные ссылки по сайту | block |
<figure></figure> | независимый контейнер для такого контента как изображения, диаграммы и т. п. | block |
<figcaption></figcaption> | заголовок для элемента <figure> | block |
<details></details> | контейнер с дополнительными сведениями, который можно открыть или закрыть | block |
<summary></summary> | видимый заголовок для элемента <details> | block |
<main></main> | контейнер для уникального основного содержимого в пределах одной страницы сайта | block |
Формы
Они тоже частенько используются на сайтах. Самая главная и обязательная из них, это форма поиска.
Если это многостраничник, то такой элемент должен обязательно присутствовать.
Также сюда можно отнести формы подписки, обратной связи, регистрации и так далее.
Название | Описание | Значение свойства display |
---|---|---|
<form></form> | html-форма | block |
<input> | многофункциональные поля формы | inline-block |
<textarea> | многострочное поле формы | inline-block |
<label></label> | текстовая метка для элемента <input> | inline |
<datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
<select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
<optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
<option></option> | вариант (опция) в раскрывающемся списке | block |
<fieldset></fieldset> | группирует связанные элементы в форме | block |
<legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
<button></button> | интерактивная кнопка | inline-block |
<keygen> | генерирует закрытый и открытый ключи | inline-block |
<progress></progress> | индикатор выполнения задачи | inline-block |
<meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
<output></output> | поле для вывода результата вычисления | inline |
На этом все!
Мы рассмотрели html теги и их значение. Используйте данную справку, как шпаргалку при создании сайтов.
Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.
Теги и атрибуты | Марафон HTML+CSS
Тег (tag) — элемент языка разметки гипертекста. Это самые маленькие строительные блоки, из которых состоит любая веб-страница. Каждый тег обозначает какую-то сущность: заголовок, список, абзац текста, изображение.
Для выделения тегов среди текста документа используются угловые скобки, в которых указывается имя тега и его атрибуты.
<имя_тега>...</имя_тега>
Открывающий тег указывает на то, где начинается элемент, закрывающий — где
заканчивается. Закрывающий тег образуется путем добавления слэша (/
) перед
именем тега. Между открывающим и закрывающим тегами находится содержимое тега —
контент.
Примеры тегов.
<section>Секция</section>
<p>Абзац</p>
<a>Ссылка</a>
<button>Кнопка</button>
Комментарии используются для того, чтобы оставить в исходном коде пояснение, заметку, временно закомментировать участок кода и т. п.
<!-- Это комментарий, его содержимое не отобразится на странице --><p>Это абзац текста, он будет на странице.</p>
<!--
Комментарий может быть многострочным.
Это удобно для более ёмких описаний.
-->
Атрибуты это дополнительные настройки тегов, при помощи которых можно изменять свойства и поведение элемента. У каждого тега есть обязательные и необязательные атрибуты, их может быть несколько или не быть вовсе.
Атрибуты записываются внутри открывающего тега, а их значения располагаются внутри двойных кавычек. Несколько атрибутов разделяются пробелом.
<a href="https://google.com">...</a><img src="cat.jpg" alt="cute cat" />
<input type="text" name="user_name" />
<button type="submit">...</button>
<p>...</p>
Рассмотрим некоторые атрибуты тега <a>
.
<a href="http://google.com" target="_blank" title="Поисковая система Google">
Google. com
</a>
href
— адрес страницы, на которую перейдёт пользователь при нажатии на текст ссылки.target
— указывает то, в какой вкладке откроется страница при клике по ссылке.title
— добавляет всплывающую подсказку к тексту ссылки.
Рассмотрим некоторые атрибуты тега <img>
.
<img
src="https://picsum.photos/640/480"
alt="Произвольная картинка от генератора"
/>
src
— адрес изображения.alt
— альтернативный текст, который будет показан если картинка не загрузилась.
Полезно
Для того, чтобы узнать доступные атрибуты тега и их назначение, можно зайти в документацию или справочник, например htmlreference.io.
Состоят из открывающего и закрывающего тега, которые оборачивают контент, позволяя изменять его свойства или отображение, группировать по смыслу. Внутри парных тегов могут быть вложены другие теги, как матрёшка.
<!-- Статъя с заголовком и абзацем -->
<article>
<h2>Кратко о парных тегах</h2>
<p>
Большинство тегов парные. Их контент заключён между открывающим и
закрывающим тегом.
</p>
</article>
Состоят только из открывающего тега, не содержат текстового контента и получают контент или поведение из атрибутов. Служат для изменения свойств документа, подключения файлов и т. д.
<!-- Метаинформация о кодировке -->
<meta charset="utf-8" /><!-- Поле ввода -->
<input type="text" /><!-- Изображение -->
<img src="cat.jpg" alt="cool cat" />
Интересно
В предыдущих стандартах HTML одиночные теги обязательно записывались с обратным
символом /
перед закрывающей скобкой. Например <img />
или <input />
. В
современном стандарте это необязательно и ни на что не влияет.
Придерживаясь некоторых правил, теги можно вкладывать друг в друга. При вложении следует соблюдать порядок их закрытия по принципу матрёшки.
<тег1>
<тег2>
<тег4>...</тег4>
<тег5>...</тег5>
</тег2>
<тег3>
<тег6>...</тег6>
</тег3>
</тег1>
Вот валидная разметка абзаца со ссылкой и выделенным текстом, а также списка преимуществ с описанием.
<p>
<a href="squoosh.app">Squoosh</a> - сервис <em>оптимизации</em> изображений.
</p><p>Преимущества</p>
<ul>
<li>Работает в браузере</li>
<li>Не грузит систему</li>
<li>Удобный интерфейс</li>
</ul>
А в этой версии есть проблемы (строки подсвечены).
<!-- Не соблюдается порядок закрытия тегов -->
<p><a href="squoosh.app">Squoosh</a> - сервис <em></a>оптимизации</p> изображений.</em> <!-- Не соблюдаются специфические правила вложения тегов -->
<ul>
<p>Преимущества</p>
<li>Работает в браузере</li>
<li>Не грузит систему</li>
<li>Удобный интерфейс</li>
</ul>
Спецификация HTML Living Standard — главный документ, описывающий стандарты, возможности и будущее развитие языка HTML.
Для изучения вёрстки, в первую очередь, важны разделы описывающие какие есть типы элементов, что обозначает каждый из них , и понимание того как их можно вкладывать друг в друга.
Полезно
HTML-элемент — это термин, описывающий некую семантическую сущность в стандарте HTML. Например абзац, заголовок, список или ссылку. В HTML-документе элемент представлен тегом (парным или одиночным) — синтаксической конструкцией языка HTML.
Вложенность тегов
Алгоритм определения возможности вложения тега довольно прост.
- Идем в спецификацию и находим нужный элемент.
- Проверяем контентную модель элемента (Content model), в который вкладываем.
- Проверяем категории элемента (Categories), который вкладываем.
- Если категория подходит и ограничения не запрещают, то вкладывать можно, иначе нельзя.
Уже через пару дней использования HTML вы привыкнете правильно вкладывать элементы друг в друга, так как правила вложенности станут интуитивно понятны после знакомства с основными тегами.
Справочники
Кроме спецификации под рукой полезно иметь справочники и шпаргалки. Помнить всё наизусть не нужно, более специфические или редко используемые вещи всегда можно подсмотреть.
- Справочник HTML-тегов
- Справочник CSS-свойств
Примеры использования тегов контента — Acquia Docs
На следующей странице представлены примеры использования фитнес-сайта теги контента для таргетинга контента на конкретных посетителей веб-сайта, включая примеры того, как веб-сайты из других отраслей могут помечать свои содержание.
Пример из раздела Понимание тегов контента с помощью персонализации приводит к следующую таксономию, которая сопоставляет словарь объекта Drupal Activity с поле Content Section в Personalization и сопоставляет таксономии из ваш объект Drupal в настраиваемые поля в Персонализации:
Сопоставление поля клиента персонализации | Поле профиля персонализации | Контекст посетителя |
---|---|---|
Раздел содержания: Деятельность | Раздел содержимого | Йога, Бег, Сила, Езда на велосипеде, Плавание |
Раздел содержания: Местоположение | event_udf4 | Нью-Йорк, Лос-Анджелес, городской, пригородный |
Раздел содержания: Диетические интересы | event_udf5 | Соки, без глютена, вегетарианские, закуски |
Раздел содержания: Интересы красоты | event_udf6 | Спортивная одежда, Уличный стиль, Натуральные продукты, Сделай сам, Знаменитости |
Ключевые слова | Вирус Зика, Ежегодный 5k, Медитация, Деловые поездки |
Следующие таблицы содержат примеры отображения из других отраслей, отображение самая важная лексика от сущности Drupal до Раздел содержимого поле в Персонализации и сопоставление таксономий с настраиваемыми полями в Персонализация:
Пример: Американский университет
Сопоставление полей клиента персонализации | Поле профиля персонализации | Контекст посетителя |
---|---|---|
Персона | Студент, не студент | |
Раздел содержимого: Статус | Содержание Раздел | Будущие, допущенные, действующие, выпускники |
Таксономия: Тип школы | event_udf4 | Бакалавриат, магистратура, продолжение |
Таксономия: Местоположение | event_udf5 | Новая Англия, США, международный |
Раздел содержимого: Тип информации | event_udf6 | Академический, Прием, Студенческая жизнь, Финансовый |
Ключевые слова | Начало семестра (добавление или удаление классов, жилье), конец семестра (классы, библиотечных часов), Посещение кампуса, Обучение за рубежом, Трансферы |
Пример: компания-разработчик программного обеспечения B2B
Сопоставление полей клиента персонализации | Поле профиля персонализации | Контекст посетителя |
---|---|---|
Персона | Текущий клиент, пр. | |
Раздел содержания: семейство продуктов | Раздел содержимого | Облачный хостинг, инфраструктура, профессиональные услуги |
Раздел содержания: Тип продукта | event_udf4 | Выделенный хостинг, сеть, хранилище, база данных и анализ данных, Продуктивность и совместная работа |
Раздел содержания: тип отрасли | event_udf5 | Общедоступный, частный, гибридный |
Раздел содержания: Промышленность | event_udf6 | Электронная коммерция, финансы, здравоохранение |
Ключевые слова | Federal, Ежегодная конференция, Открытый исходный код, Истории клиентов, Сертификация, соответствие |
Пример: Региональный банк
Сопоставление полей клиента персонализации | Поле профиля персонализации | Контекст посетителя |
---|---|---|
Персона | Заказчик, проспект | |
Раздел содержания: Тип клиента | Раздел содержимого | Деловой, Личный |
Раздел содержания: Тип продукта | event_udf4 | Проверка, инвестирование, кредитные карты, кредиты, страхование |
Раздел контента: Life Stage | event_udf5 | Подросток, Семья, Пенсионер |
Раздел содержания: Оценка заемщика | event_udf5 | Здание, Среднее, Отличное |
Ключевые слова | Мобильные приложения, Истории клиентов, Калькулятор, События |
Маркировка ресурсов, групп ресурсов и подписок для логической организации — Azure Resource Manager
- Статья
- 16 минут на чтение
Теги — это элементы метаданных, которые вы применяете к своим ресурсам Azure. Это пары «ключ-значение», которые помогают вам идентифицировать ресурсы на основе параметров, относящихся к вашей организации. Если вы хотите отслеживать среду развертывания для ваших ресурсов, добавьте ключ с именем Environment. Чтобы определить ресурсы, развернутые в рабочей среде, присвойте им значение «Производство». Полностью сформированная пара ключ-значение становится Среда = Производство.
Вы можете применять теги к своим ресурсам Azure, группам ресурсов и подпискам.
Рекомендации по реализации стратегии тегирования см. в руководстве по именованию и тегированию ресурсов.
Теги ресурсов поддерживают все платные услуги. Чтобы убедиться, что оплачиваемые услуги снабжены тегом, используйте одну из политик тегов.
Предупреждение
Теги хранятся в виде обычного текста. Никогда не добавляйте конфиденциальные значения в теги. Конфиденциальные значения могут быть раскрыты с помощью многих методов, включая отчеты о затратах, команды, которые возвращают существующие определения тегов, истории развертывания, экспортированные шаблоны и журналы мониторинга.
Важно
Имена тегов нечувствительны к регистру при выполнении операций. Тег с именем тега, независимо от регистра, обновляется или извлекается. Однако поставщик ресурсов может сохранить регистр, указанный вами для имени тега. Вы увидите эту оболочку в отчетах о затратах.
Значения тегов чувствительны к регистру.
Примечание
В этой статье приведены инструкции по удалению личных данных с устройства или службы, которые можно использовать для поддержки ваших обязательств в соответствии с GDPR. Общие сведения о GDPR см. в разделе GDPR в Центре управления безопасностью Майкрософт и в разделе GDPR на портале Service Trust.
Требуемый доступ
Есть два способа получить требуемый доступ к ресурсам тегов.
Вы можете иметь доступ на запись к типу ресурса
Microsoft. Resources/tags
. Этот доступ позволяет вам пометить любой ресурс, даже если у вас нет доступа к самому ресурсу. Роль участника тегов предоставляет этот доступ. Например, роль участника тегов не может применять теги к ресурсам или группам ресурсов через портал. Однако он может применять теги к подпискам через портал. Он поддерживает все операции с тегами через Azure PowerShell и REST API.Вы можете иметь доступ на запись к самому ресурсу. Роль участника предоставляет необходимый доступ для применения тегов к любому объекту. Чтобы применить теги только к одному типу ресурсов, используйте роль участника для этого ресурса. Например, чтобы применить теги к виртуальным машинам, используйте Virtual Machine Contributor.
PowerShell
Применение тегов
Azure PowerShell предлагает две команды для применения тегов: New-AzTag и Update-AzTag. Вам нужно иметь Модуль Az.Resources
версии 1.12.0 или более поздней. Вы можете проверить свою версию с помощью Get-InstalledModule -Name Az. Resources
. Вы можете установить этот модуль или установить Azure PowerShell версии 3.6.1 или более поздней версии.
New-AzTag
заменяет все теги в ресурсе, группе ресурсов или подписке. Когда вы вызываете команду, передайте идентификатор ресурса объекта, который вы хотите пометить.
В следующем примере к учетной записи хранения применяется набор тегов:
$tags = @{"Dept"="Finance"; "Статус"="Нормальный"} $resource = Get-AzResource -Name demoStorage -ResourceGroup demoGroup New-AzTag -ResourceId $resource.id -Tag $tags
Когда команда завершится, обратите внимание, что ресурс имеет два тега.
Свойства: Имя Значение ====== ======= Департамент финансов Состояние нормальное
Если вы снова запустите команду, но на этот раз с другими тегами, обратите внимание, что более ранние теги исчезнут.
$tags = @{"Команда"="Соответствие"; "Окружающая среда"="Производство"} New-AzTag -ResourceId $resource. id -Tag $tags
Свойства: Имя Значение =========== ========== Окружающая среда Производство Соответствие команды
Чтобы добавить теги к ресурсу, который уже имеет теги, используйте Update-AzTag
. Установите для параметра -Operation
значение Merge
.
$tags = @{"Отдел"="Финансы"; "Статус"="Нормальный"} Update-AzTag -ResourceId $resource.id -Tag $tags -Operation Merge
Обратите внимание, что количество существующих тегов увеличивается с добавлением двух новых тегов.
Свойства: Имя Значение =========== ========== Состояние нормальное Департамент финансов Соответствие команды Окружающая среда Производство
Каждое имя тега может иметь только одно значение. Если вы предоставляете новое значение для тега, оно заменяет старое значение, даже если вы используете операцию слияния. В следующем примере тег Status
изменяется с Normal на Green .
$tags = @{"Статус"="Зеленый"} Update-AzTag -ResourceId $resource.id -Tag $tags -Operation Merge
Свойства: Имя Значение =========== ========== Статус Зеленый Департамент финансов Соответствие команды Окружающая среда Производство
При установке для параметра -Операция
значения Заменить
новый набор тегов заменяет существующие теги.
$tags = @{"Project"="Электронная коммерция"; "Центр затрат"="00123"; "Команда"="Интернет"} Update-AzTag -ResourceId $resource.id -Tag $tags -Operation Replace
В ресурсе остаются только новые теги.
Свойства: Имя Значение ========== ========= Центр затрат 00123 Веб-команда Электронная коммерция проекта
Эти же команды также работают с группами ресурсов или подписками. Передайте их в идентификаторе группы ресурсов или подписки, которую вы хотите пометить.
Чтобы добавить новый набор тегов в группу ресурсов, используйте:
$tags = @{"Dept"="Finance"; "Статус"="Нормальный"} $resourceGroup = Get-AzResourceGroup -Name demoGroup New-AzTag -ResourceId $resourceGroup.ResourceId -tag $tags
Чтобы обновить теги для группы ресурсов, используйте:
$tags = @{"CostCenter"="00123"; "Окружающая среда"="Производство"} $resourceGroup = Get-AzResourceGroup -Name demoGroup Update-AzTag -ResourceId $resourceGroup.ResourceId -Tag $tags -Operation Merge
Чтобы добавить в подписку новый набор тегов, используйте:
$tags = @{"CostCenter"="00123"; "Окружающая среда"="Разработка"} $subscription = (Get-AzSubscription -SubscriptionName "Пример подписки").Id New-AzTag -ResourceId "/subscriptions/$subscription" -Tag $tags
Чтобы обновить теги для подписки, используйте:
$tags = @{"Team"="Web Apps"} $subscription = (Get-AzSubscription -SubscriptionName "Пример подписки"). Id Update-AzTag -ResourceId "/subscriptions/$subscription" -Tag $tags -Operation Merge
В группе ресурсов может быть несколько ресурсов с одинаковым именем. В этом случае вы можете установить каждый ресурс с помощью следующих команд:
$resource = Get-AzResource -ResourceName sqlDatabase1 -ResourceGroupName examplegroup $ ресурс | ForEach-Object { Update-AzTag -Tag @{ "Dept"="IT"; "Environment"="Test" } -ResourceId $_.ResourceId -Operation Merge }
Список тегов
Чтобы получить теги для ресурса, группы ресурсов или подписки, используйте команду Get-AzTag и передайте идентификатор ресурса объекта.
Чтобы просмотреть теги для ресурса, используйте:
$resource = Get-AzResource -Name demoStorage -ResourceGroup demoGroup Get-AzTag-ResourceId $resource.id
Чтобы просмотреть теги для группы ресурсов, используйте:
$resourceGroup = Get-AzResourceGroup -Name demoGroup Get-AzTag -ResourceId $resourceGroup. ResourceId
Чтобы просмотреть теги для подписки, используйте:
$subscription = (Get-AzSubscription -SubscriptionName "Пример подписки").Id Get-AzTag -ResourceId "/subscriptions/$subscription"
Список по тегу
Чтобы получить ресурсы с определенным именем и значением тега, используйте:
(Get-AzResource -Tag @{ "CostCenter"="00123"}).Name
Чтобы получить ресурсы с определенным именем тега с любым значением тега, используйте:
(Get-AzResource -TagName "Dept").Name
Чтобы получить группы ресурсов с определенным именем и значением тега, используйте:
(Get-AzResourceGroup -Tag @{ "CostCenter"="00123" }).ResourceGroupName
Удалить ярлыки
Чтобы удалить определенные теги, используйте Update-AzTag
и задайте для -Operation
значение Удалить
. Передайте идентификаторы ресурсов тегов, которые вы хотите удалить.
$removeTags = @{"Project"="Электронная коммерция"; "Команда"="Интернет"} Update-AzTag -ResourceId $resource.id -Tag $removeTags -Operation Delete
Указанные теги удалены.
Свойства: Имя Значение ========== ===== Центр затрат 00123
Чтобы удалить все теги, используйте команду Remove-AzTag.
$subscription = (Get-AzSubscription -SubscriptionName "Пример подписки").Id Remove-AzTag -ResourceId "/subscriptions/$subscription"
Azure CLI
Применение тегов
Azure CLI предлагает две команды для применения тегов: создание тега az и обновление тега az. Вам потребуется версия Azure CLI 2.10.0 или более поздняя. Вы можете проверить свою версию с помощью az version
. Чтобы обновить или установить его, см. раздел Установка Azure CLI.
Тег az create
заменяет все теги в ресурсе, группе ресурсов или подписке. Когда вы вызываете команду, передайте идентификатор ресурса объекта, который вы хотите пометить.
В следующем примере к учетной записи хранения применяется набор тегов:
resource=$(az resource show -g demoGroup -n demoStorage --resource-type Microsoft.Storage/storageAccounts --query "id" --output tsv ) тег az create --resource-id $resource --tags Dept=Финансовый статус=Нормальный
Когда команда завершится, обратите внимание, что ресурс имеет два тега.
"свойства": { "теги": { "Отдел": "Финансы", «Статус»: «Нормальный». } },
Если вы снова запустите команду, но на этот раз с другими тегами, обратите внимание, что более ранние теги исчезнут.
тег az create --resource-id $resource --tags Team=Compliance Environment=Production
"свойства": { "теги": { «Окружающая среда»: «Производство», «Команда»: «Соответствие» } },
Чтобы добавить теги к ресурсу, в котором уже есть теги, используйте az tag update
. Установите для параметра --operation
значение Merge
.
обновление тега az --resource-id $resource --operation Merge --tags Dept=Finance Status=Normal
Обратите внимание, что количество существующих тегов увеличивается с добавлением двух новых тегов.
"свойства": { "теги": { "Отдел": "Финансы", «Окружающая среда»: «Производство», «Статус»: «Нормальный», «Команда»: «Соответствие» } },
Каждое имя тега может иметь только одно значение. Если вы укажете новое значение для тега, новый тег заменит старое значение, даже если вы используете операцию слияния. В следующем примере тег Status
изменяется с Normal на Green .
обновление тега az --resource-id $resource --operation Merge --tags Status=Green
"свойства": { "теги": { "Отдел": "Финансы", «Окружающая среда»: «Производство», «Статус»: «Зеленый», «Команда»: «Соответствие» } },
При установке для параметра --operation
значения Заменить
новый набор тегов заменяет существующие теги.
обновление тега az --resource-id $resource --operation Replace --tags Project=ECommerce CostCenter=00123 Team=Web
В ресурсе остаются только новые теги.
"свойства": { "теги": { «Центр затрат»: «00123», "Проект": "Электронная коммерция", «Команда»: «Сеть» } },
Эти же команды также работают с группами ресурсов или подписками. Передайте их в идентификаторе группы ресурсов или подписки, которую вы хотите пометить.
Чтобы добавить новый набор тегов в группу ресурсов, используйте:
group=$(az group show -n demoGroup --query id --output tsv) тег az create --resource-id $group --tags Dept=Финансовый статус=Нормальный
Чтобы обновить теги для группы ресурсов, используйте:
az tag update --resource-id $group --operation Merge --tags CostCenter=00123 Environment=Production
Чтобы добавить новый набор тегов в подписку, используйте:
sub=$(az account show --subscription «Демо-подписка» --query id --output tsv) тег az create --resource-id /subscriptions/$sub --tags CostCenter=00123 Environment=Dev
Чтобы обновить теги для подписки, используйте:
az tag update --resource-id /subscriptions/$sub --operation Merge --tags Team="Web Apps"
Список тегов
Чтобы получить теги для ресурса, группы ресурсов или подписки, используйте команду az tag list и передайте идентификатор ресурса объекта.
Чтобы просмотреть теги ресурса, используйте:
resource=$(az resource show -g demoGroup -n demoStorage --resource-type Microsoft.Storage/storageAccounts --query "id" --output tsv) список тегов az --resource-id $resource
Чтобы просмотреть теги для группы ресурсов, используйте:
group=$(az group show -n demoGroup --query id --output tsv) список тегов az --resource-id $group
Чтобы просмотреть теги для подписки, используйте:
sub=$(az account show --subscription "Демо-подписка" --query id --output tsv) список тегов az --resource-id /subscriptions/$sub
Список по тегу
Чтобы получить ресурсы с определенным именем и значением тега, используйте:
список ресурсов az --tag CostCenter=00123 --query [].name
Чтобы получить ресурсы, которые имеют определенное имя тега с любым значением тега, используйте:
список ресурсов az --tag Team --query []. name
Чтобы получить группы ресурсов с определенным именем и значением тега, используйте:
az group list --tag Dept=Finance
Удалить теги
Чтобы удалить определенные теги, используйте Обновить тег az
и установить --operation
на Удалить
. Передайте идентификатор ресурса тегов, которые вы хотите удалить.
обновление тега az --resource-id $resource --operation Удалить --tags Project=ECommerce Team=Web
Вы удалили указанные теги.
"свойства": { "теги": { «Центр затрат»: «00123» } },
Чтобы удалить все теги, используйте команду удаления тегов az.
тег az удалить --resource-id $resource
Помещения для обработки
Если имена или значения ваших тегов содержат пробелы, заключите их в кавычки.
обновление тега az --resource-id $group --operation Merge --tags "Cost Center"=Finance-1222 Location="West US"
Шаблоны ARM
Вы можете пометить ресурсы, группы ресурсов и подписки во время развертывания с помощью шаблона ARM.
Примечание
Теги, которые вы применяете через шаблон ARM или файл Bicep, перезаписывают любые существующие теги.
Применить значения
В следующем примере развертывается учетная запись хранения с тремя тегами. Два тега ( Dept
и Environment
) устанавливаются в буквальные значения. Для одного тега ( LastDeployed
) задан параметр, который по умолчанию соответствует текущей дате.
- JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "Версия содержания": "1.0.0.0", "параметры": { "utcShort": { "тип": "строка", "defaultValue": "[utcNow('d')]" }, "место расположения": { "тип": "строка", "defaultValue": "[resourceGroup().location]" } }, "Ресурсы": [ { "type": "Microsoft.Storage/storageAccounts", "apiVersion": "2021-04-01", "name": "[concat('storage', uniqueString(resourceGroup(). id))]", "местоположение": "[параметры('местоположение')]", "арт": { "имя": "Стандарт_LRS" }, "вид": "Хранение", "теги": { "Отдел": "Финансы", «Окружающая среда»: «Производство», "LastDeployed": "[параметры('utcShort')]" }, "характеристики": {} } ] }
Применить объект
Вы можете определить параметр объекта, который хранит несколько тегов, и применить этот объект к элементу тега. Этот подход обеспечивает большую гибкость, чем предыдущий пример, поскольку объект может иметь разные свойства. Каждое свойство в объекте становится отдельным тегом для ресурса. В следующем примере есть параметр с именем tagValues
, который применяется к элементу тега.
- JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "Версия содержания": "1. 0.0.0", "параметры": { "место расположения": { "тип": "строка", "defaultValue": "[resourceGroup().location]" }, "Значения тегов": { "тип": "объект", "значение по умолчанию": { "Отдел": "Финансы", «Окружающая среда»: «Производство» } } }, "Ресурсы": [ { "type": "Microsoft.Storage/storageAccounts", "apiVersion": "2021-04-01", "name": "[concat('storage', uniqueString(resourceGroup().id))]", "местоположение": "[параметры('местоположение')]", "арт": { "имя": "Стандарт_LRS" }, "вид": "Хранение", "теги": "[параметры('tagValues')]", "характеристики": {} } ] }
Применение строки JSON
Чтобы сохранить несколько значений в одном теге, примените строку JSON, представляющую значения. Вся строка JSON хранится в виде одного тега, длина которого не может превышать 256 символов. В следующем примере есть один тег с именем CostCenter
, который содержит несколько значений из строки JSON:
- . JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "Версия содержания": "1.0.0.0", "параметры": { "место расположения": { "тип": "строка", "defaultValue": "[resourceGroup().location]" } }, "Ресурсы": [ { "type": "Microsoft.Storage/storageAccounts", "apiVersion": "2021-04-01", "name": "[concat('storage', uniqueString(resourceGroup().id))]", "местоположение": "[параметры('местоположение')]", "арт": { "имя": "Стандарт_LRS" }, "вид": "Хранение", "теги": { "CostCenter": "{\"Отдел\":\"Финансы\",\"Окружающая среда\":\"Производство\"}" }, "характеристики": {} } ] }
Применение тегов из группы ресурсов
Чтобы применить теги из группы ресурсов к ресурсу, используйте функцию resourceGroup(). Когда вы получите значение тега, используйте синтаксис tags[tag-name]
вместо синтаксиса tags. tag-name
, так как некоторые символы не обрабатываются правильно в точечной нотации.
- JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "Версия содержания": "1.0.0.0", "параметры": { "место расположения": { "тип": "строка", "defaultValue": "[resourceGroup().location]" } }, "Ресурсы": [ { "type": "Microsoft.Storage/storageAccounts", "apiVersion": "2021-04-01", "name": "[concat('storage', uniqueString(resourceGroup().id))]", "местоположение": "[параметры('местоположение')]", "арт": { "имя": "Стандарт_LRS" }, "вид": "Хранение", "теги": { "Отдел": "[resourceGroup().tags['Отдел']]", "Среда": "[resourceGroup().tags['Среда']]" }, "характеристики": {} } ] }
Применение тегов к группам ресурсов или подпискам
Вы можете добавить теги к группе ресурсов или подписке, развернув тип ресурса Microsoft. Resources/tags
. Вы можете применить теги к целевой группе ресурсов или подписке, которую хотите развернуть. Каждый раз, когда вы развертываете шаблон, вы заменяете все предыдущие теги.
- JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "Версия содержания": "1.0.0.0", "параметры": { "название тэга": { "тип": "строка", "defaultValue": "ИмяКоманды" }, "значение тега": { "тип": "строка", "defaultValue": "КомандаПриложений1" } }, "Ресурсы": [ { "type": "Microsoft.Resources/теги", "имя": "по умолчанию", "apiVersion": "2021-04-01", "характеристики": { "теги": { "[параметры('tagName')]": "[параметры('tagValue')]" } } } ] }
Чтобы применить теги к группе ресурсов, используйте Azure PowerShell или Azure CLI. Разверните в группе ресурсов, которую вы хотите пометить.
New-AzResourceGroupDeployment -ResourceGroupName exampleGroup -TemplateFile https://raw.githubusercontent.com/Azure/azure-docs-json-samples/master/azure-resource-manager/tags.json
группа развертывания az create --resource-group exampleGroup --template-uri https://raw.githubusercontent.com/Azure/azure-docs-json-samples/master/azure-resource-manager/tags.json
Чтобы применить теги к подписке, используйте PowerShell или Azure CLI. Разверните подписку, которую вы хотите пометить.
New-AzSubscriptionDeployment -name tagresourcegroup -Location westus2 -TemplateUri https://raw.githubusercontent.com/Azure/azure-docs-json-samples/master/azure-resource-manager/tags.json
подпрограмма развертывания az create --name tagresourcegroup --location westus2 --template-uri https://raw. githubusercontent.com/Azure/azure-docs-json-samples/master/azure-resource-manager/tags.json
Дополнительные сведения о развертывании подписки см. в разделе Создание групп ресурсов и ресурсов на уровне подписки.
Следующий шаблон добавляет теги из объекта либо в группу ресурсов, либо в подписку.
- JSON
- Бицепс
{ "$schema": "https://schema.management.azure.com/schemas/2018-05-01/subscriptionDeploymentTemplate.json#", "Версия содержания": "1.0.0.0", "параметры": { "теги": { "тип": "объект", "значение по умолчанию": { "ИмяКоманды": "AppTeam1", "Отдел": "Финансы", «Окружающая среда»: «Производство» } } }, "Ресурсы": [ { "type": "Microsoft.Resources/теги", "apiVersion": "2021-04-01", "имя": "по умолчанию", "характеристики": { "теги": "[параметры('теги')]" } } ] }
Portal
Если у пользователя нет необходимого доступа для применения тегов, вы можете назначить пользователю роль Tag Contributor . Дополнительные сведения см. в разделе Учебник. Предоставление пользователю доступа к ресурсам Azure с помощью RBAC и портала Azure.
Чтобы просмотреть теги для ресурса или группы ресурсов, найдите существующие теги в обзоре. Если вы ранее не применяли теги, список пуст.
Чтобы добавить тег, выберите Нажмите здесь, чтобы добавить теги .
Введите имя и значение.
Продолжайте добавлять теги по мере необходимости. Когда закончите, выберите Сохранить .
Теги теперь отображаются в обзоре.
Чтобы добавить или удалить тег, выберите изменить .
Чтобы удалить тег, выберите значок корзины. Затем выберите Сохранить .
Чтобы массово назначить теги нескольким ресурсам:
В любом списке ресурсов установите флажок для ресурсов, которым вы хотите назначить тег. Затем выберите Назначить теги .
Добавьте имена и значения. Когда закончите, выберите Сохранить .
Чтобы просмотреть все ресурсы с тегом:
В меню портала Azure найдите тегов . Выберите его из доступных вариантов.
Выберите тег для просмотра ресурсов.
Отображаются все ресурсы с этим тегом.
REST API
Для работы с тегами через Azure REST API используйте:
- Теги — создание или обновление в области действия (операция PUT)
- Теги — обновление в области действия (операция PATCH)
- Теги — Get At Scope (операция GET)
- Теги — Удалить в области действия (операция DELETE)
SDK
Примеры применения тегов с SDK см.:
- .NET
- Ява
- JavaScript
- Питон
Наследовать теги
Ресурсы не наследуют теги, которые вы применяете к группе ресурсов или подписке. Чтобы применить теги из подписки или группы ресурсов к ресурсам, см. раздел Политики Azure — теги.
Теги и выставление счетов
Вы можете использовать теги для группировки данных выставления счетов. Например, если вы используете несколько виртуальных машин для разных организаций, используйте теги для группировки использования по центрам затрат. Вы также можете использовать теги для категоризации затрат по средам выполнения, например по выставлению счетов за виртуальные машины, работающие в производственной среде.
Вы можете получить информацию о тегах, загрузив файл использования, доступный на портале Azure. Дополнительные сведения см. в статье Загрузка или просмотр счета-фактуры для выставления счетов Azure и данных о ежедневном использовании. Для служб, которые поддерживают теги с выставлением счетов, теги отображаются в столбце Теги .
Сведения об операциях REST API см. в справочнике по REST API выставления счетов Azure.
Ограничения
К тегам применяются следующие ограничения:
Не все типы ресурсов поддерживают теги. Чтобы определить, можно ли применить тег к типу ресурса, см. раздел Поддержка тегов для ресурсов Azure.
Каждый ресурс, группа ресурсов и подписка могут иметь не более 50 пар «имя-значение» тега. Если вам нужно применить больше тегов, чем максимально допустимое количество, используйте строку JSON для значения тега. Строка JSON может содержать множество значений, которые вы применяете к одному имени тега. Группа ресурсов или подписка может содержать множество ресурсов, каждый из которых имеет 50 пар «имя-значение» тега.
Длина имени тега не должна превышать 512 символов, а значение тега не может превышать 256 символов. Для учетных записей хранения имя тега имеет ограничение в 128 символов, а значение тега — 256 символов.
Классические ресурсы, такие как облачные службы, не поддерживают теги.
Группы IP-адресов Azure и политики брандмауэра Azure не поддерживают операции PATCH. Поэтому операции метода PATCH API не могут обновлять теги через портал.