[TIL] Semantic Tag : Section VS Article

시맨틱 태그를 사용하다가 <section>과 <article>를 사용하던 도중 <section>안에 <article>을 넣어도 되는가? <article>안에 <section>을 넣어도 되는가? 에 대한 궁금증이 생겨 그에 대한 정보를 찾아보게 되었다.

일단! 시맨틱 태그(semantic tag)란 무엇인가?

MDN 문서가 말하는 HTML 시맨틱 태그란?

HTML은 채워질 데이터를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할입니다.

<h1>, <input> 처럼 태그들이 어떤 의미로 쓰여질 것인지, 어떤 의미가 있는 element인지 명시할 수 있어야한다고 한다.

article의 설명을 먼저 체크해 보았다.

• 각각의 <article>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <article>의 자식으로 포함하는 방법을 사용합니다.
• <article> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <article> 요소 안에 중첩한 <article>로 나타낼 수 있습니다.

article은 article안에 중첩이 가능하다.

	<article>
    	<h1> Hello, This is my Blog </h1>
    	blog contents something ...
        .....
        .....
    	<article> blog comment 1 </article>
        <article> blog comment 2 </article>
    </article>

위의 코드처럼 각각 서로 분리해서 조각조각 사용할 수 있는 경우, 블로그 댓글을 모두 포함하고 있는 블로그 글 article, 블로그 댓글 각각의 article 이 <article>을 사용해야하는 경우이다.
쉽게 말하면 컴포넌트의 개념.

그럼 section은?

• 각각의 <section>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.
• 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 <article> 요소를 고려하세요.
• <section> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.

section은 다른 영역과 구분이 필요한 묶음에 사용한다.
예시코드와 같이 상단의 article 컴포넌트를 묶고, 그와 구분을 지어야하는 푸터 컴포넌트를 묶는 의미를 갖고 있다.

	<section>
    	<article>
    	<h1> Hello, This is my Blog </h1>
    	blog contents something ...
        .....
        .....
          	<article> blog comment 1 </article>
          	<article> blog comment 2 </article>
      	</article>
    </section>
    <section>
    	<footer>
        this is footer.
        </footer>
    </secton>

하지만 MDN 문서에 따르면 section을 div처럼 block과 css속성을 주기위해 사용하지 말라고 되어있다. 큰 영역을 사용하는 경우로만 <div class="container">처럼 영역을 구분하는 경우로 <section>을 사용하면 될 듯 하다.