"어차피 좌측부터 배열인데 무슨차이야?" <li>와 <div>의 차이점과 사용방법

좌측 <li>코드로 만든 리스트, 우측 <div>코드로 만든 리스트

 

두 이미지는 겉으로 보기에 흡사해 보인다. 이때문에 <li>와 <div> 둘다 줄 정렬에 쓸 수 있어 보이지만, HTML에서 각각의 이미가 완전히 다르게 해석된다.

 

 

 

<li>는 무엇인가?

- <li>는 List Item의 약자다.

- 반드시 <ul>(unordered list)또는 <ol>(ordered list)태그 안에서 사용돼야 한다.

<ul>
	<li> 항목1 </li>
    <li> 항목2 </li>
</ul>

 

 

 

왜 그냥 <div>로 안하고 <li>를 써야할까

구분	<li>	<div>
역할	목록 항목	아무내용이나 담는 레이아웃 박스
HTML에서 해석되는 의미	"목록중 하나"임을 브라우저와 사용(스크린리더 등)에게 알려줌	의미 없음 (그냥 박스)
접근성 / SEO	✅ 의미 있음 → 검색 엔진, 스크린 리더등이 더 잘 이해함	❌ 의미 없음
기본 스타일	앞에 ●(불릿) 붙음 (제거 가능)	없음
예시 용도	메뉴, 리스트, 항목 나열	카드, 배치, 컨테이너 등

 

실무에서는 네비게이션 메뉴, 해야할일 목록등에는 <li> 태그를 쓴다. 👉 요소간에 구분을 지어야 할때

<div>를 쓰는 경우는, 목록이 아닌경우에 해당한다. 레이아웃 배치나, 이미지 카드 박스, 그리드 레이아웃 등.  👉 세그먼트간에 구분을 지어야 할때

 

 

 

결론!

한줄 요약 : 접근성 위해서 필요한 곳에는 반드시 <li>를 써라 

 

Q. <li>는 어떤 태그? 

A. 목록 항목을 나타내는 의미 있는 태그

Q. 꼭 써야 하나?

A. 꼭 써야함. 리스트를 만들땐 <li>를 써야 의미도 맞고 접근성도 높임.

Q. 그냥 <div>써도됨??

A. 가능은 한데 바람직하지 않고 접근성이 낮아지므로서 결국 같은 결과물임에도 완성도가 낮아짐