Enter
    Расширенный поиск
    Клавиша / esc

    HTML

    <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-структуры.

    Читайте также

    • Гайд по flexbox

      Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

    • Гайд по grid

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