<main> / <section> vs <article>

<main>

• 주요 컨텐츠를 나타낸다

👆주의

• main태그는 말 그대로 중심이 되는 내용을 의미하기 때문에 한 번만 사용하는 것을 허용한다
• <main>을 여러개 사용하는 경우, DOM에는 main이 하나여야한다
  • 나머지는 hidden 속성을 사용해야한다
• 구조적으로 옳은 main 요소를 사용해야한다

 

✌️구조적으로 옳은 main 요소란?

조상 요소가 html, body, div, 접근가능한 이름이 없는 form, autonomous custom 요소으로 제한된다. 

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.

https://html.spec.whatwg.org/#hierarchically-correct-main-element

 

---

<aside>

• 주요 내용과 간접적으로 연관된 부분
• 본문 내용에 추가적인 정보를 나타낸다

 

태그를 사용하는 곳

• 사이드바, 콜아웃
• 주석, 참조, 출처
• 용어 목록
• 링크 모음

 

👆주의

• 문서의 주요 내용에 포함되면 괄호에 묶인 글자여도 aside를 사용하면 안된다
• <aside> 는 사이드바로 많이 사용되지만 사이드에 배치해야하는 것은 아니다.
  • 배치가 목적이 아니라 콘텐츠의 내용이 해당 태그와 적절한지가 중요하다

---

<section>

• 명시적인 아웃라인을 가진다

명시적인 아웃라인이란?
html는 원래 암묵적인 아웃라인만 갖고 있었다. 하지만 HTML5의 콘텐츠 모델이 생기면서 명시적인 아웃라인이 생겼다

• 항상 제목과 내용을 가져야한다
• 문서의 아웃라인에 요소의 내용들이 나열되야하는 경우에만 section 요소가 적절하다

 

태그를 사용하는 곳

• 목차
• 탭 대화 상자의 다양한 탭 페이지
• 홈페이지는 도입, 뉴스 아이템, 연락 정보로 섹션을 나눌 수 있다
• numbered sections of a thesis

주의

• 블로그 게시물, 블로그 댓글, 신문 기사 등 독립형 컨텐츠는 <article>이 더 적절하다
• 주요 콘텐츠와 관련이 있지만 직접적이지 않는 경우 (관련 링크 , 작성자 약력 등)은 <aside>가 더 적절하다
• 문서의 주요 콘텐츠는 <main>이 적절하다
• 스타일링 목적(wrapper)으로 사용하는 경우에는 <div>가 적절하다

제목이 없는 경우

<section>은 제목을 가져야하지만 경우에 따라 제목이 없는 경우도 있다

 

1. 전역 탐색이 <nav>요소로 래핑된 경우 이전/다음 메뉴

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

 

2. 버튼

제목이 꼭 필요한 것은 아니지만 문서의 섹션에 해당한다

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

 

하지만 제목이 없는 섹션은 문서 개요에 나타나지 않으므로 제목을 포함하는게 더 좋다

대신 hidden을 사용하여 제목을 숨긴다

<section>
  <h2 class="hidden">Controls</h2>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

 

제목이 꼭 포함되어야 하는 이유

1. 스크린리더

2. SEO

---

<article>

• 명시적인 아웃라인을 가진다
• 반드시 제목을 사용해야한다

 

태그를 사용하는 곳

• 포럼 포스트
• 잡지 기사
• 뉴스 기사
• 블로그 글
• 블로그 댓글
• 위젯
• 내용과 독립적인 아이템

주의

• article이 중첩되면, 안에 있는 article 요소는 밖에 있는 article의 내용과 관련된 내용을 나타낸다.
  • 예를 들어, 댓글을 허용하는 블로그 글에은 블로그 글이라는 article 요소 안에 댓글이라는 article 요소가 중첩된 것이다

 

<article>과 <section>을 같이 사용한 코드 예시

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

Jurassic Park 영화에 관한 리뷰 페이지이다

1. section: 메인 리뷰
2. section: 사용자 리뷰들
   1. article: 사용자 리뷰
      
      • 제목 + 내용 + 푸터로 이루어져있다
3. footer

---

<section>과 <article> . . 굉장히 비슷해보인다

언제 어떤 것을 사용해야할까? 🤔

 

<section> vs <article>

<section>

• 다른 콘텐츠나 기능들의 개별 섹션을 그룹화하기 위해서 사용

<article>

• 개별 독립형 콘텐츠를 포함한다
• 블로그 게시물, 비디오, 이미지, 뉴스 항목

 

 

위 영화 리뷰에 적용시켜보자

리뷰들을 그룹화하기 위해 <section> 을 사용하였다

각각의 사용자 리뷰에는 <article>을 사용하였다