리스트 태그의 종류 ul, ol, dt 및 사용법 (+주의점, 틀린 사용법 예시)

 
오늘은 HTML에서 목록을 표현하는 리스트 태그에 대해 알아볼게요.
대표적으로 가장 많이 사용되는 리스트 태그는 ul, ol, li, dl, dt, dd 태그예요
리스트 태그는 쌍이 있어서 반드시 정해진 규칙대로 사용해 주어야 합니다.
 
그럼 리스트 태그의 종류와 사용할 때 주의할 점을 알려드릴게요.
 
먼저 리스트 태그는 비순차목록(Unordered List), 순차목록(Ordered List), 정의 목록(Definiton List) 으로 나누어진답니다.
비순차 목록 태그는 영문명의 앞글자를 따서 ul태그, 순차 목록 태그는 ol 태그, 정의 목록 태그는 dl 태그로 불려요.

 

1. Unordered List (ul 태그)

- ul 태그는 목록에 순서가 없고 Bullet 표시 (˙로 목록이 표현됨)
- 따라서 순서가 없는 것들을 나열할 때 사용됨(예 - 여행 준비물 리스트, 요리 재료)
- 사용법 <ul>태그 안에 <li> 태그로 아이템 하나씩 표현해 준다.

<코드>

<h1>여행 준비물 리스트</h1>
<Container>
    <ul>
        <li>여권</li>
        <li>플러피 햇</li>
        <li>카드 지갑</li>
        <li>카메라</li>
    </ul>
  </Container>

 
<결과 화면>

---

2. Ordered List (ol 태그)

 
- ol 태그는 목록에 순서가 있어 숫자가 자동으로 나타나 순서를 표현해 줌.
- 숫자 외에 영문자, 로마자 등으로 Type의 속성 값을 추가해서 사용 가능.
- 따라서 순서가 있는 것들을 나열할 때 사용됨(예- 여행 일정, 요리 순서)
- 사용법 : <ol> 태그 안에 <li> 태그로 아이템 하나씩 표현해 준다.
 
<코드>

<h1>여행 순서</h1>
<Container>
    <ol>
        <li>파리 샤를 드골 공항 도착</li>
        <li>렌터카 빌리기</li>
        <li>에펠 탑</li>
        <li>루브르 박물관</li>
        <li>숙소 도착</li>
    <ol>
</Container>

 
<결과 화면>

---

3. Definition List (dl 태그)

- ul 태그는 목록에 제목과 그에 대한 구체적인 설명이 함께 있는 리스트를 만들 때 사용됨.
- <dl>...</dl> 태그는 description list(설명, 서술 목록) 으로 제목과 설명이 한쌍인 설명, 정의 목록을 만드는 태그
- <dt>...</dt> 태그는 description term(용어의 제목) 으로 제목을 나타내는 태그로 줄바꿈 기능 있음.
- <dd>...</dd> 태그는 description details(용어 설명) 으로 제목에 대한 설명을 나타내는 태그로 줄바꿈 기능 있음.


<사용법>

<dl>
    <dt>용어 제목</dt>
        <dd>용어 설명1</dd>
        <dd>용어 설명2</dd>
</dl>

<코드예시 1>

<h1>분야별 뉴스</h1>
<Container>
    <dl>
        <dt>경제</dt>
            <dd>지난해 대기업 된 중견기업 205개...</dd>
            <dd>기업 1인당 노동비용 월 585만원... 전년대비</dd>
        <dt>사회</dt>
            <dd>가수 김호중, 음주 운전 후 뺑소니 의혹</dd>
            <dd>대구발 대형마트 의무휴업 평일 전환, 전국...</dd>
        <dt>TV/연예</dt>
            <dd>'더 글로리' 송혜교 "기존 모습과 달라 낯설다..."</dd>
            <dd>[종합]"건강? 고비 있었지만"..'컬투쇼'</dd>
    </dl>

 
<결과 화면1>

<코드예시 2>

<dl>
    <dt>떡볶이</dt>
    <dd> 캡사이신을 넣지 않은 only 국내산 고춧가루로 매운맛을 내어,<br>
        매콤하면서 달콤한 떡볶이입니다.<br>
        떡은 치즈떡을 사용하여 매운맛을 중화시켜줍니다.<br>
        우리집 대표 메뉴!!
    </dd>
    <dt>쫄면</dt>
    <dd>매운맛 고수라면 누구든지 도전!!<br>
        탱글탱글한 면에 아삭 야채 듬뿍!!<br>
        사이드로 김밥도 드려요.
    </dd>
