Каков наиболее подходящий способ использовать элемент «заголовок» HTML в современном виде?

Question

Они используются с CSS? (Без таблиц?)

Как они используются?

Пожалуйста, приведите примеры.

Answer 1

CSS-свойство caption-side используется, чтобы указать, где будет располагаться заголовок относительно таблицы (то есть над или под таблицей).

Syntax:   caption-side: <value> Possible Values:  

* top
* bottom
* inherit

Начальное значение: сверху Применяетсяto: Таблицы с заголовком Унаследовано: Да Носитель: Визуальный пример:

заголовок {сторона заголовка: внизу;
ширина: авто;выравнивание текста: слева;}

<style type="text/css">
caption {
  caption-side: bottom;
  width: auto;
  text-align: left;
  }
</style>
<table border="1">
  <caption>This is the caption</caption>
  <tr>
    <td>Try changing the values to see the effect it has on the position of the caption.</td>
  </tr>
  <tr>
    <td><b>Note:</b> If this is not working, your browser might not support the caption-side property. At the time of writing, browser support for the caption-side property was limited.</td>
  </tr>
</table>

Answer 2

Этот элемент должен использоваться для обеспечения краткого заголовка таблицы;его не следует использовать для предоставления описания структуры таблицы, как это можно сделать с помощью атрибута сводки таблицы.

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

Элемент caption можно использовать только один раз дляtable и должен следовать сразу за начальным тегом table.

Хотя элемент заголовка кажется наиболее подходящей разметкой для маркировки table, и на самом деле он намеревается label таблица данных впочти так же, как вы могли бы предоставить подпись для изображения в книге.Однако в большинстве печатных изданий заголовки для иллюстраций, изображений и таблиц обычно появляются после элемента, тогда как элемент заголовка находится перед таблицей.Сочетание плохих параметров стиля для caption с CSS и плохой поддержки выравнивания привело к тому, что многие вместо этого предпочли таблицы с элементами заголовка 1-6 (например, элемент h3).Это позволяет некоторым людям, использующим вспомогательные технологии, такие как программы чтения с экрана, переходить от заголовка к заголовку в документе (существуют способы навигации по заголовкам, а также для вывода списка заголовков на странице).Однако следует отметить, что заголовок действительно предназначен для указания содержимого всего раздела, следующего за заголовком, вплоть до того места, где находится следующий заголовок, а не одной отдельной части страницы, как caption.Элемент caption является правильной разметкой для обозначения table, но не удивляйтесь, если вы увидите, что люди используют вместо этого заголовки.

Пример

Вот заголовок таблицы, который обеспечивает визуальное резюме и заголовок все в одном:

<table border="1">
  <caption>Interest Rates for Young Saver Accounts</caption>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>