Какой элемент HTML для семантических обозначений?

Мне нравится добавлять отзывчивые sidenotes к моим сообщениям в блоге. Отзывчиво, как в: скрыто в маленьких окнах просмотра, видно на полях в широких окнах просмотра.

Когда скрыто на маленьких экранах, необходим видимый элемент ("ссылка"), указывающий на то, что нужно читать. Мое решение для этого до сих пор:

<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
  underlined text
  <span class="sidenote__content">
    Sidenote content
  </span>
</span>, which is clickable on small viewports.</p>

(с добавлением разрывов строк для удобства чтения)

С помощью CSS я добавляю звездочки как к подчеркнутому тексту, так и к содержимому sidenote, чтобы визуально связать их на больших экранах.

Проблемы с этим решением состоят в том, что правильное отображение sidenote__content зависит от CSS. Это показано в читателях, как Pocket, с:

  • Содержимое sidenote отображается в середине предложения без каких-либо визуальных подсказок
  • Нет пробела между подчеркнутым текстом и содержимым sidenote.

Я надеюсь, что есть более семантическое решение, чем простые промежутки. <aside> и <section> нельзя использовать, поскольку они являются блочными элементами, и может автоматически закрывать родительский элемент p.

Решением может быть отделение контента sidenote от ссылки. Однако я предпочел бы сохранить набор sidenote и его ссылку как один набор или пару, чтобы они могли быть вставлены как таковые в сообщения. Их разделение потребовало бы логики javascript для сопоставления ссылок с их содержимым и может вызвать проблемы с обслуживанием, когда отсутствует одна половина набора.

ОТВЕТЫ

Ответ 1

У проблемы есть 5 проблем:

  1. Выберите правильный элемент HTML для диапазона, на который ссылается sidenote.
  2. Выберите правильный HTML-элемент для содержания sidenote:
    • Содержимое Sidenote должно быть стилизованным
    • Содержимое Sidenote может содержать интерактивные элементы, которые могут получить фокус клавиатуры
  3. Убедитесь, что выбранные элементы не вызывают автоматическое закрытие родительского тега <p>.
  4. Убедитесь, что режимы чтения и чтения, такие как Pocket, отображают содержимое sidenote типографски приемлемым способом.
  5. Убедитесь, что содержимое sidenote читается программами чтения с экрана, что имеет смысл.

** Решение проблемы 1 ** Внешний вид ссылки в основном носит презентационный характер, так как не обеспечивает взаимодействия с широкими областями просмотра. Простого <span> может быть достаточно. Если рядом с "ссылкой" появляется (и так будет), я не вижу необходимости или цели включать href или id, как в сносках.

Решение проблемы 2 и 3

Используйте тег <small> для содержания sidenote (MDN, W3C).

Решение проблемы 4 и 5

Добавьте интервалы с пробелом перед и круглые скобки вокруг содержимого sidenote, чтобы они не отображались в режимах чтения. Для программ чтения с экрана добавьте 'sidenote:' тоже. Результат будет выглядеть так:

(sidenote: here a sidenote)

Скрыть их с помощью CSS.

Решения в сочетании

HTML:

<!-- line breaks added for readability.
Remove them to avoid rendering of superfluous spaces. -->
<p> A paragraph with a
  <span class="sidenote">
    <span
      tabindex="0"
      class="sidenote__button onclick="this.classList.toggle('active');"
      onKeypress="if(event.key === 'Enter' || event.key === ' '){event.preventDefault(); this.parentNode.classList.toggle('active');
    >
      clickable element
    </span>
    <small class="sidenote__content" >
      <span class="sidenote__content-parenthesis"> (sidenote: </span>
      The content of the sidenote. CSS (not included in the example below) will hide this span on small viewports. On large viewports it is shown next to the main text.
      <span class="sidenote__content-parenthesis">)</span>
    </small>
  </span>
that can be clicked to show more details.
</p>

Содержание в .sidenote__parenthesis предназначено для программ чтения с экрана. Не все программы чтения с экрана произносят круглые скобки, поэтому текст sidenote: внутри первого промежутка с этим классом.

CSS:

.sidenote__content-parenthesis{
  // Hide from view, but not from screen readers.
  text-indent: -99999px;
}

@media (max-width: 1000px){
  .sidenote__content{
    // Hide from view, but not from screen readers.
    // The vertical position does not change, which is better for handling keyboard focus than 'text-indent: -99999px;'
    position: absolute;
    left: -99999px;
    top: auto;
  }
  .sidenote.active .sidenote__content{
    position: relative;
    left: auto;
  }
}

@media (min-width: 1000px){
  .sidenote__content{
    display: block;
    position: absolute;
    right: 0;
    margin-right: -300px;
    width: 200px;
  }
}

Ответ 2

С моей точки зрения, вы должны использовать тег details.

Элемент HTML Details() создает виджет раскрытия в какая информация видна только когда виджет переключается в "открытое" состояние. Резюме или метка может быть предоставлена с использованием Элемент.

С семантической точки зрения этот тег предназначен именно для того, что вам нужно.

Более подробную информацию можно найти на MDN

Проблема в том, что прямо сейчас Edge не поддерживает тег, но он находится "в разработке", согласно Microsoft.

Ответ 3

Я думаю, что вы ищете тег аббревиатуры

Элемент <abbr> используется вместе с атрибутом title , чтобы связать полнотекстовое объяснение с аббревиатурой или аббревиатурой. Посетители сайта не видят текст в атрибуте title, но браузеры, поисковые системы и вспомогательные технологии используют эту информацию [источник]

Подробнее:

Ответ 4

Я не совсем уверен, какие sidenotes вы хотите отобразить, но с семантической точки зрения я думаю, что элемент <dfn> может быть хорошим выбором:

Элемент HTML Definition (& lt; dfn & gt;) используется для указания термина, определяемого в контексте фразы или предложения определения.

Категории контента Поток контента, фразировка контента, ощутимый контент.

Разрешенный контент Фразирование контента, но ни один элемент не должен быть потомком.

Из вашего требования я бы предположил, что на большом экране было бы неплохо отобразить определение в пределах <aside>

HTML & lt; в сторону & gt; элемент представляет часть документа, содержание только косвенно связано с основным содержанием документа. Отклонения часто представляются в виде боковых панелей или всплывающих окон.

И последнее, но не менее важное: на маленьких экранах можно выбрать атрибут title, поскольку он открывается только тогда, когда элемент находится в фокусе. Также это может быть использовано параллельно с большим экраном без вреда.