⚙️
Front-end patterns
  • Введение
  • Шаблоны
    • Эффекты CSS
      • Overlay
      • Анимация display:none
      • Текст
        • Фон текста градиент с анимацией
      • Элементы формы
        • Вертикальное выравнивание placeholder по вертикали
      • Ссылки
        • Градиент как основной цвет
        • Линия под ссылкой ездит слева направо при наведении
      • Скрывать блок .clipped
    • Модальное окно
      • Dialog
    • Элементы формы
      • Select
      • Radio
      • CheckBox
      • Ввод текста (input)
        • Телефон (tel)
        • Почта (email)
      • Кнопка
    • Вкладки/Списки
      • Вкладки или Табы (tabs)
      • Аккордеон (Accordion)
    • Навигация
      • Основная и дополнительная навигация на сайте
        • Анимирование основной навигации
      • Пропустить навигацию
      • Хлебные крошки (Breadcrumbs)
      • Кнопка основной навигации (Бургер)
    • Структуры
      • Контейнер
      • Столбцы
      • Прогресс
      • Горизонтальная прокрутка карточек
      • Цитата
    • Тэги (семантика)
      • Текст
      • Логика
    • Увеличить скорость загрузки страницы
    • Шрифты
  • JS
    • Прокрутка страницы
    • Анимация элементов
  • A11Y
    • Фокус с клавиатуры
    • No sort
  • WordPress
    • Решения и подсказки
    • Плагины
    • Натягиваем сайт
      • Пустая тема
      • Делаем главную (пустую) страницу
      • Подключаем стили и js
      • Заменяем содержимое файлов (header, footer, page)
    • Свой плагин
      • Шаблон
      • Административная часть
      • Пользовательская часть
      • Локализация плагина
  • Ghost
    • Создание своей темы
      • Фалы шаблона
        • Partials
          • footer.hbs
          • header.hbs
          • post_card.hbs
        • index.hbs
        • default.hbs
        • post.hbs
      • Переменные
      • Циклы, условия и функции
  • Visual Studio
  • Gulp
    • Deploy on GitHub
    • Плагин
    • Моя сборка
      • Изображения
  • Регулярные выражения
  • Алгоритмы
    • Поиск
    • Сортировка
    • Поиск в ширину (глубину)
    • Типы данных
  • Конструкторы сайтов
Powered by GitBook
On this page

Was this helpful?

  1. Шаблоны
  2. Тэги (семантика)

Логика

PreviousТекстNextУвеличить скорость загрузки страницы

Last updated 12 months ago

Was this helpful?

<hgroup> Объединяет блоки в группу для одного заголовка

<hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>

<address> размечается контактная информация о человеке, людях или организации.

<time> - для вывода даты и времени

<search> - Семантический тег-обёртка для блока с поиском или фильтром

<menu> - для создания выпадающего или иного меню, не является навигацией


<figure> - небольшая группа элементов, объединённые общим смыслом

<figure> представляет автономное содержимое (необязательно с подписью), являющееся самостоятельным элементом основного потока.

С помощью элемента можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.

<figcaption> - описание для группы элементов внутри <figure>

Можно использовать для:

  • изображения и описания к нему;

  • отформатированный блок текста (код) и описание;

  • Автора и цитату


<dl> - список терминов

<dt> - термин в списке терминов

<dd> - определение термина

<dfn> используется для вывода терминов или расшифровки сокращений.

<dl> и <dt> можно использовать в качестве альтернативы списку <ul> -> <li>. Например в футере, список из социальных сетей или способов связи.

<temaplate> Это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.

<wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если текст не влезает в родительский элемент. Это полезно для адаптивной вёрстки если у вас в тексте есть длинные слова или, например, ссылки.

<video> - для вывода видео

<audio> - для вывода аудио

<data> позволяет хранить в своём содержимом данные в формате, понятном человеку, а в атрибуте value — в формате, понятном машинам.

Жили у бабуси <data value="2">два</data> весёлых гуся.

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

<kbd> обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом.

<output> позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки.

<samp> используется для оформления вывода данных, которые показываются пользователю в результате выполнения программы. Содержимое этого элемента воспринимается устройствами как простой текст.

У <dfn> есть встроенная . не рассказывают о роли, но зачитывают саму аббревиатуру и её расшифровку из title.

<fieldset> группирует элементы формы (поля ввода , , выпадающие списки и другие) в блок с характерным выделением границ. Опционально с помощью тега внутри <fieldset> можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).

У тега есть встроенная роль . Благодаря ей пользователи знают, что содержимое было удалено.

У тега есть встроенная . Благодаря ей пользователи знают, что содержимое было добавлено.

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

https://doka.guide/html/time/
роль term
Скринридеры
<input>
<textarea>
<select>
<legend>
deletion
скринридеров
роль insertion
скринридеров
status
скринридеры