HTML для пользователей Tilda: что можно менять в коде, а что нельзя

Если вы используете готовые модификации для Tilda, учить HTML целиком не обязательно. Но нужно понимать, какие части кода предназначены для замены, а какие могут быть связаны со стилями и JavaScript и поэтому требуют осторожности. Для большинства готовых модификаций достаточно уметь заменить текст, ссылку, изображение или указанное в инструкции значение и не затронуть остальную структуру.

Ниже — короткая практическая инструкция.

Как выглядит HTML

Простой фрагмент может выглядеть так:

<div class="my-card">
    <h2>Заголовок карточки</h2>
    <p>Описание карточки</p>
    <a href="https://example.com">Подробнее</a>
</div>

Здесь:

<div> — контейнер;
<h2> — заголовок;
<p> — абзац;
<a> — ссылка;
class="my-card" и href="..." — атрибуты элементов.

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

Что обычно можно менять

Текст

Например:

<h2>Наши проекты</h2>

можно заменить на:

<h2>Как мы помогаем</h2>

То же относится к описанию или тексту кнопки:

<a href="/projects">Подробнее</a>

Можно изменить Подробнее, не затрагивая сам тег <a>. При этом важно не удалить символы <, > и закрывающие теги вроде </a>, </p> или </div>.

Ссылки в `href`

В элементе <a> атрибут href задает адрес ссылки. Например:

<a href="https://example.com">Подробнее</a>

Если нужно поменять адрес, безопаснее заменить только значение между кавычками:

<a href="https://mysite.ru">Подробнее</a>

То есть было:

href="https://example.com"

стало:

href="https://mysite.ru"

Само href=, кавычки и остальную часть тега оставляем.

Ссылки на изображения в `src`

У обычного элемента <img> путь к изображению может задаваться атрибутом src. Например:

<img src="https://example.com/photo.jpg" alt="Фотография">

Чтобы заменить изображение, обычно достаточно поменять URL:

<img src="https://mysite.ru/new-photo.jpg" alt="Фотография">

Но здесь есть важное ограничение: это правило относится к коду, в котором вы действительно видите обычный <img src="...">. В стандартных блоках Tilda изображение может быть реализовано иначе, поэтому нельзя искать src наугад и считать, что любая картинка меняется именно так.

Значения, которые автор модификации специально вынес для замены

Например:

<a href="YOUR-LINK">YOUR-TEXT</a>

или:

<img src="YOUR-IMAGE" alt="">

или:

<!-- ЗАМЕНИТЕ ССЫЛКУ НИЖЕ -->

Если инструкция прямо говорит заменить YOUR-LINK, YOUR-IMAGE, номер блока или другое конкретное значение, меняйте именно его. Это намного безопаснее, чем самостоятельно редактировать похожие строки в разных частях кода.

Что нельзя менять без понимания последствий

`class`

Например:

<div class="bk-card">

Название класса может использоваться в CSS:

.bk-card {
    border-radius: 20px;
}

и в JavaScript:

document.querySelector('.bk-card')

HTML-атрибут class как раз используется для того, чтобы CSS и JavaScript могли выбирать определенные элементы. Если поменять только:

class="bk-card"

на:

class="my-card"

а CSS и JavaScript оставить прежними, они перестанут находить .bk-card. Поэтому class — это не просто удобное название элемента. Не переименовывайте классы, если инструкция этого не требует.

`id`

То же относится к id:

<div id="calculator">

JavaScript может искать этот элемент так:

document.getElementById('calculator')

или:

document.querySelector('#calculator')

id предназначен для идентификации элемента и должен быть уникальным в пределах документа. getElementById() ищет элемент именно по этому значению. Если изменить calculator только в HTML, связанный JavaScript может перестать работать. Поэтому id меняют только тогда, когда точно понимают, где еще он используется.

`data-*`

В коде можно встретить:

<button data-modal="form">Открыть форму</button>

data-* — это пользовательские HTML-атрибуты, данные которых можно читать из JavaScript и использовать в селекторах CSS и JavaScript. Например, скрипт может искать:

document.querySelector('[data-modal="form"]')

Если самостоятельно заменить:

data-modal="form"

на:

data-modal="contact"

логика может перестать работать. Поэтому неизвестные data-* лучше не удалять и не переименовывать.

Названия HTML-тегов

Не стоит самостоятельно менять:

<a>

на:

<div>

или <button> на другой тег только потому, что визуально элементы выглядят одинаково. Разные HTML-элементы имеют разное назначение. Например, <a> с href создает ссылку. Если задача заключается только в замене текста или адреса, сам тег оставляем без изменений.

Неизвестные атрибуты

Например:

aria-label="..."
role="..."
target="..."
style="..."
data-id="..."

Не используйте принцип «я не понимаю, зачем это нужно, значит можно удалить». Атрибут может влиять на поведение элемента, стили, JavaScript, доступность или работу стороннего сервиса. Если инструкция не требует его менять, оставьте его.

Следите за кавычками

Очень простая ошибка:

<a href="https://example.com>Подробнее</a>

Здесь потеряна закрывающая кавычка после адреса. Правильно:

<a href="https://example.com">Подробнее</a>

Поэтому при замене ссылки лучше выделять только содержимое кавычек.

Было:

href="https://old-site.ru"

Меняем только:

https://old-site.ru

Получаем:

href="https://new-site.ru"

Тот же принцип работает с src, class, id и большинством других атрибутов.

Не удаляйте открывающие и закрывающие теги

Например:

<div class="card">
    <p>Описание</p>
</div>

