[HTML의 TEXT 요소] #02 HTML 목록 태그 완벽 정리, 순서가 있을 때와 없을 때의 차이는?

2025. 7. 16. 10:00·Web Front/HTML
반응형

[HTML의 TEXT요소] HTML 목록 태그 완전 정리! #ul #ul #li #dt #dl #dd


안녕하세요, 토스트 데브입니다!

지난 시간에는 HTML 문서에서 제목(<h1>~<h6>)과 단락(<p>) 태그를 어떻게 사용하는지 알아보았죠?
오늘은 문서를 구성할 때 자주 사용되는 목록(List) 태그에 대해 알아보겠습니다.


✅ 왜 목록 태그가 필요할까요?

우리는 글을 작성할 때 자주 항목별로 정리된 정보를 나열하게 됩니다.
예를 들어:

  • 장보기 목록
  • 순위 리스트
  • 사용 방법
  • FAQ

이런 항목들을 HTML에서 표현할 때 사용하는 것이 바로 목록 태그입니다.


📌 HTML의 목록 태그 종류

태그 설명
<ul> 순서가 없는(Unordered) 목록
<ol> 순서가 있는(Ordered) 목록
<li> 목록 항목 (List Item)
<dl> 정의 목록 (Description List)
<dt> 용어 (Definition Term)
<dd> 설명 (Definition Description)

🟢 순서 없는 목록 (<ul>)

순서가 중요하지 않을 때 사용합니다.
브라우저에서는 보통 ● (불릿) 아이콘으로 표시됩니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

🔢 순서 있는 목록 (<ol>)

순서가 중요할 때 사용합니다.
예: 단계별 설명, 랭킹, 절차 등

<ol>
  <li>이메일 입력</li>
  <li>비밀번호 입력</li>
  <li>로그인 클릭</li>
</ol>

📘 정의 목록 (<dl>)

사전처럼 용어와 설명을 짝지어서 표현할 때 사용합니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 설계하는 마크업 언어</dd>
  
  <dt>CSS</dt>
  <dd>웹 페이지를 꾸미기 위한 스타일 언어</dd>
</dl>

 

  • <dt>: 정의할 용어
  • <dd>: 해당 용어에 대한 설명

💡 목록 태그의 중첩 사용

목록 안에 목록을 넣는 것도 가능합니다. 이런 구조는 자주 쓰이니 꼭 익혀두세요!

<ol>
  <li>프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>백엔드</li>
</ol>

 


🧠 목록 태그 사용 시 주의사항

  • 목록 안에는 반드시 <li> 요소만 포함되어야 합니다. (단, 정의 목록은 <dt>, <dd> 조합 사용)
  • 중첩 시에는 시각적 구분을 위해 들여쓰기를 활용하세요.
  • 웹 접근성 측면에서도 **순서 있는 정보는 <ol>, 순서 없는 정보는 <ul>**을 사용하는 것이 중요합니다.

🔎 목록 태그와 웹 접근성

  • 스크린 리더 등 보조 기술은 <ol>, <ul>, <dl> 구조를 분석하여 사용자가 내용을 더 쉽게 이해할 수 있도록 돕습니다.
  • 의미 없는 줄바꿈보다는 목록 태그를 적극 활용해 주세요.
  • 순서를 혼동하게 만드는 잘못된 목록 사용은 접근성과 SEO 모두에 악영향을 줍니다.

✨ 정리하면?

목록 유형 태그 사용목적
순서 없는 목록 <ul> + <li> 메뉴, 체크리스트 등
순서 있는 목록 <ol> + <li> 절차, 순위, 단계 등
정의 목록 <dl> + <dt> + <dd> 용어와 설명, FAQ 등

🎯 마무리

목록은 단순한 나열 이상의 역할을 합니다.
정보를 구조화하고, 문서를 깔끔하게 정리하며, 사용자의 이해를 돕는 강력한 도구입니다.

앞으로 여러분이 웹 페이지를 만들 때 메뉴, FAQ, 설명서 등을 작성해야 한다면
오늘 배운 목록 태그들을 꼭 활용해보세요!

 

 

#HTML #HTML기초 #목록태그 #ul #ol #dl #웹개발입문 #프론트엔드 #웹접근성 #코딩공부 #토스트데브

반응형
저작자표시 비영리 (새창열림)

'Web Front > HTML' 카테고리의 다른 글

[HTML의 TEXT 요소] #01 제목<h1~h6>과 단락<p>  (0) 2025.07.06
[HTML 시작하기] #04 HTML 문서의 특수문자  (0) 2025.07.05
[HTML 시작하기] #03 HTML 문서의 구조  (4) 2025.07.04
[HTML 시작하기] #02 HTML의 요소 속성(Attribute)  (2) 2025.07.03
[HTML 시작하기] #01 HTML의 요소 (Element)  (0) 2025.06.17
'Web Front/HTML' 카테고리의 다른 글
  • [HTML의 TEXT 요소] #01 제목<h1~h6>과 단락<p>
  • [HTML 시작하기] #04 HTML 문서의 특수문자
  • [HTML 시작하기] #03 HTML 문서의 구조
  • [HTML 시작하기] #02 HTML의 요소 속성(Attribute)
TOASTDEV
TOASTDEV
인스턴트 코딩 #토스트데브 #토스트뎁 #코딩공부 #개발입문
  • TOASTDEV
    토스트뎁
    TOASTDEV
    • 분류 전체보기 (59) N
      • 알쓸신잡 (20)
        • 코딩에 대하여 (13)
        • 컴퓨터에 대하여 (5)
        • IT 국내외 소식 (2)
      • Web Front (6)
        • HTML (6)
        • CSS (0)
        • JavaScript (0)
      • Programming (15)
        • PHP (15)
      • Database (7) N
        • SQL (7) N
        • MySQL (0)
      • Server (11) N
        • Linux (11) N
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • Youtube Toastdev
    • Naver Blog
  • 공지사항

    • [유튜브] 유튜브 영상 업로드 안내
  • 인기 글

  • 태그

    SQL강의
    SQL기초
    코딩입문
    ubuntuserver
    php입문
    SQL문법
    dbms
    php코딩
    ict
    리눅스기초
    php문법
    프론트엔드
    서버입문
    웹개발
    우분투서버
    리눅스서버
    php
    코딩공부
    php기초
    웹개발입문
    html기초
    HTML
    sql
    서버관리
    코딩기초
    ubuntu서버
    웹프로그래밍
    데이터베이스
    데이터분석
    웹개발기초
  • 최근 댓글

  • 최근 글

  • 전체
    오늘
    어제
  • 반응형
  • hELLO· Designed By정상우.v4.10.3
TOASTDEV
[HTML의 TEXT 요소] #02 HTML 목록 태그 완벽 정리, 순서가 있을 때와 없을 때의 차이는?
상단으로

티스토리툴바