HTML5 의미론-섹션의 기사 제목에 대한 H1 또는 H2

가장 중요한 제목을 설정하는 방법으로 페이지의 여러 영역에서 H1 태그를 사용하는 것이 의미 론적으로 적절하다고 간주 될 수 있습니다 ( Dive의 HTML5 : http://goo.gl/9zliD ). 특정 콘텐츠에 대해

이 방법론을 사용 중이고 'Articles'에 H1을 할당 한 SECTION이있는 경우 H1 또는 H2를 사용하여 해당 섹션의 기사 제목을 정의해야합니까? 기사 제목이 기사의 가장 중요한 제목이지만 섹션 제목의 '자녀'이기 때문에 이것은 약간 혼란 스럽습니다.

예제 코드 :

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

순례자 만이 이것에 대해 논쟁하는 것은 아닙니다.

Jeremy Keith의 웹 디자이너 용 HTML5에 따르면 <h1>, 개별 시맨틱 섹션 태그 내에 중첩되어 있으면 문서 요약을 망치지 않고 문서에서 여러을 사용할 수 있습니다 .

eBook에서 직접 인용 (iBooks에서 구입 한 경우)

지금까지 새로운 섹션 콘텐츠는 이전 버전의 HTML로 할 수있는 것 이상을 제공하지 않습니다. 키커는 다음과 같습니다. HTML5에서 각 섹션 콘텐츠는 자체 포함 된 개요를 갖습니다. 즉, 어떤 제목 수준을 사용해야하는지 추적 할 필요가 없습니다. 매번 h1부터 시작할 수 있습니다.

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(도서의 샘플 코드, 페이지 73)

나는 Mark Pilgrim 의 해석 에 동의하는 경향이 있습니다. 기사를 article요소 안에 넣는 경우 기사 h1제목으로 다시 시작할 수 있습니다 .

HTML5 사양에서 articles는 독립적이고 독립적 인 페이지 부분 으로 취급됩니다 . 제목을 다시 형식화하지 않고 다른 페이지에 그대로article 요소 를 이식 할 수 있어야합니다 .

기사 제목이 문서 제목 계층 구조의 연속이어야하는 경우 태그 article바로 아래에 놓을 때는 body로 이동해야 h1하지만 중첩 된 섹션 아래에 놓으면 h3/ 로 변경해야합니다. 위치에 따라 h4/ h5/ 등.

사실, 언제든지 새를 만들 section거나 article당신이 돌아 가야한다, h1다음이 동일 같이 :

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

과:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

참고로 헤더가 제목 요소 (예 h1:)이고 다른 요소 가 아닌 경우 header요소 로 감싸지 않아도됩니다 .

페이지의 기사 제목이 중요하지만 일반적으로 페이지의 최상위 제목은 페이지의 내용을 정의합니다. 때때로 그것은 기사의 이름이며, 때로는 당신이 보여주는 것처럼 기사 목록의 제목입니다.

<h1>My Very Interesting Articles</h1>

이 제목은 전체 페이지를 '흥미로운 기사'로 정의합니다. 그런 다음 각 기사가 나열되지만 제목 수준은 낮아집니다.

공식 w3schools 페이지에서 제목 태그 사용에 대한 답변은 다음과 같습니다. H1 제목은 기본 제목으로, H2 제목, 덜 중요한 H3 제목 등으로 사용되어야합니다.