Tilda Education
/
Маркетинг
/
Как написать простой HTML для сайта

I'm available for business trips to other cities for projects lasting a month or longer.

Как написать простой HTML для сайта

Разбираемся, какие задачи поможет решить базовый HTML-код, как его написать или использовать готовый.

7 сентября 2026

13 минут

Александра Ворошилова

Автор статьи

Когда нужно добавить на сайт что-то нестандартное (нестатичную карту, сложную форму обратной связи или просто небольшой кастомный элемент), кажется, что без разработчика и серьёзного кода не обойтись — включается страх. Но для многих задач достаточно базового знания HTML.

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

Из статьи вы узнаете:

Зачем знать HTML и где он нужен
Почему HTML — это не сложно
Как работает HTML на простом примере
Из чего состоит HTML: базовые элементы, которые используются чаще всего
Как использовать HTML в Tilda
Где найти готовые HTML-коды

Зачем знать HTML и где он нужен

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

HTML поможет решить на сайте такие задачи:

Вставить CTA в нестандартное место. Добавить ссылку или кнопку именно туда, где она нужна: в текстовый блок, на баннер, в подпись к картинке.

Встроить внешние сервисы. Вшить видео с YouTube, карту, форму подписки, календарь записи, чат-виджет, отзывы из внешнего сервиса и другие embed-элементы.

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

Точечно форматировать контент. Выделить важный фрагмент, оформить подпись, добавить список, вставить цитату, отдельную плашку или ссылку на документ.

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

От автора: HTML делает сайт гибче без помощи разработчиков и помогает не упираться в ограничения конструктора.

Почему HTML — это не сложно

Многие представляют себе HTML как длинные строки кода, непонятные команды и высокий риск всё сломать. Но этот язык разметки работает иначе, чем программирование. Его проще воспринимать не как страшный код, а как понятную систему пометок для страницы.

	HTML	Язык программирования
Что это	Язык разметки. Описывает структуру страницы: где текст, где картинка, где ссылка.	В первую очередь, задаёт логику и поведение: что должно произойти при определённых условиях.
Главная задача	Показать браузеру, как организован контент на странице.	Сказать системе, что делать: вычислять, проверять условия, запускать действия, обрабатывать сценарии.
Как выглядит на практике	Набор тегов вроде заголовка, абзаца, ссылки, блока с видео.	Инструкции, по которым программа выполняет действия — меняет поведение интерфейса, проверяет и отправляет данные
Нужна ли логика	Обычно нет: достаточно разметить элементы на странице и указать, что на ней находится.	Да: важна последовательность действий, условия, типы переменных и связи между частями кода.

Что нужно знать новичку, чтобы начать

HTML состоит из тегов

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

Например, тег абзаца выглядят так: <p>Текст абзаца</p>.

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

Например, есть родительский элемент — <div>, открывающий большой блок, а внутри него — дочерние элементы: текст, изображение, ссылка или другой блок поменьше. В свою очередь, внутри дочернего элемента тоже могут находиться свои элементы.

В область, выделенную жёлтым, входит голубая, а в неё, в свою очередь, заголовок «Создайте впечатляющий сайт…» Это можно увидеть в коде: под <div class="t935 title t-title"> идёт <span> с соответствующим текстом.

Важно быть внимательным к символам

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

Достаточно понимать логику

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

Александра Ворошилова

автор статьи

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

Как работает HTML на простом примере

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

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

<a href="https://example.com/form">Оставить заявку</a>

Строка устроена достаточно просто. В ней всего несколько частей, каждая выполняет свою отдельную задачу:

<a … >	Открывающий тег ссылки	Сообщает браузеру, что сейчас начнётся новый элемент — ссылка. Любой тег открывается символом «<», за ним следует буква, буквосочетание или слово, которое определяет, что это за элемент. Буква «a» здесь означает «anchor», то есть «якорь» или «якорная ссылка».
href=" … "	Атрибут внутри тега	Указывает адрес, по которому нужно перейти после клика.
https://example.com/form	Сам адрес, по которому нужно перейти после клика
Оставить заявку	Содержимое тега	Текст, который пользователь увидит на странице — то, на что он должен нажать для перехода по ссылке.
</a>	Закрывающий тег ссылки	Сообщает браузеру, где ссылка заканчивается. Большинство тегов закрываются символами «/ … >», где на месте «…» — та же буква или слово, что и в открывающем теге.

Из чего состоит HTML: базовые элементы, которые используются чаще всего

В готовых фрагментах кода встречаются несколько классических элементов, которые помогают решать типичные задачи: оформить текст, вставить изображение, добавить кнопки и ссылки, встроить видео и т. п.

Теги — основа HTML-разметки

Это строительные блоки любой HTML-страницы. Они «объясняют» браузеру, что показывать и что делать.

