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

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

You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.

This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).

---

As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.

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

In the future, when HTML5 gains wider adoption, you will be able to use the <legend> and <figure> tags to accomplish this slightly more semantically.

See this post on the W3C mailing list for more information.

---

There is no caption-like tag for a list like a table has. So I'd just give it an <Hx> (x depending on your previously used headers).

---

You can always use <label/> to associate label to your list element:

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

참고URL : https://stackoverflow.com/questions/1141639/how-to-semantically-provide-a-caption-title-or-label-for-a-list-in-html