콘텐츠 그룹화: ul, ol, dl

핵심 개념

순서가 없는 목록(ul), 순서가 있는 목록(ol), 그리고 용어와 설명을 묶는 정의 목록(dl)의 차이점을 해부해봅시다.

코드 분석

HTML5📋 코드 (8줄)

<h3>오늘의 할 일</h3>
<ul><li>사과 사기</li><li>운동하기</li></ul>
<h3>우선순위</h3>
<ol><li>밥 먹기</li><li>잠자기</li></ol>
<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 만드는 언어</dd>
</dl>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 HTML 리스트 코드에서 ul/ol/dl을 잘못 선택한 부분을 찾아
의미에 맞는 태그로 수정하고
각 선택 기준을 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

ul, ol, dl을 실제 쇼핑몰(쿠팡)·뉴스·문서 사이트에서
각각 어떻게 쓰는지
실전 예시 코드 3개로 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 모든 리스트 구조를 분석해서
중첩 깊이, 시맨틱 적절성, 접근성 문제를
우선순위로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

dl(description list)이 실무에서
2026년에도 살아있는 태그인지,
실제로 쓰는 회사가 있는지 솔직히 말해줘.

⭐ 이것만 기억하세요

콘텐츠 그룹화: ul, ol, dl는 이 3가지만 확실히 잡으세요

1.목록 없이 텍스트를 나열하면 브라우저가 항목 간 관계를 인식하지 못해 접근성이 떨어집니다

2.ul은 순서 없는 목록, ol은 순서 있는 목록, dl은 용어-설명 쌍 — 데이터 성격에 맞는 태그를 골라야 합니다

3.다음 챕터에서 사용자 입력을 받는 폼 요소와 새로운 input 타입들을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.7 — 질문하거나 답변을 확인하세요

→

진행도 7 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)