HTML5에서 헤더를 처리하는 방법

Question

이전 잡지의 웹 사이트를 HTML5로 마이그레이션해야하며 일부 의미상의 문제가 있습니다. 주 레이아웃을 설명하기 위해 다음 개요를 만들었습니다. 내가 문서 요소 전에 단락 요소에서이 같은 잡지 기사 이상

<div id="wrapper"> 
    <header> 

    </header> 
    <nav> 

    </nav> 
    <main> 
     <p><i>Name of Magazine</i>, 1985, 4, p. 12-14</p> 
     <article> 
      <header>    
       <h1>Heading</h1> 
       <p>Subheading</p> 
      </header> 
      <figure> 
       <img ...> 
       <figcaption> 
        Caption. 
       </figcaption> 
      </figure> 
      <p>First paragraph of article text.</p> 
     </article> 
    </main> 
</div> 

There's a fiddle here. 항상, 잡지, 해, 문제, 페이지의 이름을 포함에 대한 설명이 있어야한다.

첫 번째 질문은 다음과 같을 것입니다. 대신 기사 머리글 안에 넣어야합니까? 그렇다면 기본 태그 안에 기사 요소를 포함하는 것이 중복되는 것으로 간주됩니까? 그리고 실제로 기사의 일부는 아니지만 그와 밀접한 관련이있는 정보를 지정하는 의미 적으로 적합한 태그가 있습니까? 원래 잡지에서

(그리고 HTML4 웹 사이트) 기사에 속하는 이미지

때때로 다음과 같이 문서 제목과 동일한 수준 ( see fiddle here)에 배치됩니다 :

<main> 
    <p><i>Magazine</i>, 1985, 4, p. 12-14</p> 
    <article> 
     <figure> 
      <img ...> 
      <figcaption> 
       Caption. 
      </figcaption> 
     </figure> 
     <header>    
      <h1>Heading</h1> 
      <p>Subheading</p> 
     </header> 
     <p>...</p> 
    </article> 
</main> 

그것을 이해 하는가 기사 요소 내부의 상단에 헤더가 없습니까? 이 경우 머리글 내부에 그림을 넣는 것보다 감각적입니까?

대신 CSS로 해결할 수 있지만 (그림 요소에 수레를 유지하고 싶지만) 경우에 따라 머리글 위의 전체 너비 이미지가있는 변형을 찾을 수도 있습니다. Fiddle No. 3 here 이미지가 전체 기사를 보여 주며, 로고가 오늘날 대부분의 웹 페이지의 주요 헤더의 일부와 동일한 방식으로 헤더의 일부가 될 수 있다고 주장해야합니다. 그러나 다른 경우에는 헤더에 기사에 속한 내용을 붙여야하는 것처럼 보입니다. 반면에 의미 론적 요소이기 때문에 어쨌든 헤더가 하단에 위치한다고해도 명확해야합니다.

어떻게 해결할 수 있습니까?

Answer 1

기사 머리글에 대신 넣어야합니까?

예. 문서에 관한 것이 아니라 문서에 관한 메타 데이터이므로 inside은 article이어야합니다. 그리고 header이 이에 해당하는 적절한 요소입니다 (footer도 적절할 수 있습니다. 그 차이점은 엄격하게 정의되지 않았으므로, 귀하의 경우에는 header).

그렇다면 기본 태그 안에 기사 요소를 포함하는 것이 중복 될 수 있습니까?

아니요. main을 지정하지 않으면 소비자는 페이지의 주 콘텐츠로 간주되는 것으로 추측 할 수 있지만 (확실하지는 않습니다). 음, article이 body의 유일한 섹션 콘텐츠 요소 인 경우 상황은 매우 명확합니다. (다른 주요 콘텐츠는 무엇이 될 수 있습니까?) 그러나 항상 main을 찾는 소비자와 main role을 찾습니다. main 요소를 사용할 때 암시 적으로 추가됩니다.

실제로이 기사의 일부는 아니지만 그와 밀접한 관련이있는 정보를 지정하는 데 의미 적으로 적합한 태그가 있습니까?이 메타 데이터/콘텐츠에 대한 이 문서라면

(즉, not the "main" content of that section) header 및 footer 적절하다.
는이 문서의 단면 콘텐츠 요소 관련 콘텐츠라면 asidecould은 적절 (이는 문서를 나타내고, 또는 문서를 나타내는 body의 자식으로서 article의 자식 표기는 depends on the kind of relation 경우).

기사 요소 내부의 상단에 헤더가없는 것이 합리적입니까?

예. header은 맨 위에 있지 않아도되고 footer은 맨 아래에있을 필요는 없습니다. 같은 섹션에 대해 several header/footer 개의 요소가있을 수도 있습니다.