У большинства тегов есть открывающие и закрывающие части — браузеру нужно понимать, где элемент начинается и где заканчивается. Поэтому конструкция обычно выглядит так: сначала идёт открывающий тег, потом содержимое, которое пользователь увидит на странице, а затем закрывающий. Например, так работает тег текста заголовка: <h1>Заголовок</h1>.

Некоторые элементы не требуют закрывающего тега — всё необходимое записывается в открывающем. Например, тег изображения выглядит так: <img src="image.jpg" alt="Изображение">. (Тега </img> нет.)

Атрибуты — настройка элементов

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

Рассмотрим тег для ссылки: <a href="https://example.com" target="_blank">Открыть сайт Tilda</a>.

Тег <a> создаёт ссылку, а атрибуты href и target помогают её настроить:

href="https://example.com" — указывает, куда должна вести ссылка;
target="_blank" — говорит браузеру, чтобы он открыл эту ссылку в новой вкладке.

Александра Ворошилова

автор статьи

Атрибуты — это то место, где обычно происходит настройка готового HTML-кода под свои задачи. Именно здесь вы будете менять адреса ссылок, подставлять свои изображения, форматировать тексты. Поэтому важно понять повторяющийся принцип: тег отвечает за тип элемента, а атрибуты — за то, как браузер его покажет. Когда это становится ясным, HTML перестаёт выглядеть, как хаотичный набор символов, и начинает читаться намного легче.

Текстовые элементы и ссылки

Заголовки обозначаются тегами от <h1> до <h6> (h от header — «заголовок») в зависимости от иерархии.

Абзацы помещают в тег <p> (p от paragraph — «абзац»). Это нужно, чтобы браузер понимал, где начинается и заканчивается отдельный смысловой блок текста. Если на странице несколько абзацев, каждый обычно оформляется отдельно.

Текст можно выделять тегами для форматирования, например <b> (bold) для жирного или <i> (italic) для курсива.

Ссылки создаются тегом <a> с атрибутом href. Внутри тега размещается текст, который увидит пользователь, а в атрибуте — сама ссылка на сайт.

<h1>HTML для новичков: перестаньте бояться кода за один вечер</h1>

<h2>Бесплатный вебинар для тех, кто работает с Tilda</h2>

<p>Всего за час вы узнаете, что такое HTML, почему он гораздо проще, чем кажется, и как с его помощью добавить на сайт кнопки, ссылки, видео и другие полезные элементы. <i>Никакого опыта в программировании не потребуется</i> — вебинар рассчитан на <b>новичков</b>, которые только начинают знакомиться с разметкой.</p>

<p>Мы покажем, как использовать HTML в <a href="https://tilda.ru">Tilda</a>, объясним базовые теги на простых примерах и разберём, какие фрагменты кода можно смело использовать даже без специальных знаний. А эта статья станет вашим практическим конспектом.</p>

Мультимедийный контент

Изображения вставляются тегом <img> (image), внутри него указывается адрес картинки в атрибуте src (source).

Видео и другие встраиваемые элементы (например карты) добавляются тегом <iframe> с атрибутом src.

В теге <img>, помимо прочих атрибутов, есть src с ссылкой на картинку.

Как использовать HTML в Tilda

Когда стандартных возможностей Tilda недостаточно, можно вставить специальный блок для кода — T123 из категории «Другое».

С чем он может помочь:

разместить форму стороннего сервиса;
подключить чат или онлайн-консультанта;
вставить календарь бронирования;
кастомизировать кнопку или ссылку;
использовать готовый embed-код практически любого сервиса.

От автора: Во многих случаях именно HTML является способом интеграции Tilda с внешними платформами. Чаще всего писать код самостоятельно не приходится — многие сервисы сами генерируют его для вставки. Обычно рядом с нужным элементом есть кнопка «Embed», «Встроить», «Получить код» или «Share» — при нажатии сервис показывает готовый HTML-фрагмент, который достаточно скопировать и вставить в Tilda.

В Яндекс Картах есть возможность поделиться картой.

Помимо ссылки на неё, можно скопировать код с картой или с отзывами.

Так на сайте будет выглядеть добавленная карта. В скопированном коде можно также менять параметры, например длину или ширину отображаемого кусочка.

Где найти готовые HTML-коды

CodePen

Разработчики со всего мира делятся готовыми решениями: кнопками, карточками, меню, анимациями, формами, галереями и другими элементами интерфейса.

Код глитч-эффекта для кнопок. Результат — сразу рядом с кодом.

Free Frontend

Сотни готовых HTML-решений: кнопки, карточки товаров, меню, формы обратной связи, анимации, переключатели, галереи. Примеры разбиты по категориям, найти подходящий вариант достаточно просто.

Так будет выглядеть встроенный календарь.

А вот часть кода, который его отобразит на сайте.

CodeHim

Можно найти как совсем простые элементы, так и более необычные решения — например, таймеры, аккордеоны, карточки команд, ценовые таблицы и интерактивные блоки.

Таким получится калькулятор.

Часть кода, которая его встроит.