Jak semantycznie podać podpis, tytuł lub etykietę listy w formacie HTML

Jaki jest właściwy sposób umieszczenia podpisu semantycznego na liście HTML? Na przykład poniższa lista ma „tytuł” ​​/ „podpis”.

Owoc

• jabłko
• Gruszka
• Pomarańczowy

Jak należy traktować słowo „owoc”, aby było ono semantycznie powiązane z samą listą?

Chociaż nie ma elementu podpisu ani nagłówka, który skutecznie strukturyzuje kod, może mieć ten sam efekt. Oto pewne sugestie:

Lista zagnieżdżona

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

Nagłówek przed listą

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

Lista definicji

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

opcja 1

HTML5 ma elementy figureifigcaption , które moim zdaniem działają całkiem nieźle.

Przykład:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

Są one następnie łatwo stylizowane za pomocą CSS.

Opcja 2

Przyjemnym rozwiązaniem może być użycie pseudoelementu :: before w CSS3:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

Możesz oczywiście użyć innego selektora niż ul[title]; na przykład możesz dodać klasę „tytuł-jako-nagłówek” i użyć ul.title-as-header::beforezamiast niej lub czego potrzebujesz.

Ma to efekt uboczny polegający na wyświetleniu podpowiedzi dla całej listy. Jeśli nie chcesz takiej podpowiedzi, możesz zamiast tego użyć atrybutu danych (np. <ul data-title="fruit">I ul[data-title]::before { content: attr(data-title); }).

O ile mi wiadomo, w aktualnych specyfikacjach HTML nie ma przepisów dotyczących umieszczania podpisu dla listy, tak jak ma to miejsce w przypadku tabel. Zostałbym na razie przy użyciu sklasyfikowanego akapitu lub tagu nagłówka.

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

W przyszłości, gdy HTML5 zyska szersze zastosowanie, będziesz mógł użyć tagów <legend>i <figure>, aby osiągnąć to nieco bardziej semantycznie.

Zobacz ten post na liście mailingowej W3C, aby uzyskać więcej informacji.

Aby upewnić się, że czytniki ekranu łączą listę z powiązanym nagłówkiem, możesz użyć aria-labelledbypołączenia z nagłówkiem o idpodobnej treści:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

Jak wspomniano w poprzedniej odpowiedzi, upewnij się, że poziom nagłówków jest zgodny z kolejnością nagłówków w dokumencie.

Nie ma tagu podobnego do podpisu dla listy takiej jak tabela. Więc dałbym mu po prostu <Hx>(x w zależności od poprzednio używanych nagłówków).

Wiem, że to stare, ale chciałem dodać odpowiedź, którą znalazłem dla przyszłych ludzi: https://www.w3.org/MarkUp/html3/listheader.html

użyj <lh>elementu:

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Ponieważ próbowałem znaleźć rozwiązanie obsługujące starszą przeglądarkę, mam rozwiązanie, które może być zbyt uproszczone. Korzystanie ze stylów wyświetlania tabel i identyfikatorów / klas:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

Następnie zastosuj display: table-row;styl do elementu w CSS:

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

Działa to znacznie lepiej, jeśli używasz listy opisów, co robiłem, gdy miałem to samo pytanie. W takim przypadku możesz użyć <div>w HTML i display: table-caption;CSS, ponieważ elementy div są obsługiwane na liście dl:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

W CSS możesz zastosować różne style do podpisu:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

Powinienem zauważyć, że table-captionnie działa tak dobrze wul/ol ponieważ jest traktowany jako element blokowy, a tekst zostanie wyrównany w pionie, czego prawdopodobnie nie chcesz.

Przetestowałem to w przeglądarce Firefox i Chrome.

Zawsze możesz użyć, <label/>aby powiązać etykietę z elementem listy:

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>