HTML5의 구조적인 요소들 #1
HTML5 엘리먼트 중에서 <nav>와 <aside>에 대해 알아봅니다.
그리고 <figure>과 이것의 자식 요소인 <figcaption>도 함께 살펴 본 후, <aside>와 비교하여 보도록 합니다.
nav, aside, figure 소개
- <nav> : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “skip navigation” 링크를 사용하고 있을 것입니다.
- <aside> : 주위의 내용과 분리는 되지만 아주 약간의 관련성이 있는 컨텐츠를 구성하는 페이지의 섹션을 말합니다. 인쇄본에서는 사이드바, 글의 발췌, 또는 각주 부분을 말하고, 웹 블로그 글에서는 글에 대한 관련된 정보, 여백을 메우는 추가 정보, 또는 코멘트 섹션을 말합니다.
- <figure> : 문서의 내용에 어떠한 영향도 미치지 않으면서 다른 곳으로 옮기더라도 문서의 흐름으로부터 삭제될 수 있는, 그러나 문서의 의미를 이해하는데 필수적인 컨텐츠를 의미합니다. 이 요소는 이미지 또는 동영상을 보여주는데 사용될 수 있으나, 또한 그래픽, 간단한 코드 또는 다른 매체를 포함하는 컨텐츠에도 사용되어 질 수 있습니다.
<nav> element
사이트 네비게이션으로 <ul class=”nav”> 또는 이와 유사한 것을 이미 사용하고 있을 것입니다.
<nav>요소는 네비게이션 링크들을 명시적으로 마크업할 수 있게 하여, 접근성의 이점을 가져다 줄 수 있습니다.
예를 들어, 스크린 리더와 같은 보조기기의 사용자들은 네비게이션 부분을 건너뛰고 바로 컨텐츠로 갈 수도 있고, 또는 중간 내용을 생략하고 네비게이션 항목으로 바로 건너 뛸 수도 있을 것입니다.
우리는 어떤 것이 주요 네비게이션 구역인지 결정하기 위한 또 다른 방식으로 이 요소를 사용할 수 있습니다.
그리고 단축키를 통해 네비게이션 접근을 용이하게 함으로써 시각장애 사용자에게 도움이 될까? 사이트 또는 페이지 내에서의 네비게이션 링크는 확실히 필수적인 반면, 페이지의 풋터 부분에 있는 흥미로운 내용은 그리 필수적이지는 않습니다.
그리고 네비게이션 링크를 목록화 한다면 <ul> 또는 <ol> 요소가 아직도 필요하다는 점에 주목해야 합니다.
반드시 그래야 하며, 가장 적절한 요소입니다. 그리고 제목 또는 관련있는 컨텐츠를 포함할 수도 있습니다.
다음의 코드는 제목 요소와 함께 사용된 <nav>를 소개합니다.
<nav>
<h2 class="a11y"> Main 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><깨알 팁>
h2 클래스명이 a11y인 것은 외국에서 관습 때문입니다.
접근성의 의미인 accessibility의 글자수가 13글자인데 첫 번째 글자가 a 마지막 글자가 y로 그 사이의 글자수는 총 11개입니다.
이 11개의 글자수를 그대로 표현하여 a11y 라고 표현합니다.
<aside> element
<aside> 컨텐츠는 추가되어야 할 요소이지만, 메인 컨텐츠를 이해하기 위해 필수적인 것은 아닙니다.
즉, 단지 관련만 있는 컨텐츠로서 프린트 디자인이 영감을 주긴 하지만, 필수적은 아닙니다.
예를 들어, 각주는 추가적인 정보를 제공하지만 필수적이지 않습니다. 그리고 발췌문은 필수적인 컨텐츠인 반면, 메인 컨텐츠에서 인용된 카피 문구입니다.
하지만, <aside>는 관련성이 있어야 한다는 사실을 명심해야 합니다. 사이트의 사이드바를 <body>의 자식요소로 <aside>에 넣는 것은 좋습니다.
하지만 사이트 전반에 걸친 정보를 <article>의 자식요소로서 <aside> 안에 보여져서는 안되는 것입니다.
그리고 <aside> 요소가 그 부모 섹셔닝 요소에 관련만 있으면, 광고에도 적합할 수 있습니다.
<aside class="sidenote">
<p>
<em>섹셔닝 루트</em> 요소에는 <blockquote>, <body>, <details>, <fieldset>, <figure>,<td>가 있다.
</p>
</asde>
<p><header>와 <footer>는 현재 속해 있는 섹셔닝 요소 또는 '섹셔닝 루트' 요소에만 적용된다.</p><figure> element
<figure> 요소는 필수적이지만 그 배치는 그렇지 않습니다.
CSS의 포지션을 이용하여 배치된 섹션의 그 어떤 부분에도 적합할 수 있습니다.
일반적으로 다음 코드와 같이 텍스트로 부터 참고가 되어 질 것이나, 반드시 그럴 필요는 없습니다.
<p>...부제목을 위한 <hgroup>의 사용 사례이다.</p>
<figure>
<img src="img/hgroup-subtitle.png" width="500" height="136" alt="hgroup 사용 사례 : 대체제목과 함께 사용된 글의 제목" />
</figure><figcaption>을 이용하여 <figure> 에 추가 캡션을 첫 번째 또는 마지막 자식 요소로서 제공할 수도 있습니다.
<figure>
<figcaption>...대체 제목과 함께 사용된 글의 제목</figcaption>
<img src="img/hgroup-subtitle.png" width="500" height="136" alt="hgroup 사용 사례 : 대체 제목과 함께 사용된 글의 제목" />
</figure>마지막으로, <figure>는 다음과 같이 하나 이상의 컨텐츠 요소를 포함할 수 있습니다.
<figure>
<pre>
<ruby><strong>crapulent</strong><rp>(</rp><rt>krǽpjulənt</rt>
<rp>)</rp></ruby>
</pre>
<img src="img/crapulent.png" width="570" height="80" alt="영어사전에서 단어의 발음 표기에 사용된 루비 텍스트" />
<figcaption>사전적인 정의에 사용된 루비 텍스트는 기본 단어 다음에 오는 발음기호를 나란히 나타낸다.</figcaption>
</figure>섹션의 내용을 이해하는데 있어서 해당 콘텐츠가 필수적인 내용인지 자문해 보고 <aside> 또는 <figure>을 선택하면 됩니다.
만약 컨텐츠가 필수적이진 않고 단지 관련성만 있다면 <aside>를 사용하고, 필수적이나 그 위치는 그다지 중요하지 않아 부록으로 옮겨 질 수 있는 것이면 <figure>를 사용하면 됩니다. 물론, 그 위치가 이전과 다음의 내용에 관련이 있다면 더 적절한 다른 뭔가를 찾아서 사용하여야 합니다.
또한 <nav>와 <aside>는 섹셔닝 컨텐츠 요소이므로, 그들의 제목은 문서 개요 형성에 영향을 미친다는 점도 기억해야 합니다.
<figure>는 섹셔닝 루트 요소이므로 자식 제목 요소는 문서 개요에서 감춰집니다.
종합해 본 건데, 거의 예외 없이 <section>과 <article>은 반드시 제목 요소를 가질 것입니다.
그 제목 요소는 도입부의 다른 정보와도 함께 <header> 안에 들어 갈 수 있습니다.
그 외의 고려사항
<section>과 <div>사이에서의 선택을 위한 경험에 입각한 방법으로서, HTML5 Doctor에 소개된 다음의 코멘트를 참고하도록 합니다.
접근성을 위해 nav 요소에 주로 사용되는 팁이지만, CSS를 통해 감추는 한이 있더라도, 의식적으로 각 sectiion에 제목을 추가하도록 하라.
CSS를 배제하였을때 제목을 가지지 않는 컨텐츠인것 같다면, 그것은 아마도 대부분 section이 아니다. — Oli Studholme
HTML Living Standard, WHATWG1
섹셔닝 요소는 <header>와 더불어, 저자(<address>) 및 카피라인트(<small>) 또는 관련 링크와 같은 추가 정보와 함께 하나 이상의 footer를 포함할 수도 있습니다.
중요한 것은 <header>와 <footer>는 이 요소들이 각각 속해 있는 섹셔닝 요소에만 적용된다라는 사실에 주의해야 한다는 것입니다.
또한, <headet>와 <footer>는 또 다른 <header>와 <footer>를 포함시킬 수 없습니다.
섹셔닝 요소는 <blockquote>, <body>, <details>, <fieldset> 그리고 <td>와 같은 섹셔닝 루트 요소와 함께 <section>, <article>, <aside> 그리고 <nav>를 포함합니다.
마지막으로, 비록 “header”, “footer”, 그리고 “aside”와 같은 이 모든 단어들의 의미에 선입관을 가지고 있지만, 이것들의 실제 의미론적인 뜻은 프리젠테이션 혹은 관계를 나타내는 배치로 부터가 아닌, 그것들이 포함하는 컨텐츠의 타입에서 비롯된 것임을 알아야 합니다.
예를 들어, <aside>는 각주를 포함시킬 수 있고, “Top of Page” 링크를 포함하는 <footer>는 섹션의 위&아래 모두 보여질 수 있다는 것입니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title> Article (HTML5) </title>
</head>
<body>
<header id="branding"> <!-- 페이지의 헤더임. -->
<h1>Site Name</h1>
<!-- 다른 컨텐츠도 포함될 수 있음. -->
</header>
<nav>
<ul><li>Main Navigation</li></ul>
</nav>
<div id="content"> <!--CSS를 주기 위해 감싼 것임. 제목이 없으므로 섹션이 아님. -->
<article>
<header>
<h1>Article title</h1>
<p>Article metadata</p>
</header>
<p>Article Content</p>
<footer>Article footer</footer>
</article>
<aside id="sidebar"><!--페이지의 두번째 컨텐츠(위 Article에 관련이 없음) -->
<h3>Sidebar title</h3>
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer><!-- 페이지 풋터. -->
</body>
</html>위의 마크업은 이상적인 페이지 구조의 사례라고 볼 수 있습니다.
페이지 헤더와 사이트 네비게이션, 메인 컬럼, 사이드 컬럼 그리고 페이지 풋터를 포함하는 표준화된 레이아웃을 이용하였습니다.
여기서 주목할 것은, sidebar는 Article에 관련이 없는 컨텐츠를 포함하고 있습니다.
따라서 <article>이 아닌 <body>의 자식요소라는 점 입니다.
만약에 <aside>가 Article에 아주 약간 관련성이 있는 컨텐츠를 포함하고 있다면, 이 <aside>를 <article>의 자식요소로 만들 수 있을 것 입니다.
또한 페이지의 헤더와 풋터는 중첩하는 <header>와 <footer>를 포함하지 않습니다. 이런 경우에는 <section>요소를 대신 사용해야 할 것입니다.
<header>와 <footer>는 또 다른 <header>와 <footer> 요소를 포함하지 않는다 라는 사실을 명심하세요.
- Web Hypertext Application Technology Working Group [본문으로]
'HTMLㆍ웹표준ㆍ 웹접근성' 카테고리의 다른 글
| 접근성 테이블(scope, id & headers) (1) | 2018.11.27 |
|---|---|
| HTML5의 구조적인 요소들 #2 - <section>,<article> (0) | 2016.09.29 |
| HTML5과 크로스브라우징 - shiv (0) | 2016.09.29 |
| HTML5와 접근성 (2) | 2016.09.29 |
| HTML Tags (1) | 2016.09.15 |
