개념

• 목록 항목을 나타내는 요소
• 목록 내 각 아이템 하나를 시맨틱하게 표현한다.

특징

• value 속성으로 번호를 개별 지정할 수 있다.

주의사항

• li는 반드시 ul/ol/menu 안에만 둔다.
• 내비게이션에서 현재 페이지를 표시할 땐 aria-current="page"를 a 또는 li의 자식에 적절히 부여한다.

실무

• li::before로 아이콘 불릿을 만들 수 있다.

예시

<nav aria-label="주요 메뉴">
  <ul>
    <li><a href="/products">제품</a></li>
    <li><a href="/pricing" aria-current="page">가격</a></li>
    <li><a href="/docs">문서</a></li>
  </ul>
</nav>