Non Semantic List Use Case Using the span tag for lists in interactive elements and other non-semantic contexts.
Important Notes: This has more of a decorative context than a semantic one or for organize content, making it more readable and visually balanced. Sometimes there are situations where we need to create a list inside an interactive element, like a button. In these cases, we cannot use standard list tags like ul or ol because, for semantic reasons, certain HTML tags cannot be nested inside others. This is an example of when it's appropriate to use the span tag to wrap list items, ensuring both functionality and semantic correctness. Additionally, there are other contexts where using ul or ol is not semantically appropriate, such as within specific structural or inline elements, and in such cases, the span tag offers a more suitable solution.
Demo
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..

Latest News Semptember 2024

Headline link

Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 1',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 2',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 3',
  } only %}
{% endset %}

{% include '@bolt-elements-list/list.twig' with {
  content: list_items,
  tag: 'span'
} only %}
HTML
<span class="e-bolt-list">
  <span class="e-bolt-list__item">Item 1</li>
  <span class="e-bolt-list__item">Item 2</li>
  <span class="e-bolt-list__item">Item 3</li>
</span>