명시 적 섹션 구조를 만듭니다. <main>이 섹션 노드이 아님을 잊지 마십시오. 코드 샘플에서 'Header'<h1>은 루트 노드 (레벨 1)이며 암시 적으로 두 개의 'Article'하위 노드 (레벨 2)가 할당됩니다. '주요 내용'<h1>은 기본 '머리글'과 동일한 수준 (수준 1)이며 나머지 암시 적 섹션 노드를 보유합니다. 같은 레벨 (레벨 2)에있는 'article-s'와 마지막 'section'.
<doctype html>
<header>
<h1>root</h1>
<section>
<h1>Header</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
</header>
<main>
<section>
<h1>Main content</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
</main>
<section>
<h1>Sidebar</h1>
</section>
이 방법은 '헤더 :
<doctype html>
<h1>main-level</h1>
<h2>descendant</h2>
<h2>descendant</h2>
<h1>main-level</h1>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
excplicitly 원하는 부분의 구조를 정의하는 시스템 권장있어 혼동을 피하기 위해 :이 아웃 라이너가 당신의 구조 (베어 뼈 된 - 스타일 암시 적) 보는 방법입니다 ','Main content ','Sidebar '같은 레벨 (레벨 2); 주요 '루트'노드 (레벨 # 1)의 하위 노드입니다. <header> 및 <main> 노드를 절편 될 것이다 당신은 당신이 언급 한 윤곽을 얻을 것, 그리고 구조는 하나 번역 것 :
<doctype html>
<section>
<h1>Header</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
<section>
<h1>Main content</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
<section>
<h1>Sidebar</h1>
</section>
그러나 그들은 아니에요, 나는 당신이 명시 적으로 섹션을 지정하는 것이 좋습니다.
<doctype html>
<h6>Grand-Grand</h6>
<!-- notice top level h6 -->
<section>
<h6>Grand</h6>
<article><h1>Minor</h1></article>
<!-- and h1 at the bottom of outline tree -->
<article><h1>Minor</h1></article>
</section>
<section>
<h6>Grand</h6>
<article><h1>Minor</h1></article>
<article><h3>Minor</h3></article>
<article><h4>Minor</h4></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h5>Grand</h5>
</section>
주의 방법 첫번째 제목 : 여기 예제, <h6> - 은, BTW, 대신 오래된 스타일의 <h1> (즉 개요) 명시 적으로 섹션 (안 제목)를 사용하는 경우 문서 구조를 정의하는 역할을 통지 (section 엘리먼트에 의해 만들어진) 섹션을 포함하는 이름의 섹션에서 구조는 명시 적 섹션 정의에 의해 지시됩니다 (윤곽선 구조에 영향을 미치지 않고 임의의 순서로 <h1> 또는 임의의 다른 제목을 사용할 수 있음을 의미 함) . 같은 :
<doctype html>
<h1>Grand-Grand</h1>
<section>
<h1>Grand</h1>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h1>Grand</h1>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h1>Grand</h1>
</section>
까지 html5 개요 consirned입니다. 나는 그것이 htm 파서를 위해 특별히 구현되었다고 생각합니다. (사실상 새로운 '시각적 영향'이 없습니다.) 그래서 그들은 페이지의 내용을보다 정확하게 '인식 할 수 있고 더 부드러운 경험을 제공하고 장애인을 돕습니다.' 크롬이 멋지다 html5 outliner extension; 그것은 주소 표시 줄의 오른쪽 부분에 아이콘을 배치하고 클릭하면 파레의 윤곽을 표시합니다.
전 outliner에 대해 들어 본 적이 없습니다. 나는 그것이 중요하다고는 생각하지 않는다. 어떻게 든 코드를 확인하려면 http://html5.validator.nu와 같은 유효성 검사기를 사용하십시오. –
outlinear는 매우 중요합니다. 특별히 html5 용. 그리고 좋은 결과를 보여주는 코드를 여기에 보여 줬음 –
[gnsedders outliner] (http://gsnedders.html5.org/outliner/)에서 첫 번째 예를 확인할 때 다른 개요를 얻습니다. – unor