본문으로 바로가기

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 적용 예제

html
ⓐ <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>요소를 사용하면 됩니다.



Jaehee's WebClub



댓글을 달아 주세요