[웹접근성] 목록 나열 태그 (ul, ol, dl)

목록나열 태그에 대해서 알아보자

 

ul (Unordered List)

순서가 지정되지 않은 목록 나열할 때 사용

<ul aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ul>

✅ 예시

• React
  • CRA
  • VITE
• Next.js
• TypeScript

 

✅ 설명

• ul 바로 하위 자식 요소는 li 태그만 사용가능
• 기본 글머리 기호는 disc (list-style-type: disc)

ol (Ordered List)

순서가 지정된 목록 나열할 때 사용

<ol aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ol>

✅ 예시

1. React
   1. CRA
   2. VITE
2. Next.js
3. TypeScript

✅ 설명

• ol 바로 하위 자식 요소는 li 태그만 사용가능
• 기본 글머리 기호는 decimal 숫자 (list-style-type: decimal)

/* 숫자 (기본값) */
<ol type="1">

/* 소문자 */
<ol type="a">

/* 대문자 */
<ol type="A">

/* 로마숫자(소문자) */
<ol type="i">

/* 로마숫자(대문자) */
<ol type="I">

/* 3부터 시작 */
<ol start="3">

/* 역순 */
<ol reversed>

/* start부터 역순 */
<ol reversed start="5">

dl (Description List)

용어를 정의하거나 key-value 형태의 항목 나열할 때 사용

<dl>
    <dt>감자<dt>
    <dd>10,000원<dd>
    <dt>당근<dt>
    <dd>4,000원<dd>
</dl>

<dl>
    <div>
        <dt>감자<dt>
        <dd>10,000원<dd>
    </div>
    <div>
        <dt>당근<dt>
        <dd>4,000원<dd>
    </div>
</dl>

✅ 설명

• dl 자식요소로는 dt, dd 태그만 가능 (key : dt / value : dd)
• dt 태그 없이 dd만 사용 ❌, dt 태그를 설명하기 위한 여러 dd 사용가능
• 연관된 dt, dd 그룹을 묶는 용도의 <div>태그는 허용