<UL> <LI> 태그 - 리스팅

HTML의 <ul> 태그와 <li> 태그는 정렬되지 않은 목록을 만드는 데 사용된다.

<ul> 태그는 정렬되지 않은 목록 전체를 나타내며, <li> 태그는 각 개별 목록 항목을 나타낸다.

<ul class="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

.list{
  list-style-type: none; /* remove bullet points */
}
.item{
  font-size: 20px;
}

let items = document.getElementsByClassName("item")
console.log(items[0].innerHTML);
console.log(items[1].innerHTML);
console.log(items[2].innerHTML);

이 예에서는 <ul> 태그를 사용하여 정렬되지 않은 목록 컨테이너를 생성하고, <li> 태그를 사용하여 컨테이너 내의 각 목록 항목을 생성한다. 기본적으로 브라우저는 항목에 글머리 기호를 추가한다.

같은 목적을 수행하지만 목록 항목에는 기본적으로 번호가 지정되는 <ol>(순서 목록)이라는 다른 태그도 있다.

더 구체적인 사용 사례에 대해 <dl>(정의 목록) 및 <dt>, <dd>(정의 용어 및 정의 설명)와 같은 다른 목록 관련 태그를 사용할 수도 있다.

목록 태그 <ul>, <ol>, <dl> 및 하위 태그 <li>, <dt>를 적절한 방법으로 사용하면 웹 페이지의 접근성과 검색 엔진 최적화를 개선하는 데 도움이 된다.