여러 개의 nav 요소에 대한 HTML5 의미?

Question

저는 HTML5를 배우고 CSS Zen Gardens을 HTML5 의미 론적 버전으로 변환하는 프로젝트를 받았습니다. 나는 대부분을 쉽게 변환 할 수 있었지만, 링크/네비게이션은 나에게 약간의 문제를주고있다.
이 변환/여러 탐색을 처리하는 가장 좋은 방법은 무엇입니까? 나는 linkList2이 섹션해야한다 생각 사이에 찢겨있어 순간

<div id="linkList2"> 
    <div id="lselect"> 
      <h3 class="select"><span>Select a Design:</span></h3> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
    <div id="larchives"> 
      <h3 class="archives"><span>Archives:</span></h3> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
    <div id="lresources"> 
      <h3 class="resources"><span>Resources:</span></h3> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
</div> 

, 그리고 아이 DIV 각 요소는 탐색 요소를해야한다, 또는 linkList2 아이 DIV 요소 섹션 인과 더불어, 탐색해야한다.

Answer 1

linkList2을 section으로 설정하면 의미 섹션은 '여기에 대한 탐색입니다.'입니다. nav은 이미 sectioning content이므로 section에 배치하면 다소 중복 될 수 있습니다. - 요소는 주로 주요 탐색 블록으로 구성 섹션위한 것입니다 페이지에 링크

모든 그룹이 탐색 요소에 있어야합니다 :

또한 the spec 말한다 있습니다.

모든 링크를 nav에 넣을 필요는 없습니다. 나는 자식 요소 section 만들기에 대해 너무 많이 걱정하지 것이지만 linkList2를 만드는 당신의 접근 방식은 nav이 가장 좋은 것이라고 생각 : 나는 위에서 언급 한 바와 같이 nav 콘텐츠를 절편되고,

<nav id="linkList2"> 
    <div id="lselect"> 
      <h1 class="select"><span>Select a Design:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
    <div id="larchives"> 
      <h1 class="archives"><span>Archives:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
    <div id="lresources"> 
      <h1 class="resources"><span>Resources:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </div> 
</nav> 

를, 그래서 모든 제목해야 실제로 그들은 각각의 섹션에서 가장 높은 레벨의 표제이기 때문에 h1이 될 것입니다 (나는 위에서 변경했습니다). 그러나 실제로는 접근성 측면에서 볼 때 으로 표기된 표제가 표기된 표제가 h2 및 h1 인 경우이를 허용하는 것이 좋습니다. 괜찮을 것

다른 방법은 다음과 같습니다

<div id="linkList2"> 
    <nav id="lselect"> 
      <h1 class="select"><span>Select a Design:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </nav> 
    <nav id="larchives"> 
      <h1 class="archives"><span>Archives:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </nav> 
    <nav id="lresources"> 
      <h1 class="resources"><span>Resources:</span></h1> 
      <ul> 
      <!-- Links --> 
      </ul> 
    </nav> 
</div> 

나는 section (또는 article)에 포장하지 않는 이전에 언급 한 바와 같이, nav이 충분하다.

마지막 의미는 질문에 대한 의미이므로 나는 당신이 CSS Zen Garden의 마크 업에 대해 알고 있다는 것을 알고있다. 그래서 모든 스타일 시트가 여전히 작동 할 수 있도록 새로운 페이지의 요소를 모든 이전 스타일의 요소에 대응시켜야한다. 그러나 이것이 이 아니라는 것을 알아야한다. 예제 좋은 '의미 론적 마크 업'.

• 이 마크 업 created in 2003, 그래서 그것은 결코 우리가 현재 좋은 의미 론적 마크 업을 고려 무엇의 좋은 예로 이동하지 : 여기 당신이 알아야 할 몇 가지 있습니다.
• CSS Zen Garden 의 마크 업은 동일하게 유지하기 위해입니다. CSS 데모이며 HTML 데모가 아닙니다.
• 어쨌든 2003 IE6 was the dominant browser에 아무도 CSS3을 사용하지 않았기 때문에이 마크 업에는 스타일링을위한 불필요한 추가 요소가 많이 포함되어 있습니다.특히 표제 내의 모든 span 요소와 (더 논증 할 수있는대로) 자식 div 요소 lselect, larchives 및 lresources입니다.
• OOOCSS의 부족뿐만 아니라이 마크 업은 classitis을 나타냅니다. id 및 class 속성을 여러 곳에서 가질 필요가 없습니다. 예를 들어 id이 lselect이고 class이 select 인 경우에만 선택기 #lselect h1을 사용할 수 있습니다.
• 마지막으로, linkList2은 의미 상으로 끔찍한 id입니다. 링크 된 목록에 있지 않고 두 번째 태그인지 여부는 나머지 모든 마크 업에 따라 다릅니다. id 및 class 이름도 의미 체계 마크 업의 일부입니다.