저자 : Edward O'Connor
HTML5 spec은 layout과 관련된 새로운 sectioning elements를 소개하고 있다. - <article>, <section>, <header>, <footer>, <nav>, <aside>, <hgroup>
이런 태그들을 사용할때에 대한 혼란이 늘어나고 있다. 이러한 태그들을 사용할때 더 적절하게 사용하는 방법과 예제를 통하여 blog template을 만들어 보고자 한다.
- 기본적인 페이지 template
처음 시작은 블로그의 기본적인 페이지 template부터 시작하고자 한다. 여기서는 사이트의 header, footer, sidebar, contents는
제외하고 sub-templates과 관련되게 제공하고자 한다.
<!DOCTYPE html>
<html lang="en-US-x-Hixie">
<head>
<title>My Blog: Adventures in cat pictures</title>
</head>
<body>
<header> <!-- site header -->
<hgroup> <!-- squashes subtitle in doc outline -->
<h1>My Blog</h1>
<h2>Adventures in cat pictures</h2>
</hgroup>
<nav> <!-- main blog navigation links -->
<ul>
<li><a href="…">Front page</a></li>
<li><a href="…">About My Blog</a></li>
… other navigation links …
</ul>
</nav>
</header>
… main content goes here …
<aside> <!-- sidebar -->
<section>
<h1>Search My Blog</h1>
<form action="…">
<input name="q" type="search"
placeholder="To search, type and hit enter" />
</form>
</section>
<section>
<h1>Blogroll</h1>
<ul>
<li><a href="…">My other blog</a></li>
<li><a href="…">Your blog</a></li>
<li><a href="…">Your friend’s blog</a></li>
</ul>
</section>
</aside>
<footer> <!-- site footer -->
<p>Copyright ⓒ 2009 You. All rights reserved.</p>
<address>
<a href="you@example.orgyou@example.orgmailto:you@example.org">you@example.org</a>
</address>
</footer>
</body>
</html>
위의 마크업은 쉽게 이해가 될것이다. 그래도 잠깐 짚고 넘어가보고자 한다.
첫째, page header
<header> <!-- site header -->
<hgroup> <!-- squashes subtitle in doc outline -->
<h1>My Blog</h1>
<h2>Adventures in cat pictures</h2>
</hgroup>
<nav> <!-- main blog navigation links -->
<ul>
<li><a href="…">Front page</a></li>
<li><a href="…">About My Blog</a></li>
… other navigation links …
</ul>
</nav>
</header>
이 사이트의 header에는 새로운 세개의 태그가 사용되어 졌다. - <header>,<hgroup>,<nav>
<header>태그는 모든 sectioning 태그에서 사용되어 질 수 있다.
이러한 조건에서는 <body>의 header로서 사용되어졌고, <article>태그만큼 새로운 sectioning elements이다.
페이지에서 사이트 heading과 page- 또는 section-specific headings의 차이를 구분할려고 한다면
CSS styling으로 가능하다.
<hgroup>태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어 진다.
위의 코드에서 처럼 header에서, blog의 제목과 & 서브제목을 마크업할때 사용하고, 서브제목이 문서의 바깥으로
나타나지 않게한다.
<nav>태그는 페이지내에서 다른 페이지 혹은 섹션 링크를 나타내는 섹션이다. <nav>태그는 header내용을 포함할 수 있다.
다음은 sidebar이다.
<aside> <!-- blog sidebar -->
<section>
<h1>Search My Blog</h1>
<form action="…">
<input name="q" type="search"
placeholder="To search, type and hit enter" />
</form>
</section>
<section>
<h1>Blogroll</h1>
<ul>
<li><a href="…">My other blog</a></li>
<li><a href="…">Your blog</a></li>
<li><a href="…">your friend’s blog</a></li>
</ul>
</section>
</aside>
sidebar에서는 몇가지 새로운 태그와 속성이 사용되었다. - <aside>,<section>,<input type="search">,
placeholder attribute. sidebar는 <aside>태그로 표현할 수 있다.
sidebar의 각 섹션은 <section>태그가 포함되어 있다.
HTML5는 application section 또는 문서내에서 <section>태그를 정의할 수 있다. section은 컨텐츠의 주제별 그룹이고,
heading, footer에서도 사용 가능하다.
<section>태그는 문서를 부분적으로 나누는것이다. 각 sidebar의 sections은 heading을 가지고 있고, 경계를 나타내준다.
<h1>태그를 headings으로 사용하고 <h2>~<h6>을 사용하지 않았다. sectioning태그는 heading태그를
중복시키지 않는 역활을 한다.
예제를 보면
<body>
<h1>Heading 1</h1>
<h2>Heading 1.1</h2>
<h3>Heading 1.1.1</h3>
<h2>Heading 1.2</h2>
</body>
또 다른 예제
<body>
<h1>Heading 1</h1>
<section>
<h1>Heading 1.1</h1>
<section>
<h1>Heading 1.1.1</h1>
</section>
</section>
<section>
<h1>Heading 1.2</h1>
</section>
</body>
CSS를 사용하여 body>h1 style이 section>h1보다 rendering되는 크기가 더 크다.
중복되는 최상위 heading과 하위 heading를 <section>태그로 구분할 수 있을 것이다.
search form은 HTML5의 내용중 부분적으로 사용을 하였다. <input type="search">는 type="text"와 같은동작을 하지만
분명한 차이점이 있다.
이러한 속성들은 Webkit엔진을 가진 브라우져(safari)에서는 몇년전부터 실행이 되어졌고, HTML5에서는 채택이 되어 졌다.
placeholder 속성은 input내용이 비어 있을때 또는 focus가 가지 않았을때 입력 예를 보여주고, 사용자가
click(또는 tab)으로 해당input field를 이동했을때는 텍스트가 사라지게 한다.
<footer>태그는 site의 metadata( copyright, contact information) 것들을 포함하고 있다.
<footer> <!-- site footer -->
<p>Copyright ⓒ 2009 You. All rights reserved.</p>
<address>
<a href="you@example.orgyou@example.orgmailto:you@example.org">you@example.org</a>
</address>
</footer>
- 개별 blog posts
블로그를 보는 두가지 방법이 있다. 하나는 페이지 내에서 한가지 블로그 포스트만 보는 것이고, 하나는 전체적으로
모아놓은 블로그 포스트들을 보는 것이다.
<article>
<header> <!-- blog post header -->
<h1>My Blog Post</h1>
<p>
posted by You at <time
datetime="2009-09-04T16:13:40-07:00">1:40 PM
on September 4th, 2009</time>
</p>
</header>
… body of blog post …
<footer> <!-- blog post footer -->
<p>Comments are closed at this time.</p>
</footer>
</article>
감싸고 있는 article 태그와 time 태그를 사용하고 있다.
<article>태그는 블로그 포스트를 사용하는 가장 좋은 sectioning 태그이다.
* <article>태그는 개별적인 문서의 부분, 페이지, 어플리케이션 또는 사이트등의 폼들을 구성하는
페이지 섹션을 나타낸다. <article>태그는 "독립적이다" 컨텐츠로 따로 사용할 수 있고, 어느 부분에서든 섹션별로
구분지어질 수 있다.
예를들어, 블로그 컨텐츠가 길고, 여러 부분으로 쪼개져 있고, 각각 subheading을 가지고 있다라면, 이러한 조건에서
<section>태그를 사용하면 된다.
<article>
<header>…</header>
<section>
<h1>Part the first</h1>
… first part of blog post …
</section>
<section>
<h1>Part the second</h1>
… second part of blog post …
</section>
… more sections …
<footer>…</footer>
</article>
<article>태그는 포스트의 내용을 포함하고 있고, 또한 <header>와 <footer>도 포함하고 있다.
<section>태그는 각각의 subsection을 포함하고 있다. 만약 세부적으로 styling또는 scripting을 적용시키고자
한다라면 <div>태그를 사용하는게 맞는 의미일 것이다.
* <section>태그는 일반적인 container태그는 아니다. styling 또는 scripting을 하기위함이라면 section대신 div를
사용하기를 권장한다.
<div>태그를 사용하는 것은 다음과 같이 짧은 블로그 포스트를 작성했을때이다.
<article>
<header>…</header>
<div>
… body of blog post …
</div>
<footer>…</footer>
</article>
포스트가 길어지고 나누어야할때는
<article>
<header>…</header>
<div>
<section>
<h1>Part the first</h1>
… first part of blog post …
</section>
<section>
<h1>Part the second</h1>
… second part of blog post …
</section>
… more sections …
</div>
<footer>…</footer>
</article>
- comment
comment에 대한 태그 사용은 <article>을 사용하길 권장한다.
<article>태그로 감싸게 된다면, 내부의 <article>태그는 바깥쪽 <article> contents와 관련되어 있다.
<article>
… header and such …
… body of blog post …
<article> <!-- comment 1 -->
… body of comment …
<footer> <!-- comment footer -->
… who wrote the comment, etc. …
</footer>
</article>
… more comments …
… blog post footer …
</article>
그러나 comment추가 form은 어떻게 할 것인지에 대해서 생각해봐야한다. comment추가 form은 comments가
존해하는 곳 다음에 나타난다.
comment와 form을 유지하는 container역확을 사용하는 태그를 사용하길 원한다. 내가 생각하는 가장 최적의 방법은
<section>태그이다.
<article>
… header and such …
… body of blog post …
<section>
<h1>Comments</h1>
<article> <!-- comment 1 -->
…
</article>
… more comments …
<form> <!-- add comment form -->
…
</form>
</section>
… blog post footer …
</article>
- Archive pages
Archive pages는 multiple blog posts를 가지고 있다. 페이지의 각 부분을 표시하기 위한 명확한 방법은 <article>태그를
사용하는 것이다.
<body>
<header>…</header>
<article>… blog post 1 …</article>
<article>… blog post 2 …</article>
… more blog posts …
<aside>…</aside>
<footer>…</footer>
</body>
이전에 하던 방식은 <div>태그를 사용하던 것이다.
<body>
<header>…</header>
<div>
<article>… blog post 1 …</article>
<article>… blog post 2 …</article>
… more blog posts …
</div>
<aside>…</aside>
<footer>…</footer>
</body>
원서 : http://edward.oconnor.cx/2009/09/using-the-html5-sectioning-elements
덧글
이태임 2009/11/18 19:02 # 삭제 답글
이 글을 보니까 대충 이해가 되지만 아직까지 새로 만들어진 태그들이 어떤 속성을 가지고 있는지에 대한 스펙이 나오지 않은 상황이라 어떻게 써야할지모르겠네요.