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

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

---

이것은 한동안 나를 괴롭 혔고, 이것을 올바르게 수행하는 방법에 대한 합의가 있는지 궁금합니다. 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>

---

Your first option is the good one. It's the least problematic one and you've already found the correct reasons why you couldn't use the other options.

By the way, your heading IS explicitly associated with the <ul> : it's right before the list! ;)

edit: Steve Faulkner, one of the editors of W3C HTML5 and 5.1 has sketched out a definition of an lt element. That's an unofficial draft that he'll discuss for HTML 5.2, nothing more yet.

---

a <div> is a logical division in your content, semantically this would be my first choice if I wanted to group the heading with the list:

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

then you can use the following css to style everything together as one unit

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

---

You could also use the <figure> element to link a heading to your list like this:

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

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

---

Try defining a new class, ulheader, in css. p.ulheader ~ ul selects all that immediately follows My Header

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

---

According to w3.org (note that this link is in the long-expired draft HTML 3.0 spec):

An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.

The opening list tag must be <UL>. It is followed by an optional list header (<LH>caption</LH>) and then by the first list item (<LI>). For example:

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

which could be rendered as:

Table Fruit

• apples
• oranges
• bananas

Note: Some legacy documents may include headers or plain text before the first LI element. Implementors of HTML 3.0 user agents are advised to cater for this possibility in order to handle badly formed legacy documents.

---

I put the heading inside the ul. There's no rule that says UL must contain only LI elements.

참고URL : https://stackoverflow.com/questions/8935262/how-to-semantically-add-heading-to-a-list