</dl>

 
<결과화면 2>

---

4. 리스트 태그 사용시 주의점

ul, ol, dt 태그의 자식 요소로 li, dt, dd 태그 외에 다른 태그가 올 수 없습니다. 잘못 작성한 예를 같이 살펴봐요.
이 부분은 HTML 태그를 처음 접하시는 분들이 많이 하는 실수들입니다.
 

4-1. ul의 첫번째 자식 요소로는 li 태그만 가능.

<잘못된 예시>

<ul>
    <h3>title</h3>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

 

물론 위 코드를 실행해도 결과 화면은 나옵니다.

 

HTML에서 ul 태그(ul: unordered list, 순서 없는 목록)는 일반적으로 li 태그(list item, 목록 항목)를 자식 요소로 가집니다. 이는 ul 태그의 목적이 목록을 만들기 위한 것이기 때문입니다. 하지만 ul 태그 안에 h3 태그를 직접 사용하는 것은 HTML의 문법 규칙을 위반하는 것이며, 그 이유와 올바른 사용법은 아래와 같음.

 
 

• 목록의 문법적 구조:
  • ul 태그는 li 태그를 자식 요소로 가질 수 있음.
  • li 태그는 블록 요소와 인라인 요소를 자식으로 가질 수 있기 때문에, h3 태그를 li 태그 안에 포함시키는 것은 가능.
• 시맨틱(semantic) 구조:
  • ul 태그는 목록을 의미하며, h3 태그는 제목을 의미
  • ul 태그 안에 직접 h3 태그를 사용하면 시맨틱 구조가 혼란스러워집니다. 대신 h3 태그는 li 태그 안에 포함시켜 사용하는 것이 올바른 사용법

<ul>
  <li>
    <h3>항목 1의 제목</h3>
    <p>항목 1의 내용</p>
  </li>
  <li>
    <h3>항목 2의 제목</h3>
    <p>항목 2의 내용</p>
  </li>
</ul>

 
 
이렇게 하면 HTML 문법에 맞고, 시맨틱적으로도 올바른 구조가 됩니다. 목록의 각 항목(li) 내에 제목(h3)과 내용을 포함시키는 방식이 더 명확하고, 브라우저와 스크린 리더가 콘텐츠를 더 잘 이해할 수 있습니다.

---

4-2. 정의 목록의 잘못된 예시 1

dl 태그의 첫 번째 자식으로 다른 <dt>, <dl> 태그 외에 다른 태그가 올 수 없음.

 
<잘못된 예시>

<dl>
    <h3>title</h3>
    <dt>Definition term</dt>
    <dd>Definition description</dd>
    <dd>Definition description</dd>
    <dd>Definition description</dd>
</dl>

 
<해결법>

<h3>title</h3>
<dl>
    <dt>Definition term</dt>
    <dd>Definition description</dd>
    <dd>Definition description</dd>
    <dd>Definition description</dd>
</dl>

 
이 경우 단순히 <h3> 태그를 <dl> 태그 밖으로 빼 주면 된다.

---

4-3. 정의 목록의 잘못된 예시 2

제목 성격의 <dt> 태그가 설명 성격의 <dd> 태그보다 많을 수 없다. 즉, 용어는 3개인데 그 설명을 1개만 작성하여 설명이 부족한 상태이다.

 
<잘못된 예시>

<dl>
    <dt>Definition term</dt>
    <dt>Definition term</dt>
    <dt>Definition term</dt>
    <dd>Definition description</dd>
</dl>

바꾸어 말하면, dl 태그 안에서는 일반적으로 각 dt 태그(정의되는 용어)마다 하나 이상의 dd 태그(정의 설명)가 나와야 한다. 주어진 코드에서는 dd 태그가 마지막에 한 번만 나와서 각 dt 태그와 짝을 이루지 않는 문제가 있다. 이를 올바르게 수정하려면 각 dt 태그마다 적절한 dd 태그를 포함시켜야 한다.

 
<해결법>

<dl>
    <dt>Definition term 1</dt>
    <dd>Definition description 1</dd>
    <dt>Definition term 2</dt>
    <dd>Definition description 2</dd>
    <dt>Definition term 3</dt>
    <dd>Definition description 3</dd>
</dl>

 
이 경우 각 dt태그마다 dd 태그를 추가하여 설명을 추가해주면 된다.