section 과 article 차이

 

 

Article 요소는 문서, 페이지, 애플리케이션에 포함되며, 그 자체로도 독자적으로 완성된 내용을 담고 있다. 원칙적으로 Article 요소에 담긴 내용은 기사 통합 서비스 등을 통해서 따로 배포되거나 재사용할 수 있다. Article 요소의 내용은 게시판 글이 될 수도 있고, 잡지나 뉴스의 기사, 블로그에 올린 글, 사용자가 올린 댓글, 상호작용할 수 있는 기능 모듈을 비롯해서 다른 어떤 종류의 독립적인 콘텐츠도 될 수 있다.

 

 <article>을 단지 신문이나 블로그 기사article로 여기지 말고 옷 한 벌an article of clothing이라고 생각하면 된다.

(상황에 맞추어서 사용 가능하다)

• <h1>을 여기저기 잔뜩 쓰지 말 것. 페이지의 주 제목으로 <h1>을 쓰고, 다음으로는 <h2>, <h3>, <h4>… 이런 식으로 순차적으로 제목의 깊이를 정한다.
• 글의 특정 영역이 시작하고 끝나는 지점을 스크린리더 사용자가 알아챌 수 있게 하려면 <section>과 aria-label을 사용하라. 그런 목적이 아니라면 그냥 다른 태그를 쓰도록 하자. 이를테면 <aside aria-label=“간단 요약”>이라고 한다거나, 굳이 <div> 태그를 써야 할 이유가 있다면 <div role=“region” aria-label=“간단 요약”>이라고 쓸 수도 있겠다.
• <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그이며, 보조 기술을 사용하지 않는 사람들에게는 아무 영향을 주지 않는다. 적극적으로 활용하자.
• <article>은 블로그 글만을 위해서 만들어지지 않았으며, 독자적으로 완성된 콘텐츠는 무엇이든 담을 수 있다. 특히 watchOS에 콘텐츠가 제대로 표시될 수 있게 하는 데 큰 도움이 된다.

블로그가 아니라 유튜브 홈페이지 같은 경우라면 동영상을 <article> 태그에 나열할 수 있을 것이고, 아마존 같은 사이트라면 상품 정보를 하나씩 <article>에 넣어 나열하는 식이 될 것이다. 이 모든 <article>은 말하자면 다른 형식으로 추출해서 제공할 수 있는 콘텐츠다. 스스로 독자적인 페이지가 되기도 하지만 다른 페이지에 광고로 등장할 수도 있고, 뉴스레터 기사 중 하나로 나타날 수도 있다.