2014-10-18 2 views
0

차별화은 정말 처음으로 제대로 HTML5 태그에서 찾고 및 (블로그 사이트)이 페이지 구조와 함께 올라와있다 :HTML5 개요 질문 - 섹션과 머리글/바닥 글

<header> 
    <nav> 
     <ul> 
      <li>list 1</li> 
      <li>list 2</li> 
     </ul> 
    </nav> 
</header> 
<main> 
    <h1>Main page heading</h1> 
    <article><h1>Post 1</h1></article> 
    <article><h1>Post 2</h1></article> 
    <div id=“sidebar”> 
     <aside><h1>Aside heading</h1></aside> 
    </div> 
</main> 
<footer> 
    <aside><h1>Footer widget heading</h1></aside> 
    <aside><h1>Footer widget heading</h1></aside> 
</footer> 

내가 실행하는 경우 이것은 HTML의 아웃 라이너 도구 https://gsnedders.html5.org/outliner/를 통해 내가 얻을이 :

1. Main page heading 
    1. Untitled Section 
    2. Post 1 
    3. Post 2 
    4. Aside heading 
    5. Footer widget heading 
    6. Footer widget heading 

아니 정확하게는 윤곽을해야한다고 생각 나는 것 방법에 대해 설명합니다.

Q1. 내가 왜 '제목없는 섹션'을 얻는 지 알 수 없습니다. 주위를 노니 실제로는 <nav>과 관련이 있음을 알 수 있습니다. '제목없는 섹션'에 대해 걱정해야합니까? 네비게이션은 내가 아는 한 실제로 표제가 필요하지 않습니다 ...

Q2. 분명히 내 페이지 구조는 실제로 원하는 효과를 내지 못합니다. <header><footer><main> 페이지 콘텐츠와 차별화하고 싶습니다. 나는이 태그들이 절 단면 요소가 아니라는 것을 이해하지만 그렇지 않다면 무엇을위한 것인가? 특히 <header><footer>의 경우? 제 이해는 <div id="main"> 또는 <div id="wrapper">을 과거에 사용했을 수도있는 곳에서 <main>을 사용해야하며 페이지의 주 영역을 나타내야합니다. 정확히 무엇을하고 있는지를 이해해야합니다.

<section> 태그를 사용하지 않은 이유는 스타일 랩퍼로 사용해서는 안되며 '페이지 챕터'에 더 적합하기 때문입니다. 이 페이지에는 챕터가 없습니다 (자체 포함 된 유일한 항목은 <article><aside>으로 이미 구분되어 있음). 그래서 나는 <section>을 사용해야하는지 보지 못했습니다.

또한 <header><footer><h1> 태그를 사용하여 문제를 해결할 수있었습니다.

<header> 
    <h1>Site title</h1> 
    <nav> 
     <ul> 
      <li>list 1</li> 
      <li>list 2</li> 
     </ul> 
    </nav> 
</header> 
<main> 
    <h1>Main page heading</h1> 
    <article><h1>Post 1</h1></article> 
    <article><h1>Post 2</h1></article> 
    <div id=“sidebar”> 
     <aside><h1>Aside heading</h1></aside> 
    </div> 
</main> 
<footer> 
    <h1>Footer heading</h1> 
    <aside><h1>Footer widget heading</h1></aside> 
    <aside><h1>Footer widget heading</h1></aside> 
</footer> 

개요 :

1. Site title 
    1. Untitled Section 
2. Main page heading 
    1. Post 1 
    2. Post 2 
    3. Aside heading 
3. Footer heading 
    1. Footer widget heading 
    2. Footer widget heading 

그러나 헤더는 아마 제목을 가지고 있어야하지만, 내 바닥 글에 제목을주고 싶어하지 않는 한이 정말 훌륭한 솔루션처럼 생각하지 않습니다 .. 어떤 대안을 제안해도 감사 할 것입니다. 태그를 올바른 용도로 사용하면서 최대한 단순하게 유지하려고합니다.

누구나이 모든 질문을 읽어 주셔서 감사합니다. 이 윤곽선에 너무 집착하는 경우 나에게 알려주십시오.

+0

보편적으로 사용하고있는 개요 작성 도구가 권한으로 간주됩니까? [이 기사의 html5 개요] (http://html5doctor.com/outlines/)에는 도구가 마지막으로 업데이트 된 시간에 대한 기록이 없다고 언급되어 있습니다. 다른 outliners에서 귀하의 페이지를 확인하셨습니까? –

+0

좋은 점, 확실하지 않습니다. 다른 outliners에 대한 링크가 있습니까? 인터넷 검색을 시도했지만 확실한 것을 찾지 못했습니다. – Sarah

+1

아웃 라이너는 시간 낭비입니다. 여기 [http://www.paciellogroup.com/blog/2013/]에 좋은 소식이 있습니다. 10/html5-document-outline /). 그러나, 당신이 그들을 사용하려고한다면, 나는 JS 또는 크롬 확장으로 사용할 수있는 [h5o] (https://github.com/h5o) outliner를 시도 할 것이다. –

답변

0

일반적인 웹 페이지 (즉, 웹 사이트의 일부)를 사이트 제목 (대신 메인 컨텐츠 제목)을 body 절편 루트의 제목 등이 있어야합니다. 왜? 탐색과 같은 사이트 차원의 항목이 페이지의 주요 콘텐츠 제목의 범위에 있지 않아야하기 때문입니다.

사이트 제목을 원하지 않는 경우 페이지는 최소한 제목없는 개요 항목을 가져야합니다.이 항목은 적절한 경우 섹션 콘텐츠 요소 explicitly을 사용하여 얻을 수 있습니다.

my answer with examples (another one)을 참조하십시오.

Q1.내가 왜 '제목없는 섹션'을 얻는 지 알 수 없습니다. 주위를 노니 실제로는 <nav>과 관련이 있음을 알 수 있습니다. '제목없는 섹션'에 대해 걱정해야합니까? 순자산은 정말

모든 부분

은은 "갈망"을 ( sectionnav 같은 내용 요소를 절편 및 body 및 같은 루트 요소를 절편) ... 내가 아는 한 제목을 필요로하지 않는다 표제. 제공하지 않으면 아웃 라이너가 "제목없는 섹션"과 같은 것을 표시 할 수 있습니다. 제목이없는 섹션입니다. 아니요, 걱정할 필요가 없습니다. 모든 섹션에 제목이있는 것은 유용하거나 적절한 것은 아닙니다 (탐색은 한 가지 예일 수 있습니다).

질문 2. [...] 나는이 태그들이 절 단면 요소가 아니라는 것을 이해하지만 그렇지 않다면 무엇을위한 것인가?

각 섹션과 headerfooter (및 address) 요소를 가질 수있다. 그들의 직업은? 마크 업하려면 content that is not considered to be the main content of that section. 따라서 body의 자식 인 header은 전체 문서의 헤더이며, article의 자식 인 header은이 문서의 헤더 만입니다 (see examples).

바닥 글에 표제를 붙이지 않아도됩니다 (또는 섹션을 사용). footer을 사용하여 내용이 (귀하의 경우) 문서의 꼬리말임을 분명히했습니다. 바닥 글이 복잡하거나 내용이 많은 경우 섹션/제목이 적절할 수 있습니다. 꼬리말에 두 개의 aside 요소가 있으므로 바닥 글을 나타내거나 두 개의 aside 요소에 대한 그룹 부모 역할을하는 부모 (제목 없음) section을 추가하는 것을 고려해 볼 수 있습니다.