# Работа с инструментом HTML-блок

*Время чтения: 5 минут*

{% hint style="info" icon="file-html" %}
HTML - блок - это тип блока в конструкторе урока, который позволяет вставлять и отображать внутри урока произвольный HTML-код.\
С его помощью можно создавать не только стандартные текстовые или медиа-элементы, но и кастомные интерактивные блоки: карточки, слайдеры, схемы, тренажёры, калькуляторы, интерактивные инструкции, квизы и другие форматы, которые не покрываются базовыми блоками платформы.
{% endhint %}

## Как работает инструмент HTML - блок <a href="#h_2978b91a44" id="h_2978b91a44"></a>

### Как вставить код в блок?

Делается это очень просто:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2Fal4IaTVGsAFD3lNj5xoK%2F%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2026-04-08-%D0%B2-10.54.34.gif?alt=media&#x26;token=32696ef1-a9c7-46da-93c9-9f9811813fd3" alt=""><figcaption><p>Создание HTML - блока в курсе</p></figcaption></figure>

1. Перейдите в урок и перетащите **HTML - блок** на страницу
2. Кликните на кнопку **Вставить код**
3. Вставьте или напишите код
4. Проверьте в предпросмотре справа все ли корректно
5. Кликните на кнопку **Сохранить**

Отлично, блок заполнен!

{% hint style="warning" %}
**Обратите внимание, что:**

1. Если блок пустой, он не отображается студентам.&#x20;
2. Если код содержит ошибки и не может быть корректно воспроизведён, такой блок также не будет отображаться студентам. &#x20;
3. **Максимальный размер** HTML-кода составляет 64 000 символов
   {% endhint %}

## Применение инструмента HTML - блок <a href="#h_4111ded2d7" id="h_4111ded2d7"></a>

{% hint style="info" %}
**HTML-блок** применяется для создания в уроке кастомных элементов, которые невозможно или неудобно собрать с помощью стандартных блоков конструктора. Давайте рассмотрим основные сценарии применения:
{% endhint %}

1. **Визуальная подача учебного материала**

HTML-блок позволяет оформить информацию в более удобном и понятном виде, чем обычный текстовый блок. Он может использоваться для:

* карточек с тезисами;
* блоков сравнения;
* таймлайнов;
* схем и этапов;

Например:&#x20;

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2F9rodfc94GvhKEe4XjJpk%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202026-04-08%20%D0%B2%2016.42.40.png?alt=media&#x26;token=dac4c341-8990-4b0f-b8f2-728d3a1b3ac3" alt=""><figcaption><p>Блок с карточками и акцентами на ключевых тезисах</p></figcaption></figure>

2. **Интерактиыные элементы в уроке**

HTML-блок подходит для размещения интерактивных учебных механик, которые вовлекают пользователя в изучение материала.\
Например:

* переворачивающиеся карточки;
* кнопки с показом ответа;
* интерактивные подсказки;
* простые тренажёры и мини-сценарии.

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2FJ4gvZgmTnbFqq4jjJxhK%2F2.gif?alt=media&#x26;token=6534d689-b0eb-41dc-9fc5-025e7d8c74ab" alt=""><figcaption><p>Флип карточки</p></figcaption></figure>

3. **Формирование практических навыков**

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

* мини-кейсы;
* визуальные тренажёры;
* сценарии выбора и анализа вариантов;
* обучающие калькуляторы и практические инструменты.

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2FnCAxRLDtGJEogUycZEn2%2F3.gif?alt=media&#x26;token=475d3f7d-b318-48ee-8fae-e5ae64e38863" alt=""><figcaption><p>Мини-тренажер</p></figcaption></figure>

4. **Оформление длинных текстов и лонгридов**

Когда материал слишком объёмный для обычного текстового блока, HTML-блок позволяет сделать его более читабельным. С его помощью длинный текст можно превратить в:

* структурированный лонгрид;
* статью с визуальными акцентами;
* блок с выделенными цитатами и тезисами;
* материал с внутренней навигацией.&#x20;

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2F9nDVShY3WWzhuT69xtRf%2F4.gif?alt=media&#x26;token=5a36a94a-7654-4255-9d68-7aec86157ff3" alt=""><figcaption><p>Лонгрид</p></figcaption></figure>

## Особенности использования

{% hint style="success" %}
Данный раздел будет пополняться небольшими советы, как можно улучшить ваш HTML-блок.&#x20;
{% endhint %}

<table><thead><tr><th>Проблема</th><th valign="middle">Решение</th><th>Пример</th></tr></thead><tbody><tr><td><ol><li>Ссылка в HTML-блоке на сторонний сервис открывает этот сервис в этом же блоке?</li></ol></td><td valign="middle">Добавьте target="_blank" к ссылкам, если хотите, чтобы они открывались в браузерной вкладке, а не внутри блока</td><td></td></tr><tr><td><ol start="2"><li>В предпросмотре результата ничего не вывелось?</li></ol></td><td valign="middle">Прежде всего проверьте высоту блока. <strong>Системно</strong> высота блока зависит от высоты содержимого, но бывает такое, что в блоке код, где высота содержимого зависит от высоты экрана и для такого кода <strong>нужно</strong> задавать фиксированную высоту у блока</td><td>Например: calc(100vh - 50px)</td></tr></tbody></table>


---

# 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://wiki.reezonly.ru/space/obuchenie/produkty/vkladka-soderzhanie-produkta-kursa/kak-rabotayut-instrumenty-v-konstruktore-kontenta/rabota-s-instrumentom-html-blok.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.