내 <nav> 안에 <ul>과 <li>를 사용해야합니까?

제목은 그것을 거의 설명합니다.

이제 전용 <nav>태그 가 생겼으니

이것은 :

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

다음보다 나은 것이 있습니까?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

내 말은, CSS 포지셔닝 / 패딩을 위해 추가 DOM 레벨이 필요하지 않다고 가정 할 때 선호하는 방법은 무엇이며 그 이유는 무엇입니까?

nav 요소와 목록은 다른 의미 정보를 제공합니다.

• nav 요소는 주요 탐색 블록을 다루고 있음을 전달합니다.

• 목록은이 탐색 블록 내의 링크가 항목 목록을 형성 함을 전달합니다.

에서 http://w3c.github.io/html/sections.html#the-nav-element 당신은 탐색 요소는 산문을 포함 할 수 있음을 알 수있다.

예, nav 요소 안에 목록이 있으면 의미가 추가됩니다.

이 시점에서 나는 <ul><li>모든 브라우저가 아직 HTML5 태그를 지원하지 않기 때문에 요소를 유지합니다 .

예를 들어 <header>Chrome과 FF가 매력처럼 작동했지만 Opera는 지루하다는 태그를 사용하여 문제가 발생 했습니다.

모든 브라우저가 HTML을 완벽하게 지원할 때까지 필자는 그대로두고 싶지만 이전 버전과의 호환성을 위해 이전 브라우저에 의존합니다.

정말 당신에게 달려 있습니다. 일반적으로 내비게이션 메뉴를 마크 업하기 위해 순서가 지정되지 않은 목록을 사용했다면 <nav> 요소 내에서 계속 그렇게한다고 말하고 싶습니다. <nav> 요소의 요점은 예를 들어 컴퓨터 리더에 대한 사이트 탐색을 식별하는 것이므로 목록을 사용하든 단순히 링크를 사용하든 중요하지 않습니다.

나에게 순서없는 목록은 실제로 필요하지 않은 추가 마크 업입니다. HTML 문서를 볼 때 가능한 한 깨끗하고 쉽게 읽을 수 있기를 바랍니다. 적절한 들여 쓰기가 사용되는 경우 목록이 표시되고 있다는 것은 뷰어에게 이미 분명합니다. 따라서 이러한 태그에 UL을 추가 할 필요가 없으며 문서를 읽기가 더 어려워집니다.

약간의 유연성을 얻을 수 있지만, 비 의미적인 ul 클래스로 마크 업을 부 풀리지 않고 한 번에 a 요소의 스타일을 지정하는 것이 더 나은 생각이라고 생각합니다. 그리고 변명의 여지가 없습니다. : before 및 : after 의사 선택기를 사용하십시오.

편집 : 일부 ARIA 스크린 리더는 목록을 단순한 앵커 태그와 다르게 취급한다는 것을 알고 있습니다. 귀하의 웹 사이트가 장애인을 대상으로하는 경우 목록 기반 접근 방식을 사용하는 것이 좋습니다.

아니요, 동등합니다. HTML 5는 HTML 4 목록과 역 호환되므로 동일한 관점에서 자유롭게 사용할 수 있습니다. 트레이드 오프는 두 번째 버전의 코드가 적다는 것입니다.

당신이 브라우저에 대한 이전 버전과의 호환성에 대해 우려하는 경우 포함해야합니다 이 심 과 같은 태그의 기능을 제공 할 수 <nav>와 <article>.

우리가 "책으로"이야기한다면, 아니오; 탐색을 마크 업하기 위해 목록을 사용할 필요가 없습니다. 그들이 제공하는 유일한 진정한 장점은 스타일을 지정할 때 더 나은 유연성을 제공하는 것입니다.

<ul><li>새 태그 ( <nav>, <section>등 <article>)는 <div>s의 의미 론적 버전 일 뿐이므로 태그를 유지하겠습니다 .

같은 이유로에서 링크가 많을뿐만 아니라 태그 <div>내에 구조화되어야합니다 <nav>.

이 정확한 질문에 대한 CSS Tricks에 대한 자세한 게시물이 있습니다. 그것은 분명히 뜨거운 논쟁 거리입니다. 게시물에는 200 개 이상의 댓글이 있습니다.

목록 내 탐색 : To Be or Not To Be (CSS 트릭, 2013 년 1 월)