article 요소 독립형 콘텐츠

아티클 요소란 무엇인가요?

아티클을 사용하는 경우

아티클 구조

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

중첩된 아티클(댓글)

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

제품 카드를 아티클로 사용하기

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

아티클과 섹션 비교

<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

아티클과 Schema.org

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

cite 요소

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

링크의 작성자 표시

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

페이지에 여러 아티클 배치하기

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

아티클을 사용하지 않는 경우

빠른 확인

요약: 아티클 요소