article

article

기사는 스스로 이치에 맞아야 하고 사이트의 나머지 부분과 독립적으로 배포하는 것이 가능해야 한다. (취지) intended to be independently distributable or reusable

<article> element에 적합한 내용

• <article>의 콘텐츠는 외부에서도 독립적으로 사용할 수 있는 완결된 내용이어야 함.

• 예를 들어, 블로그 글, 뉴스 기사, 사용자 리뷰, 포럼 게시글 등이 <article>의 대표적인 사례
• 포럼 게시물
• 블로그 게시물
• 뉴스 기사
• 매거진 글 하나
• 상품 카드
• 유저 코멘트 컴포넌트
• 위젯

• <article>은 재사용이 가능하다는 특징도 있다. 예를 들어, 블로그 게시글 템플릿을 여러 페이지에서 동일하게 사용할 때 <article>로 감싸는 것이 적절하다.

• 하나의 <article>은 그 자체로 독립적인 단위를 구성해야 하며, 그 안에 제목, 내용, 하단 정보(footer) 등을 포함할 수 있다.

• <article>에 포함된 내용은 그 자체로 외부 플랫폼에서 게시되거나, RSS 피드로 공유되어도 맥락을 유지할 수 있어야 한다.

• 예를 들어, <article> 안에 뉴스 기사를 넣고 RSS로 배포해도, 별도 설명이 없어도 이해 가능해야 함.

예시 (블로그 포스트 글)

<article class="blog-post">
  <header>
    <h2>5 Tips for Better Sleep</h2>
    <p>Published on January 24, 2025</p>
  </header>
  <p>Getting enough quality sleep is essential for your health...</p>
  <footer>
    <p>Tags: Health, Lifestyle</p>
  </footer>
</article>

예시 (뉴스 레이아웃)

<article class="news">
  <header>
    <h2>Breaking News: Major Tech Breakthrough</h2>
    <p>By Jane Doe | January 24, 2025</p>
  </header>
  <p>The tech world is buzzing after a major breakthrough in AI technology...</p>
</article>