HTML5의 구조적인 요소 살펴보기
<header>,<hgroup>, 그리고 <footer>에 대해 알아봅니다.
섹셔닝 요소(sectioning elements)는 <section>, <article>, <aside> 그리고 <nav>를 포함한다.
또한 <blockquote>, <details>, <fieldset>, <figure> 그리고 까지도 포함한다.
Headings(header, hgroup, h1~h6)와 footer
- <header> : 이 요소는 섹셔닝 요소에서 그 도입부와 네비게이션 컨텐츠에 사용됩니다. 일반적으로 headings(h1~h6 또는 hgroup) 요소를 포함하지만, 또한 관련 로고, 검색 폼, 테이블 컨텐츠, 링크 항목, 또는 nav 요소와 같은 다른 컨텐츠도 담을 수 있습니다. 그러나 footer 또는 또 다른 header를 담을 수는 없습니다.
- <footer> : 페이지의 top 링크, copyright 데이터, 관련 문서로의 링크 항목, 그리고 누가 이 글을 썼는지 등, 이와 같은 내용에 대한 추가적인 정보를 나타내는데 사용됩니다. 그리고 주로 컨텐츠의 마지막 부분에 나타냅니다. header와 마찬가지로, header나 또 다른 footer를 담을 수 없습니다.
- <hgroup> :
좀 더 전문화된 header의 한 형식이고 이것은 h1~h6 요소들을 포함하는데, heading과 subheading(때때로 subheading이 여러개가 될 수도 있다.)을 묶어 줄 수 있습니다.지금 언급된 명세는 HTML5에서는 쓸모 없게 되어 명세에서 삭제되었습니다. 이 요소를 사용할시 유효성 검사에서 에러 메세지를 받을 것입니다. - <h1>~<h6> : HTML4에서 heading 요소들을 물려 받았으며 일반적으로 heading의 단계들을 생략해서는 안되는 등 그것들을 정확하게 사용하는데 있어서 더 강력해진 HTML5의 지침을 제외하고는 기본적으로 바뀐 것은 없습니다.
header가 정의하고 있는 목적은 이 요소의 위치를 설명하기 위해서라기 보다 도입부나 네비게이션의 지원을 담고자 하기 위함입니다.
일반적으로 이 요소는 섹션 내에서 맨 윗부분에 위치하지만 꼭 그럴 필요는 없습니다.
footer는 관련 링크, 카피라이트, 그리고 저자의 정보를 담기 위한 요소입니다.
일반적으로 이 요소는 섹션 내에서 맨 마직막 부분에 위치하지만, 맨 윗부분에도 넣을 수도 있고, 또 여러 번도 가능합니다.
<address> 요소는 오직 페이지 마다에 관련된 연락 정보를 지원하는데 사용되었지만, HTML5에서는 전후 문맥에 따라 이 요소의 적용 범위가 “지정”되게끔 바뀌었습니다.
즉, HTML5에서<address>가 담고있는 연락정보는 가장 근접하게 이 요소가 속해 있는 <article> 또는 <body>요소의 것으로 그 범위가 지정됩니다.
HTML4의 경우와 같이 문자 그대로 주소를 나타내기 위한 것이 아니라 홈페이지에서 최근 글의 목록은 각 글의 저자 이름과 약력 소개 페이지로의 링크을 표시하기 위해 <address>를 사용할 수 있습니다.
header 적용 예제
ⓐ <h1>만 가지는 경우, <hgroup> 또는 <header>는 필요없다.
<article>
<h1>Article heading</h1>
<p>Content....</p>
</article>
ⓑ heading과 메타데이터를 가지는 <header>
<article>
<header>
<h1>Article heading</h1>
<p>(<time datetime="2014-07-25">25th July, 2014</time>)</p>
</header>
<p>Content....</p>
</article>
ⓒ subheading을 동봉하고 있을시 <hgroup>은 명세에서 삭제되었으므로, 이 subheading을 <p>에
포함시켜서 <header>로 묶어 주는 방법이 더 옳바르다.
<article>
<header>
<h1>Article heading</h1>
<p>Article subheading</p>
</header>
<p>Content....</p>
</article>
ⓓ heading, subheading 그리고 메타데이터를 포함하는 글;
<article>
<header>
<h1>Article heading</h1>
<h2>Article subheading</h2> <!-- CSS를 통해 부제목을 감추자!-->
<p>(<time datetime="2014-07-25">25th July, 2014</time>)</p>
</header>
<p>Content....</p>
</article>명심해야 할 것은 <header>안에 들어가는 다른 콘텐츠가 없다면 <header>없이 각각에 해당되는 <h1>~<h6>요소를 사용하면 됩니다.
'HTMLㆍ웹표준ㆍ 웹접근성' 카테고리의 다른 글
| Polyfill(폴리필) - 대체 방안 (0) | 2016.01.05 |
|---|---|
| UX 측면의 한국형 웹 콘텐츠 지침 (0) | 2016.01.05 |
| HTML5 "loose" & "strick" (0) | 2016.01.05 |
| 웹 접근성을 고려한 UI 컴포넌트 - 캐로셀(carousel) 편 (0) | 2015.11.25 |
| 웹 접근성 지침 (0) | 2015.11.24 |
