HTML에서 목록에 대한 캡션, 제목 또는 레이블을 의미 론적으로 제공하는 방법

HTML 목록에 의미 캡션 을 제공하는 적절한 방법은 무엇입니까 ? 예를 들어, 다음 목록에는 "제목"/ "캡션"이 있습니다.

과일

• 사과
• 배
• 주황색

"과일"이라는 단어가 목록 자체와 의미 적으로 연관되도록 어떻게 처리해야합니까?

마크 업을 효과적으로 구성하는 캡션이나 제목 요소는 없지만 동일한 효과를 가질 수 있습니다. 몇 가지 제안이 있습니다 :

중첩 목록

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

목록 앞의 제목

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

정의 목록

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

옵션 1

HTML5에는 figure및 figcaption요소가 있습니다.

예:

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

그런 다음 CSS로 쉽게 스타일을 지정할 수 있습니다.

옵션 2

CSS3의 :: before pseudo-element를 사용하는 것이 좋은 해결책이 될 수 있습니다 :

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;
}

물론 다른 선택기를 사용할 수 있습니다 ul[title]. 예를 들어 'head-as-header'클래스를 추가하고 ul.title-as-header::before대신 사용할 수 있습니다.

이것은 전체 목록에 대한 툴팁을 제공하는 부작용이 있습니다. 이러한 툴팁을 원하지 않는 경우 대신 데이터 속성 (예 : <ul data-title="fruit">및 ul[data-title]::before { content: attr(data-title); })을 사용할 수 있습니다 .

내가 아는 한, 현재 HTML 사양에는 표와 같이 목록에 대한 캡션을 제공하는 조항이 없습니다. 지금은 분류 된 단락이나 헤더 태그를 사용하고 있습니다.

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

앞으로 HTML5가 더 널리 채택되면 <legend>및 <figure>태그를 사용하여 이를 약간 더 의미 적으로 수행 할 수 있습니다 .

자세한 내용 은 W3C 메일 링리스트 의이 게시물 을 참조하십시오.

스크린 리더가 목록을 관련 제목에 aria-labelledby연결하도록하려면 다음 id과 같이 제목에 연결됨을 사용할 수 있습니다 .

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

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

이전 답변에서 언급했듯이 제목 수준이 문서의 제목 순서를 따르는 지 확인하십시오.

표와 같은 목록에는 캡션과 같은 태그가 없습니다. 그래서 나는 <Hx>(이전에 사용한 헤더에 따라 x)를 줄 것 입니다.

나는 이것이 오래되었다는 것을 알고 있지만 미래의 사람들을 위해 찾은 답변을 추가하고 싶었습니다. https://www.w3.org/MarkUp/html3/listheader.html

<lh>요소 사용 :

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

이전 브라우저를 지원하는 솔루션을 찾으려고했기 때문에 지나치게 단순화 된 솔루션이 있습니다. 테이블 표시 스타일 및 ID / 클래스 사용 :

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

그런 다음 display: table-row;CSS의 요소에 스타일을 적용합니다 .

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

설명 목록을 사용하는 경우 훨씬 더 잘 작동합니다. 동일한 질문이있을 때 수행 한 작업입니다. 이 경우 dl 목록 내에서 div 요소가 지원 <div>되므로 HTML 및 display: table-caption;CSS 에서 사용할 수 있습니다 .

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

CSS에서 캡션에 다양한 스타일을 적용 할 수 있습니다.

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

나는 그것이 table-caption잘 작동하지 않는다는 것을 알아야 합니다.ul/ol 이 블록 요소로 취급 될 때 텍스트가 아마 당신은 원하지 않는, 수직으로 정렬됩니다.

Firefox와 Chrome에서 이것을 테스트했습니다.

언제든지를 사용 <label/>하여 목록 요소에 레이블을 연결할 수 있습니다 .

<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>