article 태그

article 태그는 독립적이고 자체 포함된 사이트 블록을 위해 설계되었으며, 별도의 페이지로 사용될 수 있습니다.

예를 들어, 당신의 사이트가 기사로 구성되어 있다면, 각 기사를 이 태그 안에 배치할 수 있습니다. 사용자 댓글이 있다면, 각각의 댓글을 이 태그 안에 배치할 수 있습니다.

사이트 콘텐츠를 위한 main 태그가 있다면, article는 main 안에 배치될 수 있지만, 그 반대는 아닙니다.

예시

기사 텍스트를 article 태그로 구성해 보겠습니다:

html<div id="wrapper">
  <header>
    ...
  </header>
  <main>
    <article>
      <h1>헤더</h1>
      <p>
        텍스트
      </p>
      <p>
        텍스트
      </p>
    </article>
  </main>
  <footer>
    ...
  </footer>
</div>
 

예시

게시물을 article 태그로 구성해 보겠습니다:

html<div id="wrapper">
  <header>
    ...
  </header>
  <main>
    <h1>새로운 게시물</h1>
    <article>
      <h2>게시물 1</h2>
      <p>
        텍스트
      </p>
      <p>
        텍스트
      </p>
    </article>
    <article>
      <h2>게시물 2</h2>
      <p>
        텍스트
      </p>
      <p>
        텍스트
      </p>
    </article>
  </main>
  <footer>
    ...
  </footer>
</div>
 

같이 보기

  • 사이트 블록을 그룹화하는 태그 section
  • 사이트 상단 부분을 정의하는 태그 header
  • 사이트 하단 부분을 정의하는 태그 footer
  • 사이트 주요 부분을 정의하는 태그 main
  • 사이트 주요 메뉴를 정의하는 태그 nav
  • 사이트 보조 부분을 정의하는 태그 aside