Основные структурные элементы

Эти элементы определяют структуру и семантику различных частей веб-страницы.

-

- Заголовки

Заголовок первого уровня (h1)

Заголовок второго уровня (h2)

Заголовок третьего уровня (h3)

Заголовок четвертого уровня (h4)

Заголовок пятого уровня (h5)
Заголовок шестого уровня (h6)

- Параграф

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

и

Это блочный
.

Текст со строчным внутри.

Семантические теги HTML5

- Горизонтальный разделитель

Текст до разделителя.

Текст после разделителя.

Форматирование текста

Элементы для стилизации и семантического выделения текста.

Базовое и семантическое выделение

Жирный, Курсив, Подчеркнутый, Зачеркнутый.

Важный, Акцентированный, Выделенный.

Текст с надстрочным и подстрочным индексами.

Мелкий текст. Удаленный Вставленный.

Код, цитаты, аббревиатуры

Инлайн код: const x = 10;

Блок кода (

):

                        
function greet() {\n  return "Hello";\n}

                        
 Цитата.
—  Автор

                        
HTML

Списки

    ,
      ,

Маркированный (

    ):

    • Элемент 1
    • Элемент 2
      • Вложенный 2.1

Нумерованный (

    ):

    1. Третий
    2. Четвертый

Определений (

):

Термин
Описание

Элементы Форм

Текстовые поля ввода

Дата, время, цвет, диапазон, файл

(5)

Переключатели, списки, кнопки

Радио кнопки (type="radio")
Чекбоксы (type="checkbox")

Вывод, прогресс, измеритель

70%
25 из 100 (низкое)
50 из 100 (среднее)
75 из 100 (высокое)

Медиа Элементы

- Изображение

Пример изображения-плейсхолдера

Атрибут loading="lazy" для отложенной загрузки. Всегда используйте alt.

и

Изображение в Figure
: Подпись к изображению в
.

- Адаптивные изображения

Адаптивное изображение

Браузер выберет подходящий источник из тегов .

Аудиоплеер ():

Видеоплеер ():

Добавьте файлы example.mp3/ogg в папку audio/ и example.mp4/webm, captions_ru.vtt в папку video/ для корректной работы. Сейчас они не будут загружены.

- Векторная графика

Красный круг SVG

- Холст для рисования

Ваш браузер не поддерживает canvas.

требует JavaScript для рисования. См. js/main.js для примера.

Таблицы

Простая таблица ()
: Итог таблицы
: Название таблицы
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Заголовок строки Ячейка 2.2 (colspan="2")
Ячейка 3.1 (rowspan="2") Ячейка 3.2 Ячейка 3.3
Ячейка 4.2 Ячейка 4.3

Интерактивные элементы и UI паттерны

и (Аккордеон)

: Кликни, чтобы раскрыть

: Это скрытое содержимое, которое появляется по клику.

Этот блок открыт по умолчанию (open)

Еще немного скрытого содержимого.

- Модальное окно

Заголовок модального окна

Это содержимое модального окна (

).

Можно добавить форму или любую другую информацию.

Для управления открытием/закрытием

используется JavaScript.

Карточки (Cards)

Изображение для карточки

Заголовок карточки

Краткое описание или текст для карточки. Это популярный UI паттерн.

Действие

Карточка без изображения

Можно использовать карточки и без изображений, только с текстовым контентом.

Узнать больше

Уведомления (Alerts)

Значки/Теги (Badges/Tags)

Заголовок с бейджем Новинка!

Тег 1 Тег 2 (важный)

Индикаторы загрузки (Loaders/Spinners CSS)

Пагинация (Pagination)

CSS Демонстрации

aspect-ratio

16:9
1:1 (Квадрат)

Свойство aspect-ratio позволяет легко задавать пропорции для элементов.

scroll-snap

Элемент 1
Элемент 2
Элемент 3
Элемент 4

scroll-snap улучшает UX при прокрутке последовательности элементов.

Логические свойства CSS

Этот блок использует padding-block, padding-inline, margin-block-start, border-inline-start. Это делает стили независимыми от направления письма (LTR/RTL).

accent-color

Это свойство уже применено глобально (см. :root в CSS). Оно влияет на элементы форм:

accent-color позволяет легко стилизовать акцентный цвет стандартных элементов форм.