<div id="readability-page-1" class="page"><div><p><code>Outline</code>, <code>Heading</code> 에 대해 알아본다.<br>
서점에서 목차를 보고 관심있는 주제가 있는지를 확인하듯이, 검색엔진도 <code>Heading</code>을 주요하게 본다.</p>
<h2 id="outline">Outline</h2>
<p><code>Heading</code>과 <code>Section</code> Element로 구현한다.</p>
<p><a href="https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ko"><code>HeadingMaps Extension</code></a>을 사용하면 문서의 개요를 한눈에 파악할 수 있다.<br>
헤딩은 섹션의 제목이기때문에 2회 이상 반복하여 사용할 수 있다.</p>
<p><img src="https://media.vlpt.us/images/ginameee/post/a2542c73-d2c0-41c5-b95c-ff7f67528ea2/image.png"></p>
<h2 id="heading">Heading</h2>
<p>문서의 개요를 생성하는 기본아이템으로, 웹 브라우저와 화면 낭독기에 문서 개요를 제공한다.<br>
문서의 골격을 설명하는 가장 중요한 태그이기때문에 <strong>Heading태그는 생략해선 안된다.</strong></p>
<h3 id="vs-title">vs <code>&lt;title/&gt;</code></h3>
<p><code>&lt;title&gt;</code>은 <strong>문서의 제목</strong>이므로 문서내에서 한번만 사용할 수 있다.<br>
<code>&lt;h*&gt;</code>은 <strong>섹션의 제목</strong>이므로 문서내에서 여러번 사용할 수 있다.</p>
<hr>
<h2 id="명시적-섹션">명시적 섹션</h2>
<p><code>Sectioning Content</code>와 <code>Heading</code>을 적절히 사용하여 섹션을 명시적으로 나타낸 마크업</p>
<h2 id="sectioning-conent">Sectioning Conent</h2>
<p>HTML5에서 추가된 명세다.<br>
개요의 범위를 명시적으로 지정하는 역할을 한다.<br>
<code>Heading</code>이 나타내는 제목의 영역을 나타낸다.</p>

























<table><thead><tr><th>이름</th><th>설명</th></tr></thead><tbody><tr><td><code>&lt;article&gt;</code></td><td><strong>독립적으로 배포가 가능한 콘텐츠</strong> (기사, 본문, 맥락, 댓글도 독립적으로 볼 수 있다)</td></tr><tr><td><code>&lt;aside&gt;</code></td><td><strong>페이지의 주요내용이 아닌 부수적인 내용</strong> (배너, 연관컨텐츠)</td></tr><tr><td><code>&lt;nav&gt;</code></td><td><strong>사이드의 주된 탐색 메뉴</strong> (footer에 있는 바로가기링크는 주된 탐색메뉴가 아니다!)</td></tr><tr><td><code>&lt;section&gt;</code></td><td><strong>주제별로 나눌 수 있는 콘텐츠</strong> (article과의 차이점은 독립성이다.)</td></tr></tbody></table>
<p>즉 위의 태그를 사용했는데 <code>Heading</code>을 명시하지않았다면 어색한 마크업이 된다.<br>
<code>Heading</code>이 눈에 보이지 않더라도 마크업하고 CSS로 가리는 식으로 작업하자.</p>
<hr>
<h2 id="암시적-섹션">암시적 섹션</h2>
<p><code>Sectioning Content</code>없이 <code>Heading</code>만을 이용하여 마크업하여 암시적으로 개요가 생성된 섹션<br>
각 <code>Heading</code>의 영역이 어디서부터 어디까지인지 알 수 없다.<br>
암시적 섹션은 지향하자.</p>
<hr>
<h2 id="어색한-섹션">어색한 섹션</h2>
<ul>
<li>Sectioning Contents를 사용했으나 Heading이 누락된 경우</li>
<li>Heading이 순서에 맞춰서 선언되지 않은경우 (상위 헤딩이 없는경우: h1없이 h2가 있는경우)</li>
</ul>
<hr>
<h2 id="html5-outline-알고리즘">HTML5 Outline 알고리즘</h2>
<p>HTML5 명세에는 웹 개발자가 Heading의 수준을 부적절하게 마크업하더라도, 보정해주는 알고리즘이 있다.<br>
그러나 브라우저에서는 구현이 되어있지않아서, 의도된대로 동작하지 않는다.<br>
섹셔닝 요소를 적극 사용하되 아직까지는 알고리즘에 의존하지말고 h1, h2, h3 을 순서에 맞춰서 작성해주자.</p>
<p><img src="https://media.vlpt.us/images/ginameee/post/7f7fd044-53bd-4016-928e-4f8771b6315d/image.png"></p>
<p><img src="https://media.vlpt.us/images/ginameee/post/d9bae945-59e5-4ad5-97a6-4210c565dc27/image.png"></p></div></div>

