🔥 РЕДКИЕ HTML-ТЕГИ, КОТОРЫЕ ЭКОНОМЯТ ВРЕМЯ

Про базовые теги все знают. А эти часто забывают, хотя они реально упрощают жизнь.

—

🧩 ДЛЯ ТЕКСТА И ЦИТАТ:

<mark> — выделяет текст жёлтым маркером. Удобно для поисковых запросов или акцентов.

<small> — делает текст мелким. Для комментариев, дисклеймеров, копирайта.

<sub> и <sup> — подстрочный и надстрочный текст. Химия (H₂O), математика, сноски.

<del> и <ins> — зачёркнутый и вставленный текст. Для правок, изменений в документах.

<kbd> — обозначение клавиш клавиатуры. Например: <kbd>Ctrl</kbd> + <kbd>C</kbd>.

<samp> — вывод программы или примера данных.

<var> — переменная в математике или программировании.

—

⚙️ ДЛЯ КОДА И РАЗМЕТКИ:

<code> — отображение кода. Браузер показывает моноширинным шрифтом.

<pre> — сохраняет форматирование (пробелы, переносы). Для стихов, примеров кода.

<wbr> — указывает место возможного переноса в длинном слове. Полезно для URL или длинных терминов.

<bdi> — изолирует текст, который может читаться в другом направлении. Для арабского, иврита.

—

📱 ДЛЯ МЕДИА:

<track> — субтитры для видео. Можно подключать несколько языков.

<source> — несколько форматов для audio/video. Браузер выберет поддерживаемый.

<map> и <area> — карта изображения с кликабельными зонами.

—

🛠 ТЕХНИЧЕСКИЕ:

<template> — шаблон, который не отображается, но может быть клонирован через JS. Для динамических интерфейсов.

<slot> — используется с Web Components для вставки контента в тени.

<output> — отображение результата вычислений (например, в формах).

—

📌 КОРОТКО:

• <mark> — выделение
• <kbd> — клавиши
• <wbr> — переносы
• <track> — субтитры
• <template> — шаблоны

Сохраняй, чтобы не забыть. В следующий раз разберём CSS-свойства, которые реально нужны в работе.

Какой тег юзаете редко, но он реально выручает? 👇

#html #верстка #шпаргалка #обучение #фронтенд