네비게이션 메뉴는 <ul>와 <div>중 어떤 것을 사용해야 할까?

 

1️⃣ <ul> (Unordered List) 사용

 

• 언제 사용?
  메뉴가 항목들의 리스트일 때, 즉 홈, 소개, 서비스, 연락처 같은 링크 모음일 때 적합.
• 장점
  • 의미론적: HTML 구조상 ‘목록’을 표현하므로 스크린 리더가 이해하기 좋음 → 접근성 향상
  • CSS로 스타일링이 쉬움 (display: flex 등으로 가로 메뉴 가능)
  • SEO 친화적: 검색 엔진이 구조를 쉽게 이해
• 예시
   

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

 

---

 

https://www.samsons.kr/

Samson:Art

 

---

 

2️⃣ <div> 사용

• 언제 사용?
  메뉴가 단순한 컨테이너 형태이거나, 리스트가 아닌 복잡한 UI 요소를 감싸야 할 때.
• 단점
  • 의미가 없음 → 스크린 리더는 그냥 “그룹”으로 인식
  • CSS로 디자인 가능하지만, 접근성을 위해 추가 role 속성 필요
• 예시

<nav>
  <div class="menu">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/services">Services</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

👉 이 경우 <div role="menubar"> 같은 접근성 속성을 추가하면 좋음.

 

---

 

https://www.taekwanggroup.co.kr/ko/main

태광그룹

 

 

📍 결론 📍

✔️ 일반적인 링크 목록 → <ul> + <li> 사용 ✔️

✔️ 복잡하거나 커스텀 UI → <div> 가능하지만, 접근성을 고려해 role 추가 ✔️