목록에 의미 론적으로 제목을 추가하는 방법

이것은 한동안 나를 괴롭 혔고, 이것을 올바르게 수행하는 방법에 대한 합의가 있는지 궁금합니다. HTML 목록을 사용할 때 목록의 헤더를 의미 론적으로 포함하려면 어떻게해야합니까?

한 가지 옵션은 다음과 같습니다.

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

그러나 의미 상 <h3>표제는 명시 적으로<ul>

또 다른 옵션은 다음과 같습니다.

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

그러나 제목이 실제로 목록 항목 중 하나가 아니기 때문에 이것은 약간 더러워 보입니다.

이 옵션은 W3C에서 허용되지 않습니다.

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

의에 <ul>하나 이상의 <li>의 만 포함될 수 있으므로

오래된 "목록 제목" <lh>이 가장 의미가 있습니다.

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

물론 공식적으로 HTML의 일부는 아닙니다.

나는 우리 <label>가 양식처럼 사용한다고 제안했다고 들었습니다 .

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

그러나 이것은 약간 이상하며 어쨌든 유효성을 검사하지 않습니다.

내 목록 헤더의 스타일을 지정하려고 할 때 의미 론적 문제를 쉽게 볼 수 있습니다. <h3>태그를 첫 번째 안에 넣고 <li>다음과 같은 스타일링 대상으로 지정해야합니다.

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

공포! 그러나 적어도 이런 식으로 태그 <ul>스타일을 지정하여 전체 , 제목 및 모든 것을 제어 할 수 있습니다 ul.

이를 수행하는 올바른 방법은 무엇입니까? 어떤 아이디어?

Felipe Alsacreations가 이미 말했듯이 첫 번째 옵션은 괜찮습니다.

목록 아래에 아무 것도 제목에 속하는 것으로 해석되지 않도록하려면 HTML5 섹션 콘텐츠 요소의 용도입니다. 예를 들어 할 수 있습니다.

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

이 경우 정의 목록을 다음과 같이 사용합니다.

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

첫 번째 옵션은 좋은 것입니다. 문제가 가장 적으며 다른 옵션을 사용할 수없는 올바른 이유를 이미 찾았습니다.

그건 그렇고, 당신의 제목은 명시 적으로 관련되어 있습니다 <ul>: 목록 바로 앞에 있습니다! ;)

편집 : W3C HTML5 및 5.1의 편집자 중 한 명인 Steve Faulkner 가 요소 의 정의 를 스케치했습니다 . 이것은 그가 HTML 5.2에 대해 논의 할 비공식적 인 초안 입니다.lt

<div>는 콘텐츠의 논리적 구분입니다. 목록과 함께 제목을 그룹화하려는 경우 의미 상 이것이 첫 번째 선택이 될 것입니다.

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

그런 다음 다음 CSS를 사용하여 모든 것을 하나의 단위로 함께 스타일링 할 수 있습니다.

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

<figure>다음과 같이 요소를 사용 하여 목록에 제목을 연결할 수도 있습니다 .

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

출처 : https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (예 162)

CSS에서 새 클래스 인 ulheader를 정의 해보십시오. p.ulheader ~ ul은 내 헤더 바로 뒤에 오는 모든 항목을 선택합니다.

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

w3.org 에 따르면 (이 링크는 만료 된 HTML 3.0 사양 초안에 있음 ) :

순서가 지정되지 않은 목록은 일반적으로 항목의 글 머리 기호 목록입니다. HTML 3.0은 글 머리 기호를 사용자 정의하고 글 머리 기호없이 수행 할 수 있으며 여러 열 목록에 대해 목록 항목을 가로 또는 세로로 래핑하는 기능을 제공합니다.

여는 목록 태그는이어야합니다 <UL>. 그 뒤에는 선택적 목록 헤더 ( <LH>caption </LH>)와 첫 번째 목록 항목 ( <LI>) 이옵니다 . 예를 들면 :

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

다음과 같이 렌더링 될 수 있습니다.

테이블 과일

• 사과
• 오렌지
• 바나나

참고 : 일부 레거시 문서에는 첫 번째 LI 요소 앞에 헤더 또는 일반 텍스트가 포함될 수 있습니다. HTML 3.0 사용자 에이전트의 구현자는 잘못된 형식의 레거시 문서를 처리하기 위해 이러한 가능성을 충족하는 것이 좋습니다.

ul 안에 제목을 넣었습니다. UL이 LI 요소 만 포함해야한다는 규칙은 없습니다.