<ul>

HTML <ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

시도해보기

콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 <li> 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
가능한 콘텐츠 0개 이상의 <li>, <script>, <template> 요소.
태그 생략 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 directory (en-US), group (en-US), listbox (en-US), menu (en-US), menubar (en-US), radiogroup (en-US), tablist (en-US), toolbar (en-US), tree (en-US), presentation (en-US)
DOM 인터페이스 HTMLUListElement (en-US)

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

보통 비정렬 목록의 항목은 선행하는 불릿 마커 (en-US)와 함께 표시합니다.

<ul>과 <ol>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.

<ul>과 <ol>은 모두 목록을 나타냅니다. 차이가 있다면 <ul>에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용하세요. 그렇지 않으면 <ul>을 사용할 수 있습니다.

예제

간단한 예제

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

중첩 목록

<ul>
  <li>first item</li>
  <li>second item
  <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

비정렬 목록 안의 정렬 목록

<ul>
  <li>first item</li>
  <li>second item
  <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

명세

Specification
HTML Standard
# the-ul-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

  • 리스트 관련 다른 요소: <ol>, <li>, <menu>
  • <ol> 요소와 유용하게 사용할 수 있는 CSS 속성
    • 서수를 표현할 방식을 지정하는 list-style (en-US) 속성.
    • 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
    • 더 이상 사용하지 않는 compact 특성을 대체할 수 있는 line-height (en-US)
    • 항목의 들여쓰기를 조정하기 위한 margin 속성.