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

Question

a를 제공하는 적절한 방법은 무엇입니까? 시맨틱 HTML 목록에 대한 캡션? 예를 들어 다음 목록에는 "제목"/"캡션"이 있습니다.

과일

• 사과
• 배
• 주황색

"과일"이라는 단어는 어떻게 목록 자체와 의미 적으로 관련되어있는 방식으로 처리되어야합니까?

Answer 1

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

중첩 된 목록

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

Answer 2

옵션 1

html5가 있습니다 figure 그리고 figcaption 집단, 나는 일이 아주 멋지게 발견됩니다.

예시:

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

그런 다음 CSS와 쉽게 스타일링됩니다.

---

옵션 2

pseudo element 전에 css3 's ::를 사용하면 좋은 해결책이 될 수 있습니다.

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]; 예를 들어, '제목 AS-Header'클래스를 추가하고 사용 할 수 있습니다. ul.title-as-header::before 대신, 또는 필요한 것은 무엇이든.

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

Answer 3

내가 아는 한, 테이블과 같이 목록에 대한 캡션을 제공하기위한 현재 HTML 사양에는 조항이 없습니다. 나는 지금 분류 된 단락이나 헤더 태그를 사용하여 머물러 있습니다.

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

앞으로 HTML5가 더 넓은 채택을 얻을 때 <legend> 그리고 <figure> 이것을 조금 더 의미 적으로 달성하기위한 태그.

보다 이 게시물 자세한 내용은 W3C 메일 링리스트에 있습니다.

Answer 4

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

Answer 5

항상 사용할 수 있습니다 <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>