HTML5 + 섹션 또는 Div

Question

매우 구체적인 질문이 있습니다. 여기에서 질문 할 때 괜찮습니다.

1)

<div id="more"> 
    <div class="box"> 
     <h4>Links</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
    <div class="box"> 
     <h4>Partner</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
    <div class="box last"> 
     <h4>More</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
</div><!-- #more END --> 

2)

<section id="more"> 
    <div class="box"> 
     <h4>Links</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
    <div class="box"> 
     <h4>Partner</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
    <div class="box last"> 
     <h4>More</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </div> 
</section><!-- #more END --> 

3)

<section id="more"> 
    <section class="box"> 
     <h4>Links</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </section> 
    <section class="box"> 
     <h4>Partner</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </section> 
    <section class="box last"> 
     <h4>More</h4> 
     <ul> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
      <li><a href="#" title="title">List 2</a></li> 
     </ul> 
    </section> 
</section><!-- #more END --> 

참고 : 무엇 다음의

올바른 사용되는 코드는 밑바닥에 놓인 사이트 및 파트너 사이트에 대한 링크, 다른 페이지에 대한 링크가 포함되어 있으며 다른 카테고리/페이지에 링크 된 링크를 포함합니다.

위의 사례 중 어느 것도 정확하지 않다고 생각하는 경우 여기에 가장 적합한 솔루션이라고 생각하는 것을 게시 할 수 있습니까?

그리고 3)이 가장 좋습니다. h4을 h1으로 변경하고 header에 넣어야합니까?

Answer 1

아마도 3이 아마도 나열된 버전 중 가장 좋은 버전 일 것이라고 생각하지만, the specification 번 이상을 사용하고 설명 된 사용법이 현재 수행중인 작업과 어떻게 일치하는지 확인할 수 있습니다. 한 가지 더 추가 할 내용은 더 큰 그룹의 콘텐츠가 아니라면 <aside> 태그를 사용하여 링크를 래핑하는 것이 좋습니다. 다른 페이지에서 제외 된 콘텐츠이므로 링크를 래핑하는 것이 좋습니다. 그러나 사이드 바 또는 바닥 글의 일부인 경우 <section> 태그가 올바르게 작동한다고 생각합니다.

<h4> 대 <h1>의 문제에 대해서는 100 % 확신 할 수는 없겠지만 아마 해를 끼치 지 않을 것입니다. The W3C은 태그를 계층 적으로 사용할 것을 제안하므로 <h1>을 사용하는 다른 섹션 내부에 링크 섹션이 없으면 다음 단계를 수행해야합니다.

Answer 2

위 항목 중 하나가 아닙니다.

섹션 정의 : "문서의 섹션 (예 : 장, 머리글, 바닥 글 또는 문서의 다른 섹션)"섹션이 정의됩니다. 섹션과 같은 많은 HTML5 요소는 새로운 기능을 제공하는 대신 사용자가 태그 지정한대로 문서 의미 체계를 제공합니다. 섹션과 div는 비슷하게 보일 수 있습니다. 섹션은 실제로 div이며 메타 정보 자체가 포함되어 있습니다.

섹션에 대한 엄지 손가락의 3 일반적인 규칙이 있습니다

가

단지 유행에 따라 디자인이나 스크립트에 대한 후크로 사용 하지마는, 그 문서는, 옆으로 또는 탐색이

그래서 섹션의 시작 제목이 자연적으로 존재하지 않는

이 그것을 사용 하지마 더 적절한 경우

그것을 사용 하지마 사업부의 실제로 문서의 구조에 달려 있습니다. HTML에서 "more"는 하이퍼 링크 섹션을 포함합니다. 2)를 선택하고 섹션 요소를 nav 요소로 변경해야합니다.

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element