Тег <button>: кнопка

1. Что это и зачем

Интерактивная кнопка для действий интерфейса: отправка форм, вызов скриптов.

Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.

2. Синтаксис и пример

<button type="button">Сохранить</button>

Запись выше — базовый вариант использования. Обратите внимание, как тег : кнопка вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

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

В реальной разметке тег

: кнопка встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.

Проверяйте вёрстку валидатором W3C: правильная вложенность тегов и закрытие обязательных элементов влияют и на доступность, и на SEO.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Тег поддерживается всеми современными браузерами и не требует префиксов. Старые браузеры игнорируют незнакомые теги, но HTML-парсер при этом не «ломается»: страница просто покажет содержимое без разметки, поэтому безопасно использовать тег и дополнять его CSS-стилями.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Внутри формы кнопка по умолчанию type=submit — отправляет её; ставьте type=button осознанно.

Кнопку лучше размечать тегом button, а не ссылкой или div: доступность и фокус из коробки.

7. Практическое задание

Сверстайте три кнопки разных типов в одной форме.

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

<button type="button">Сохранить</button>

Запустить