<div> открывает элемент, а </div> его закрывает. Если случайно удалить закрывающий тег или переместить его в другое место, структура вложенности изменится. Из-за этого соседние элементы могут начать отображаться неправильно. Поэтому если ваша задача — поменять только текст, ссылку или картинку, не редактируйте структуру <...> вообще.

Не путайте HTML, CSS и JavaScript

В одном блоке с кодом могут находиться сразу HTML, CSS и JavaScript:

<div class="card">
    Текст карточки
</div>

<style>
.card {
    color: red;
}
</style>

<script>
console.log('Карточка загружена');
</script>

Здесь <div class="card">...</div> — HTML, код внутри <style>...</style> — CSS, а внутри <script>...</script> — JavaScript. Tilda официально поддерживает HTML, CSS внутри <style> и JavaScript внутри <script> в блоке T123.

Если нужно только изменить надпись на карточке, не нужно параллельно редактировать <style> или <script>.

Где пользовательский HTML размещается в Tilda

Для собственного кода на странице Tilda предусмотрен блок T123 «HTML-код» из категории «Другое». HTML также можно вставить отдельным HTML-элементом в Zero Block. По документации Tilda принципы работы T123 и HTML-элемента в Zero Block существенно не отличаются.

Есть важная особенность: в режиме редактирования и предпросмотра содержимое такого кода может выводиться текстом. Чтобы проверить его работу, страницу необходимо опубликовать. Поэтому пользовательские модификации проверяем на опубликованной странице, а не только в редакторе.

Tilda также позволяет вставлять код в <head> страницы или всего сайта. Для сайта это находится в Настройки сайта → Ещё → HTML-код для вставки внутрь head, а для отдельной страницы — в Настройки страницы → Вставка кода → HTML-код для вставки внутрь head.

Но обычный HTML-фрагмент не нужно переносить в head просто «на всякий случай». Если инструкция говорит вставить код в T123, вставляем его в T123. Если отдельно указано разместить определенную часть в head, тогда используем соответствующую настройку.

Особенность Tilda: `#rec...`

У каждого блока Tilda есть собственный уникальный номер вида:

#rec123456789

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

Например:

#rec123456789 .card {
    background: #000;
}

означает: применить правило к .card внутри конкретного блока.

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

Почему лучше не использовать слишком общие селекторы

Это относится уже не столько к редактированию HTML, сколько к безопасности готовой модификации. Tilda отдельно рекомендует для пользовательских стилей не использовать слишком общие селекторы вроде тегов, универсальных классов или *, а применять уникальные классы или ID, чтобы стили не затронули другие элементы страницы.

То есть такой код:

div {
    color: red;
}

для модификации Tilda потенциально опаснее, чем:

.bk-custom-card {
    color: red;
}

А если изменение должно работать только в одном стандартном блоке, часто безопаснее дополнительно ограничить его через #rec....

Как безопасно редактировать готовый код

Практический алгоритм:

Сохраните исходную рабочую версию кода.
Прочитайте инструкцию к модификации и найдите конкретное значение, которое нужно заменить.
Меняйте только это значение.
Текст меняйте между тегами.
Ссылку меняйте внутри href="...".
URL изображения меняйте внутри src="...", если в коде действительно используется обычный <img>.
#rec... меняйте только на ID своего блока и только если модификация требует такой привязки.
Не переименовывайте class, id и data-* без необходимости.
Не удаляйте незнакомые атрибуты.
Не меняйте HTML-теги и их вложенность, если задача этого не требует.
Проверяйте кавычки и закрывающие теги.
После изменения опубликуйте страницу и проверьте результат.

Лучше делать изменения по одному. Если вы одновременно поменяли текст, несколько классов, ID, структуру и JavaScript, а затем что-то перестало работать, определить причину будет значительно сложнее.

Быстрая шпаргалка

Вот такой код:

<a
    class="bk-button"
    id="main-button"
    data-action="open"
    href="https://example.com"
>
    Подробнее
</a>

Если задача — поменять текст и ссылку, меняем:

Подробнее

и:

https://example.com

Не трогаем без отдельной причины:

a
bk-button
main-button
data-action="open"

Получаем:

<a
    class="bk-button"
    id="main-button"
    data-action="open"
    href="https://mysite.ru"
>
    О проекте
</a>

Именно такой подход наиболее безопасен при работе с готовыми модификациями: не пытаться «улучшить» незнакомый код, а менять только те данные, которые действительно должны отличаться на вашем сайте.

Если после изменения код перестал работать

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

Дальше проверьте:

не удалена ли кавычка;
не поврежден ли открывающий или закрывающий тег;
не изменен ли class;
не изменен ли id;
не изменен ли data-*;
правильный ли #rec... указан;
не удалена ли часть <style> или <script>;
не изменена ли структура HTML.

Для базовой работы с готовым HTML на Tilda этого достаточно. Вам не нужно знать весь HTML: гораздо важнее научиться отличать контент, который предназначен для замены, от структуры и технических связей, на которые опирается модификация.

HTML для пользователей Tilda: что можно менять в коде, а что нельзя

Как выглядит HTML

Что обычно можно менять

Текст

Ссылки в href

Ссылки на изображения в src

Значения, которые автор модификации специально вынес для замены

Что нельзя менять без понимания последствий

class

id

data-*

Названия HTML-тегов

Неизвестные атрибуты

Следите за кавычками

Не удаляйте открывающие и закрывающие теги

Не путайте HTML, CSS и JavaScript

Где пользовательский HTML размещается в Tilda

Особенность Tilda: #rec...

Почему лучше не использовать слишком общие селекторы

Как безопасно редактировать готовый код

Быстрая шпаргалка

Если после изменения код перестал работать

Ссылки в `href`

Ссылки на изображения в `src`

`class`

`id`

`data-*`

Особенность Tilda: `#rec...`