# Рекомендация разметки для медийных проектов

### Общая схема разметки

data-\[проект]\[-\[desktop|mobile]]=\[группа компонентов]::\[компонент]::\[порядковый номер компонента]::\[группа элементов]:: \[элемент]::\[порядковый номер элемента]::\[состояние]

* проект – символьный код проекта из списка
* <mark style="color:green;">desktop или mobile</mark> – обозначение платформы
* <mark style="color:green;">группа компонентов</mark> – группа, состоящая из отдельных, повторяющихся компонентов, например группа виджетов
* компонент м название компонента, например карточка кластера или виджет
* <mark style="color:green;">порядковый номер компонента</mark> – если компонент повторяются в рамках одной группы
* <mark style="color:green;">группа элементов</mark> – общее название для элементов, если они обобщены, например элементы списка в саджесте поиска
* <mark style="color:green;">элемент</mark> – название отдельного простого элемента
* <mark style="color:green;">порядковый номер элемента</mark> – если элемент находится в списке
* <mark style="color:green;">состояние</mark> – назначается, если элемент принимает разные состояния, например: opened и closed

{% hint style="info" %}
Обратите внимание! Зеленым шрифтом указаны необязательные уровни
{% endhint %}

### Описание разметки

**Первый уровень** – обязательный и устанавливается проектом.

**Второй уровень** указывается, если состоит из обобщенных одним смыслом компонентов. Таким образом он автоматически добавит уровень к дереву аналитики. Указывается как один уровень, т.е. без разделителя "::"

```
<div data-head-desktop="group">
 ...
</div>
```

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

<pre><code><strong>&#x3C;div data-head-desktop="component::1">
</strong> &#x3C;div data-head-desktop="items">
  &#x3C;span data-head-desktop="item::1::checked">
   ...
<strong>  &#x3C;/span>
</strong><strong> &#x3C;/div>
</strong>&#x3C;/div>

</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://top-100-writer.gitbook.io/top100-documentation/prakticheskie-primery-i-ispolzovanie-cook-book/prakticheskoe-rukovodstvo-po-analitike-blokov/rekomendaciya-razmetki-dlya-mediinykh-proektov.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.