<nav>, <aside>, <figure> 요소 소개
<nav> : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “skip navigation” 링크를 사용하고 있을 것입니다
<aside> : 주위의 내용과 분리는 되지만 아주 약간의 관련성이 있는 컨텐츠를 구성하는 페이지의 섹션을 말합니다. 인쇄본에서는 사이드바, 글의 발췌, 또는 각주 부분을 말하고, 웹 블로그 글에서는 글에 대한 관련된 정보, 여백을 메우는 추가 정보, 또는 코멘트 섹션을 말합니다
<figure> : 문서의 내용에 어떠한 영향도 미치지 않으면서 다른 곳으로 옮기더라도 문서의 흐름으로부터 삭제될 수 있는, 그러나 문서의 의미를 이해하는데 필수적인 컨텐츠를 의미합니다. 이 요소는 이미지 또는 동영상을 보여주는데 사용될 수 있으나, 또한 그래픽, 간단한 코드 또는 다른 매체를 포함하는 컨텐츠에도 사용되어 질 수 있습니다
<nav>
사이트 네비게이션으로 <ul class=”nav”> 이렇게 적어서 사용을 하고 있을텐데요
<nav>요소는 네비게이션 링크들을 명시적으로 마크업할 수 있게 하여, 접근성의 이점을 가져다 줄 수 있습니다.
네비게이션 링크를 목록화 한다면 <ul> 또는 <ol> 요소는 쓰지 않는것이 아니라 계속해서 사용되어진다는 점을 유의 하셔야합니다
<nav>
<h2 class="accessibility">navigation</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Weblog</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact</a></li>
</ul>
</nav>
<aside>
<aside> 컨텐츠는 추가되어야 할 요소이지만, 메인 컨텐츠를 이해하기 위해 필수적인 것은 아닙니다.
<aside> 는 관련성이 있어야 하고 사이트의 사이드바를 <body>의 자식요소로 <aside>에 넣는 것은 좋습니다.
하지만 사이트 전반에 걸친 정보를 <article>의 자식요소로서 <aside> 안에 보여지면 안됩니다
<aside class="sidenote">
<p>
<em>섹셔닝 루트</em> 요소에는 <blockquote>, <body>, <details>, <fieldset>, <figure>,<td>가 있다.
</p>
</asde>
<p><header>와 <footer>는 현재 속해 있는 섹셔닝 요소 또는 '섹셔닝 루트' 요소에만 적용된다.</p>
<figure>
<figure> 요소는 필수적이지만 그 배치는 그렇지 않습니다
<figure>
<img src="img.png" width="500" height="300" alt="이미지의 제목" />
</figure>
figure에서의 alt는 반드시 적어야합니다. 아니면 검색엔진에서 검색이 되지 않습니다
<figcaption>을 이용하여 <figure> 에 추가 캡션을 첫 번째 또는 마지막 자식 요소로서 제공할 수도 있습니다.
<figure>
<figcaption>...대체 제목과 함께 사용된 글의 제목</figcaption>
<img src="img.png" width="500" height="300" alt="제목" />
</figure><figure>는 다음과 같이 하나 이상의 컨텐츠 요소를 포함할 수 있습니다.
<figure>
<pre>
<ruby><strong>test1</strong><rp>(</rp><rt>test11</rt> <rp>)</rp></ruby>
</pre>
<img src="img.png" width="570" height="80" alt="test2" />
<figcaption>test3</figcaption>
</figure>