HTML 목록 태그 <li> 와 <ul> 의 관계

 

 

 

비정렬 목록 태그 : <ul>

 

<ul> 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. <ul> 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 <ul> 이 아닌 <ol> 태그를 사용하는 것이 바람직하다. <ul>과 <ol>의 직계 자식 요소로는 오직! <li> 요소만 올 수 있다. <li> 요소는 밑에서 보다 자세히 다루겠지만, 목록 안의 항목으로, <ul>과 <ol> 요소는 최소 하나 이상의 <li> 요소를 자식으로 가져야 한다.

---

목록의 항목 태그 : <li>

 

<li> 요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 <ul> 혹은 <ol> 요소 안에 항목으로서 <li> 요소가 위치해야 하는 것이다. 

 

 

아니 다 알겠는데, 순서가 중요하다는 게 무슨말인데? 라고 하는 사람들을 한번에 이해시켜줄 좋은 예를 가져왔다..! ▾

'분야별 검색어' 섹션을 보면 인기 검색어 순위를 나타내는 번호가 붙어있다. 만약 1위 검색어와 2위 검색어의 순위가 바뀐다면? 지금 가장 인기있는 검색어가 바뀌는 것이기 때문에 순서가 중요한 목록이라고 할 수 있다. 반면에 '같이가치 추천글' 섹션은 추천 순위를 나타내는 것이 아니라 그냥 추천글들에 이런 게 있다~ 라는 것을 보여주고 있기 때문에 순서가 그다지 중요하지 않은 목록이라고 할 수 있다. 따라서 이를 마크업 한다면 '분야별 검색어' 섹션은 <ol> 태그로, '같이가치 추천글' 섹션은 <ul> 태그를 사용하는 게 바람직하다.

<div>
    <h1>분야별 검색어</h1>
    <strong>예능tv</strong>
    <ol>
        <li>미스트롯 2</li>
        <li>골 때리는 그녀들</li>
        <li>트롯 전국체전</li>
        <li>뭉쳐야 쏜다</li>
        <li>슈퍼맨이 돌아왔다</li>
        <li>쓰리박 : 두 번째 심장</li>
        <li>싱어게인</li>
        <li>신청곡을 불러드립니다 - 사랑・・・</li>
        <li>미운 우리 새끼</li>
        <li>1호가 될 순 없어</li>
    </ol>
</div>

<div>
    <h1>같이가치 추천글</h1>
    <ul>
        <li>무료로 확인하는 내 눈치 레벨!</li>
        <li>아름다운 '금수강산', 옛말이 된 이유</li>
        <li>"어릴 적부터 공부는 잘 했지만..."</li>
        <li>빠른 택배, '편해서' 좋다고요?</li>
        <li>할머니의 낡은 신발 속, 담긴 사연</li>
        <li>코로나 펜데믹 시대의 'NGO'</li>
        <li>복지의 사각지대, '중년 남성'</li>
        <li>우리에게 김치가 필요한 이유</li>
        <li>보고만 있을 순 없었습니다</li>
        <li>새학기, 제대로 따라갈 수 있을지...</li>
    </ul>
</div>

그런데 보통 웹 사이트에서 이런 인기 검색어라던가 추천글의 경우, 클릭하면 바로 해당 검색어가 검색되거나 해당 글의 페이지로 연결된다. 이렇게 하이퍼링크를 추가하고 싶을 때 사용하는 링크는 뭐다? 바로 앵커(anchor) 태그 <a>!! 그럼 앵커 태그를 목록 태그에 적용시켜 보자!

<ul>
    <a href="#">
        <li>목록 태그에 링크 걸기 1</li>
    </a>
</ul>

 

<ul>
    <li>
        <a href="#">목록 태그에 링크 걸기 2</a>
    </li>
</ul>

위 두 개의 코드 중 어떤게 맞을까? 코드 실행 결과를 보면 두 코드 모두 링크가 제대로 연결되어 있다. 하지만 목록 태그에 앵커 태그를 적용시킬 때는 2번 코드처럼 <li> 안에 <a>를 작성해야 한다. 이유는, 제일 위에서 설명했듯이 <ul>과 <ol>은 직계자식요소로 <li>만 올 수 있기 때문이다. 지금 1번 코드는 <ul> 안에 바로 <a>가 오고 그 안에 <li> 요소를 갖는다. 이 코드는 HTML의 문법적 요소를 어긴 코드인 것이다. 따라서 2번 코드처럼 <ul>의 직계자식요소로서 <li>가 오고 그 안에 <a> 태그로 링크를 연결하면 퍼펙트한 코드가 된다!

 

---

 

시멘틱하게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다.
또한 HTML spec(HTML Living Standard)에서 li 요소는 ul, ol, menu 요소의 내부에서 사용 가능하다고 기술하고 있다.

 

 

 

 

[HTML] 목록 태그 똑똑하게 사용하기 ( <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <dfn> )

 

Section 1 회고