<ol> — 리스트 태그 도감

올바른 사용

직속 자식은 li만

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

type 속성으로 번호 스타일 (1, A, a, I, i)

start 속성으로 시작 번호 지정

절차 단계

<ol>
  <li>회원가입</li>
  <li>이메일 인증</li>
  <li>프로필 설정</li>
  <li>첫 게시글 작성</li>
</ol>

순서대로 진행해야 하는 절차. ol이 정답.

순위

<h2>2026년 가장 많이 검색된 키워드</h2>
<ol>
  <li>AI 검색 최적화</li>
  <li>GEO 컨설팅</li>
  <li>웹 접근성</li>
</ol>

순위 그 자체가 의미. 순서를 바꾸면 정보가 달라진다.

페이지네이션 — 후속 페이지

<ol start="11">
  <li>11번째 항목</li>
  <li>12번째 항목</li>
</ol>

페이지 2 이후의 항목 번호 매김.

자주 보는 안티패턴

div + 번호 직접 (1, 2, 3 텍스트로)

순서가 의미 없는데 ol

start 속성 없이 페이지네이션

역순일 때 reversed 속성 누락

div + 직접 번호

<div>1. 회원가입</div>
<div>2. 이메일 인증</div>
<div>3. 프로필 설정</div>

시맨틱 손실. 항목 수·순서가 보조 기술에 안 전달.

순서 의미 없는 ol

<h2>관심 분야 (체크해주세요)</h2>
<ol>
  <li>SEO</li>
  <li>GEO</li>
  <li>웹 디자인</li>
</ol>

선택 순서가 의미 없음 — ul이 정답.

해설

순서가 의미를 갖는 항목 목록. 절차의 단계, 순위, 진행 순서, 우선순위가 있는 모든 목록. ul과 시각적으로 비슷하지만 시맨틱은 완전히 다르다.

SEO 관점에서 ol은 How-to 검색의 핵심 소스. 사용자가 "X 하는 방법"을 검색하면 — 구글이 페이지의 ol을 직접 추출해 단계별 카드로 노출. Schema.org HowTo 마크업과 결합하면 시너지 더 큰.

GEO 관점에서 AI가 단계별 답변을 만들 때 ol이 1순위 자료. "이 사이트에서 회원가입은 어떻게 하나?"에 ol 4단계가 그대로 인용. 순서가 명확해 AI의 답변 정확도가 직접 올라간다.

AEO 관점에서 How-to 타입 Featured Snippet에 ol이 가장 강한 패턴. 구글 검색 결과 상단에 "1단계: ..., 2단계: ..." 카드가 노출되는 형태 — ol + li가 그대로 그 카드의 소스.

A11y 관점에서 스크린리더가 ol 진입 시 "순서 목록, 4단계"로 발화. 사용자가 총 몇 단계인지 알고 시작. 각 li 진입 시 "1단계, 4단계 중" 같은 진행 정보. 시각 사용자가 숫자로 보는 것과 똑같은 정보를 청각으로.

자주 보는 안티패턴: div + 직접 번호(시맨틱 손실 — "1. ...", "2. ..."는 사용자에게는 같아 보이지만 보조 기술과 AI에는 번호 없는 텍스트 3개), 순서 의미 없는데 ol(선택지 나열, 친숙도 무관 항목 — ul이 정답), 역순 표시에 reversed 누락(<ol reversed>로 카운트다운, 최신순 등), 페이지네이션의 후속 페이지에 start 누락("1, 2, 3"만 매번 — start로 "11, 12, 13" 같이 이어붙이기).

Schema.org HowTo와의 결합 — 절차 페이지에 HowTo + step 마크업과 ol 시맨틱을 함께 박으면 각 li가 HowTo step으로 검색엔진에 인식. 검색 결과의 rich snippet으로 노출 확률이 직접 올라간다.

ul vs ol의 결정 트리 — 순서를 바꿔도 의미가 같은가? 예 → ul. 순서가 정보의 일부인가? 예 → ol. 헷갈리면 "읽는 순서가 권장됨"과 "반드시 이 순서로"의 차이로 생각.

type 속성 — 번호 스타일 변경. type="1"(기본), type="A"(대문자), type="a"(소문자), type="I"(로마자), type="i"(소문자 로마자). CSS list-style-type도 가능하지만 type 속성은 시맨틱하게 의도를 표현.

이 도감의 카드 본문에서는 ol을 거의 사용하지 않는다 — 팩트 시트가 절차·순위가 아니기 때문. 다만 체크리스트나 단계별 가이드가 들어가는 카드(예: title의 권장 길이 결정 트리)에서는 ol이 자연스럽다.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설