<ul> — 리스트 태그 도감

올바른 사용

직속 자식은 li만

순서가 의미 없을 때 (있으면 ol)

내비게이션·메뉴·태그 목록에 표준

role="list"는 CSS reset 후 명시

표준 ul + li

<ul>
  <li>첫 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

가장 기본 형태. li가 직속 자식.

내비게이션 메뉴

<nav aria-label="주 내비">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
  </ul>
</nav>

내비게이션의 표준 — nav + ul + li + a.

list-style 제거 + role 명시

<ul role="list" className="list-none">
  <li>...</li>
</ul>

Safari 등 일부 환경에서 list-style:none이면 list 시맨틱 누락. role 명시.

자주 보는 안티패턴

div로 항목 나열

ul 안에 li 외 다른 요소 직접

list-style: none 후 role="list" 누락 — 일부 스크린리더 인식 안 됨

순서가 의미 있는데 ul (ol이 적절)

div 항목 나열

<div>
  <div>항목 1</div>
  <div>항목 2</div>
</div>

목록 시맨틱 손실. 항목 수, 항목 위치 등 정보 사라짐.

ul 안 직속 li 아닌 요소

<ul>
  <p>제목</p>
  <li>항목 1</li>
</ul>

HTML 명세 위반. ul 직속 자식은 li, script, template만.

해설

순서가 의미를 갖지 않는 항목 목록. 태그 목록, 메뉴, 기능 목록, 체크리스트 — 항목 순서를 바꿔도 의미가 변하지 않으면 ul. 순서가 의미면 ol.

SEO 관점에서 ul은 검색엔진의 목록 형식 답변 인용에 직접 작용. "X의 3가지 특징" 검색에 ul 마크업 페이지가 우선 노출. 구글의 List Snippet은 ul/ol을 직접 소스로 활용.

GEO 관점에서 AI가 목록 형식의 답변을 만들 때 ul + li가 정확한 자료. AI가 답변에 "1. ..., 2. ..., 3. ..."로 출력할 때 — 원본 페이지의 ul을 그대로 인용하는 경우가 많다. ul이 없으면 목록처럼 보이는 텍스트를 추론해야 한다.

AEO 관점에서 리스트 타입 Featured Snippet의 직접 소스. "X 방법 5가지"에 페이지의 ul 5개 li가 답변으로 노출. 가장 강한 AEO 패턴 중 하나.

A11y 관점에서 스크린리더의 ul 진입 시 "목록, 5개 항목"으로 발화. 사용자가 항목이 몇 개인지를 시작 시점에 안다. 각 li 진입 시 "3번째, 5개 중" 같은 위치 정보도. div 나열은 이 정보가 모두 사라진다.

자주 보는 안티패턴: div로 항목 나열(가장 흔한 손실 — 시각은 같지만 시맨틱은 0), list-style: none 후 role="list" 누락(Safari·VoiceOver 일부 환경에서 list-style이 없는 ul을 목록으로 인식 안 함 — Tailwind의 list-none 같은 CSS reset 후 role 명시가 표준), ul 직속에 li 아닌 요소(브라우저 자동 보정하지만 일부 환경 깨짐), 순서가 의미 있는데 ul("가장 중요한 것부터 5가지"는 ol이 정답).

내비게이션과 ul의 결합 — nav + ul + li + a가 모든 메뉴의 표준 패턴. WAI-ARIA Authoring Practices도 이 구조를 권장. Bootstrap, Tailwind UI 같은 라이브러리도 모두 이 구조.

UI 라이브러리에서의 ul — Headless UI Menu, Radix DropdownMenu 등은 role="menu"와 role="menuitem"을 자동 박는다. 일반 내비게이션이 아닌 데스크탑 앱 스타일 메뉴에 적합. 사이트 내비는 순수 ul + a가 더 표준.

도감의 hub 페이지에서 ul 적용 — 카테고리별 카드 그리드가 <ul role="list"> + <li> 패턴으로 마크업돼 있다(시리즈 #15에서 봤듯 — 카드 그리드 = 목록의 시맨틱). 시각은 그리드, 시맨틱은 목록.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설