<li> 태그의 정의 및 사용법

<li> 태그는
목록(list)의 항목(items)을 나타내는 태그입니다.
이 태그의 상위 요소가 <ol>, <ul> 또는 <menu> 요소인 경우 해당 요소에 대해 정의된 대로 이 태그는 상위 요소 목록의 항목을 나타냅니다.

<li>는 '목록의 항목'이라는 뜻의 list item의 약자로 사용된 것입니다.

<li> 태그는 목록의 의미를 가지는 다음의 세 가지 해당 요소들의 자식 요소로 사용되며, 해당 요소의 항목을 의미합니다.

따라서, <li>의 부모 요소는 위 세 가지 요소 이외에 올 수 없습니다.

간단한 예제

다음은 <li> 태그를 사용한 간단한 예제입니다.

<ol>의 항목으로 사용된 경우

HTML 
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>
HTML <p> 태그
실제 적용된 모습

<ul>의 항목으로 사용된 경우

HTML 
<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>
실제 적용된 모습

<menu>의 항목으로 사용된 경우

HTML 
<div>
    <p>w3.org에서는 웹과 관련된 최신 소식을 제공합니다.</p>
    <menu>
        <li><button type="button">좋아요!</button></li>
        <li><button type="button">구독</button></li>
    </menu>
</div>
실제 적용된 모습

잘못된 사례

앞서 설명했듯이 <li> 태그는 이 태그의 상위 요소가 <ol> <ul> 또는 <menu> 요소인 경우 해당 요소에 대해 정의된 대로 이 태그는 상위 요소 목록의 항목을 나타내는 역할을 하기 때문에 <li>의 부모 요소는 위 세 가지 요소 이외에 올 수 없습니다.

HTML <li>의 부모 요소로 <p> 태그가 올 수 없습니다. 
<p><li>라면</li></p>
<p><li>김밥</li></p>
<p><li>돈까스</li></p>
<p><li>김치볶음밥</li></p>
실제 적용된 모습 실제 적용된 모습을 보면 마치 올바르게 사용된 것처럼 보입니다.

실제 적용된 모습을 보면 마치 올바르게 사용된 것처럼 보입니다.
하지만 이것은 스타일로 인해서 올바르게 사용된 것처럼 보이는 것 뿐입니다. HTML에서는 올바른 마크업을 통해 콘텐츠 정보를 전달해야 합니다.

CSS 활용 팁

CSS를 사용하여 리스트 마커를 스타일링하는 다양한 방법에 대해 소개합니다.

CSS list marker 스타일하기

브라우저 호환성

li 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<li> 1 12 1 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

li 태그의 명세서 사양
명세서 사양
<li> HTML Standard
#the-li-element

참고 문헌

같이 보기