Клавиша / esc

<caption>

Добавляет подпись таблице.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано
        
          
          <table>  <caption>Сводная таблица лайков</caption>  ...</table>
          <table>
  <caption>Сводная таблица лайков</caption>
  ...
</table>

        
        
          
        
      

Как пишется

Скопировано

Тег <caption> должен идти сразу после открывающего тега <table>. По умолчанию подпись визуально располагается сразу перед таблицей. Но её положением можно управлять при помощи свойства caption-side. Вне зависимости от визуального расположения подписи скринридер прочитает её перед таблицей.

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

Как понять

Скопировано

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

Подсказки

Скопировано

💡 Применимы любые CSS-свойства.

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировано

Элемент <legend> используется для создания группового заголовка или подписи элементов внутри <fieldset>. Он помогает описать или идентифицировать группу элементов в форме. С точки зрения доступности использование <legend> может быть полезным для сценариев чтения с экрана, поскольку он явно связывает группу элементов с их заголовком.

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

Элемент <label> используется для связывания подписи с элементом формы — <input>, <select> или <textarea>. Он помогает пользователю понять, какому полю ввода принадлежит текст подписи. С точки зрения доступности использование элемента <label> позволяет пользователям использовать элементы формы без необходимости точного наведения на соответствующее поле ввода и повышает удобство использования для людей с инвалидностью.

Таким образом, сходство между этими элементами заключается в том, что все они предоставляют текстовое содержимое, которое помогает описывать, идентифицировать или связывать элементы в HTML-документе. Однако каждый элемент имеет свою специфическую функциональность и применение, относящиеся к разным компонентам HTML-структуры.