HTML5의 구조적인 요소들 #2 - <section>,<article>

문서의 구조를 형성하는 블럭 요소

HTML5의 구조적인 마크업 요소를 위한 div, section, article 에 대해 알아봅니다.

div, section, article 요소 소개

• <div> : 이미 너무나도 잘 알고 있고 가장 많이 이용하는 통상적인 컨텐츠 그릇입니다.  이 이상 어떠한 의미론적인 뜻도 내포하고 있지 않으며, 단지 컨텐츠의 흐름만 형성하는 요소일 뿐입니다.
• <section> : 통상적인 문서 또는 어플리케이션의 섹션(구획)을 형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading 요소들을 <header>로 감싸기도 한다), 그리고 때때로 <footer> 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위라 생각하면 됩니다.
• <article> : 문서나 사이트에서 독립적인 부분입니다. 이 부분을 다른 곳에 옮기더라도 분리되어 지고, 또 의미가 통해야 합니다. 웹 블로그에서의 글, 포럼에서의 포스팅, 또는 코멘트를 예로 들 수 있습니다. <section> 요소처럼, heading 요소를 반드시 가져야 하며, 그리고 가끔은 <header> 요소와, <footer> 요소를 포함하기도 합니다.

이 세가지 요소들의 정의를 읽어 보면 꽤 비슷해 보입니다. 그래서 <div> 요소를 시작으로 비교하고 대조해 봅니다.

div element

POSH^[각주:1]의 서면으로, 우리는 가장 적합하거나 또는 의미론적으로 정확한 요소를 사용해야 합니다. 

요소가 일반적인 컨텐츠의 흐름을 형성한다는 통상적인 그릇이라는 의미를 내포하고 있다면, 이것은 그 이상의 어떠한 의미론적인 뜻도 가지고 있지 않다라는 의미입니다. 

즉, 적합한 요소가 없을 경우 사용되어 지는 요소이고 <div>의 컨텐츠는 페이지 내에서 서로 간의 관련성을 요구하지 않습니다.

section element

이 새로운 HTML5 <section> 요소는 통상적인 <div> 요소와 비슷하긴 하지만, 약간의 추가적인 의미론적인 뜻을 가지고 있습니다.

즉, <section> 요소가 포함하는 컨텐츠는 논리적으로 관련된 집합체이어야 한다는 것입니다.

<section> 요소는 문서 또는 어플리케이션의 포괄적인 섹션 부분을 나타냅니다. 

이 맥락에서 한 섹션은 전형적으로 heading 요소를 가지는, 그리고 그 주제와 관련된 집합체를 의미합니다.

<section> 역시 섹션을 나누는 컨텐츠 요소(sectioning content element)입니다. 

웹 페이지를 중첩된 관련 부분들의 목록으로 만든다고 가정해 봅니다.  

각 섹셔닝 컨텐츠 요소(sectioning content element)의 heading은 새로운 항목을 형성하고, 아래와 같이 들여쓰기가 중첩 수위를 반영하도록 할 수 있습니다.

1. Example list item 

2. Another item 

1. A nested item

i. You get the idea!

여기서 알아야 할 중요한 사실은 <div>는 섹셔닝 컨텐츠 요소가 아니라는 것이다.

article element

이 새로운 HTML5 <article> 요소는 <section> 요소처럼 전문화된 요소의 한 종류입니다. 

독립적이고 페이지 내에서 자립하는 부분이라는 더 특정한 의미론적인 뜻을 내포하고 있습니다. 

우리는 <section> 요소를 사용해야 할 지, <article> 요소를 사용할 지에 대한 좀 더 의미론적인 뜻을 가져다 줍니다.

이 중에서 어느 것을 선택해야 하나?

HTML4를 생각해 보았을 때 이러한 선택은 <p>와 <pre> 간의 선택과 비교해 볼 수 있습니다. 

이 두 요소 모두 텍스트를 담는 흐름 컨텐츠 요소(flow content elements)입니다. 

그러나 <pre> 요소는 프리포맷된 텍스트의 블럭요소라는 더 특정화된 의미를 내포하는 전문화된 <p> 요소의 한 종류와 같은 것입니다. 

<section>과 <article>도 마찬가지라고 볼 수 있습니다. 

<article>은 관련된 컨텐츠 중 페이지의 문맥에서 벗어나도 그 자체만으로 이해가 되는 글 한편을 의미하는 반면, <section>은 관련된 컨텐츠를 의미합니다. 

 여기서 혼동스러울 지도 모를 부분이 있습니다. <section>은 페이지의 부분, 부분에 사용되어 질 수 있습니다. 

또 홈페이지에서 최근글을 나타내는 부분처럼 여러개의 <article>을 포함할 수도 있고, 역시 또 길고 긴 한 <article> 안에서 섹션을 나누는데 <section> 요소를 사용할 수도 있습니다.

헷갈리는 부분이 아닐 수 없습니다.

이와 같은 이유로 <article>, <section>, 또는 <div> 요소 중에 어느 것이 적절한지 판단히기 위해서는 아래 선택권을 취할 것을 권유하고 싶습니다

• 동봉된 컨텐츠가 그 독립된 자체만으로도 의미가 통하는가? 만약 그렇다면 <article>를 사용하라
• 동봉된 컨텐츠가 주제와 관련된 것이가? 그렇다면 <section>을 사용하라.
• 만약 의미론적인 관련성이 없다면, <div>를 사용하라.

간혹, 스타일을 주기 위해 연결 수단으로 제공하는 경우를 제외하고는 <div>를 <section>과 <article>로 그리고 의미론적으로 HTML5에서 더 적절하다 생각되는 다른 새로운 구조적 요소로 대체하기 바랍니다. 

하지만, 적절하다 판단되어 진다면, <div> 요소의 사용을 두려하지 말고 사용하세요. <div> 요소도 여전히 HTML5로서 유효하기 때문이다.

<section>과 <article>은 HTML4에서 <div>가 사용되어 지는 것처럼 사용되고 있습니다. 

조금 더 구체적으로, 이러한 요소들은 <blockquote>나 <address> 안에 사용되어 질 수는 없습니다. 

그리고 <article>안에 <article> 요소의 중첩은 피해야 합니다. 대신 <article>에서 논리적인 부분 부분들을 표시하는데는 <section> 요소를 사용하면 됩니다. 

마지막으로, <section>과 <article>이 heading 요소를 포함하지 않는 경우는 웹 어플리케이션에서 입니다. 

e-mail 어플리케이션의 메인 리스트 뷰 페이지를 생각해 보면 이해가 될 것입니다. 

하지만 CSS로 heading 요소를 감추는 한이 있더라도 heading 요소를 추가하는 것이 나을 것입니다.

위의 요소들을 이용한 기본 구조

html

<article>
      <h1>Heading</h1>
      <section>
           <h2>Section Heading</h2>
           <p>Content...</p>
      </section>
      <section>
           <h2>Section Heading</h2>
           <p>Content...</p>
      </section>
      <section>
           <h2>Section Heading</h2>
           <p>Content...</p>
      </section>
</article>

위의 기본 구조는 <article> 요소로 감싸고, 그 세부항목들은 <section> 요소로 각각 묶어서 분명하게 나타내고 있습니다. 

원한다면 순차 목록 요소로 감싸도 좋을 것입니다.

Jaehee's WebClub

1. 평범하고 오래된 의미론적인 HTML : Plain Old Semantic HTML [본문으로]