ginameee.log

Jangchun Lee

Outline, Heading 에 대해 알아본다.
서점에서 목차를 보고 관심있는 주제가 있는지를 확인하듯이, 검색엔진도 Heading을 주요하게 본다.
Outline
Heading과 Section Element로 구현한다.
HeadingMaps Extension을 사용하면 문서의 개요를 한눈에 파악할 수 있다.
헤딩은 섹션의 제목이기때문에 2회 이상 반복하여 사용할 수 있다.
Heading
문서의 개요를 생성하는 기본아이템으로, 웹 브라우저와 화면 낭독기에 문서 개요를 제공한다.
문서의 골격을 설명하는 가장 중요한 태그이기때문에 Heading태그는 생략해선 안된다.
vs <title/>
<title>은 문서의 제목이므로 문서내에서 한번만 사용할 수 있다.
<h*>은 섹션의 제목이므로 문서내에서 여러번 사용할 수 있다.
명시적 섹션
Sectioning Content와 Heading을 적절히 사용하여 섹션을 명시적으로 나타낸 마크업
Sectioning Conent
HTML5에서 추가된 명세다.
개요의 범위를 명시적으로 지정하는 역할을 한다.
Heading이 나타내는 제목의 영역을 나타낸다.
이름
설명
<article>
독립적으로 배포가 가능한 콘텐츠 (기사, 본문, 맥락, 댓글도 독립적으로 볼 수 있다)
<aside>
페이지의 주요내용이 아닌 부수적인 내용 (배너, 연관컨텐츠)
<nav>
사이드의 주된 탐색 메뉴 (footer에 있는 바로가기링크는 주된 탐색메뉴가 아니다!)
<section>
주제별로 나눌 수 있는 콘텐츠 (article과의 차이점은 독립성이다.)
즉 위의 태그를 사용했는데 Heading을 명시하지않았다면 어색한 마크업이 된다.
Heading이 눈에 보이지 않더라도 마크업하고 CSS로 가리는 식으로 작업하자.
암시적 섹션
Sectioning Content없이 Heading만을 이용하여 마크업하여 암시적으로 개요가 생성된 섹션
각 Heading의 영역이 어디서부터 어디까지인지 알 수 없다.
암시적 섹션은 지향하자.
어색한 섹션
Sectioning Contents를 사용했으나 Heading이 누락된 경우
Heading이 순서에 맞춰서 선언되지 않은경우 (상위 헤딩이 없는경우: h1없이 h2가 있는경우)
HTML5 Outline 알고리즘
HTML5 명세에는 웹 개발자가 Heading의 수준을 부적절하게 마크업하더라도, 보정해주는 알고리즘이 있다.
그러나 브라우저에서는 구현이 되어있지않아서, 의도된대로 동작하지 않는다.
섹셔닝 요소를 적극 사용하되 아직까지는 알고리즘에 의존하지말고 h1, h2, h3 을 순서에 맞춰서 작성해주자.

HTML 개요 알고리즘 이해

댓글