리스트의 한 항목. ul·ol·menu 안에 있을 때만 의미를 가진다. 단순한 한 줄 텍스트부터 — 카드 한 장 안의 풍부한 콘텐츠까지 모두 li 안에 들어갈 수 있다.
SEO 관점에서 li는 ul/ol의 정확한 항목 단위를 검색엔진에 알린다. 같은 페이지의 두 ul에서 — 하나는 li가 명확하고 다른 하나는 li 사이에 div가 섞여 있으면, 항목 카운팅이 달라진다. 검색의 리스트 인용 정밀도에 직접 작용.
GEO 관점에서 AI가 항목 단위로 답변을 인용할 때 li의 경계가 그 단위. "5가지 방법은?" 답변에 li 5개가 그대로 인용. li가 블록 요소를 포함한 풍부한 구조여도 — AI는 li 전체를 한 항목으로 인지하고 그 안에서 추출한다.
AEO 관점에서 Featured Snippet의 리스트 카드 각 카드 = li 한 개. 정확한 li 마크업이 카드 품질을 결정.
A11y 관점에서 스크린리더의 항목 카운팅과 위치 안내의 기본 단위. "3번째, 5개 중"의 3번째가 li 한 개. li가 섞이거나 빠지면 사용자가 어디까지 들었는지 추적이 어려워진다.
자주 보는 안티패턴: ul/ol 밖의 li(부모가 리스트 아니면 고립 — HTML 명세 위반, 일부 환경에서 렌더 깨짐), li를 a 또는 div로 대체(시맨틱과 명세 둘 다 위반), li 안에 너무 무거운 구조(li 안에 article + h2 + 여러 단락 같은 — 가능은 하지만 카드 그리드의 경우. 일반 텍스트 목록에는 과함), li에 role="listitem" 중복 명시(native li가 이미 listitem role — 중복 노이즈).
리스트의 시각적 비주얼화 — Tailwind list-disc, list-decimal로 기본 마커. list-none로 마커 제거. 마커 없는 ul(예: 내비, 태그)도 li 시맨틱은 유지. 시리즈 #6 landmarks에서 본 사이드바 link 목록도 ul + li.
li 안에 인터랙티브 요소 — 가장 흔한 패턴은 <li><a href="...">텍스트</a></li>. 내비 메뉴의 표준. 더 복잡한 카드 그리드에서는 <li><a><article>...</article></a></li> 또는 <li><article>...<a>액션</a></article></li> 같은 형태.
value 속성 (ol 전용) — 항목의 번호를 직접 지정. 페이지네이션, 번호 점프, 후속 페이지의 이어붙이기에 활용. 시맨틱하게 번호 자체가 콘텐츠의 일부임을 명시.
도감의 hub와 상세 페이지 둘 다 — 카드 그리드와 카테고리 목록을 <ul>, <li> 패턴으로 마크업했다. 시각은 그리드, 시맨틱은 목록의 표준 적용.