HTML <article> 태그 – 올바른 이해와 사용 방법

`<article>` 태그의 정의 및 사용법

<article> 태그는
문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다.
예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>블로그 글 예제</title>
    </head>
    <body>
        <h1>블로그 글 예제</h1>
        <!-- 첫 번째 블로그 글 -->
        <article>
            <h2>웹 디자인 트렌드 2023</h2>
            <p>2023년 웹 디자인 트렌드에 대한 예측과 해석입니다. ...</p>
            <time datetime="2023-10-15">2023년 10월 15일</time>
            <a href="/web-design-trends-2023">원문 보기</a>
        </article>

        <!-- 두 번째 블로그 글 -->
        <article>
            <h2>UX 디자인의 중요성</h2>
            <p>사용자 경험(UX) 디자인이 왜 중요한지에 대한 논의입니다. ...</p>
            <time datetime="2023-10-12">2023년 10월 12일</time>
            <a href="/ux-design-importance">원문 보기</a>
        </article>

        <!-- 세 번째 블로그 글 -->
        <article>
            <h2>모바일 앱 개발 팁</h2>
            <p>모바일 앱을 개발할 때 유용한 팁과 가이드라인을 제공합니다. ...</p>
            <time datetime="2023-10-10">2023년 10월 10일</time>
            <a href="/mobile-app-development-tips">원문 보기</a>
        </article>
    </body>
</html>

이 예제에서 <article> 태그는 블로그 글 목록을 나타내고 있습니다. 각각의 <article> 태그는 하나의 독립적인 콘텐츠 영역으로 사용되었으며, 각 블로그 글은 개별적으로 다루어질 수 있는 내용입니다.

이렇게 <article> 태그를 사용하면 각 블로그 글이 독립적인 콘텐츠로 이해되고, 해당 콘텐츠를 블로그의 메인 페이지, 아카이브 페이지, 또는 관련 주제의 페이지에서 해당 블로그 글을 다시 표시하는 등으로 추출하거나 재사용할 수 있도록 하는데 사용됩니다.

`<article>` 태그의 사용 목적

많은 사람들이 <article> 태그를 주로 뉴스 기사, 블로그 글 및 글 영역으로만 이해하는 경우가 많습니다.
이것은 대중적인 사용 사례 중 하나이기 때문입니다. 그러나 <article> 태그는 단순히 뉴스 기사나 블로그 글과 같은 글 영역을 나타내는 데만 사용되는 것이 아니며, 그 범위는 더 다양합니다.

<article> 태그의 사용 목적은 "독립적인 콘텐츠 유닛"을 나타내는 것입니다.

이 콘텐츠 유닛은 그 자체로 의미를 가지며 독립적으로 배포하거나 재사용할 수 있어야 합니다. 따라서 뉴스 기사나 블로그 글뿐만 아니라 다른 독립적인 내용, 예를 들어 논문, 제품 리뷰, 포럼 게시물, 댓글, 위젯, 독립적인 사건 또는 이벤트 설명 등 다양한 형태의 콘텐츠를 <article> 태그로 표시할 수 있습니다.

뉴스 기사와 블로그 글은 <article> 태그의 일반적인 사용 사례 중 하나이지만, 이것이 <article> 태그의 한정된 용도는 아닙니다. 따라서 웹 개발자는 웹 페이지의 구조와 의미론을 고려하여 어떤 콘텐츠가 독립적으로 재사용 가능한지를 판단하고 적절하게 <article> 태그를 사용해야 합니다.

`<article>` 태그의 사용 예제

<article> 태그는 주로 다음과 같은 콘텐츠를 묶는 데 사용할 수 있습니다.

뉴스 기사
블로그 글
댓글
상품 설명
이벤트 정보
기타 독립적인 콘텐츠

뉴스 기사

HTML

<article>
    <header>
      <h2>오늘의 날씨</h2>
      <time datetime="2023-07-20">2023년 7월 20일</time>
    </header>
    <p>
        오늘은 전국적으로 구름이 많고,
        일부 지역에는 비가 내릴 것으로 예상됩니다.
    </p>
    <p>
        수도권은 오전에 구름이 많다가
        오후부터 비가 내릴 것으로 예상됩니다.
    </p>
    <p>
        강원도는 오전에 비가 내리다가
        오후부터 구름이 많아질 것으로 예상됩니다.
    </p>
    <footer>
        <p>출처: 기상청</p>
    </footer>
</article>

블로그 글

HTML

<article>
    <header>
        <h2>오늘의 일기</h2>
        <time datetime="2023-07-20">2023년 7월 20일</time>
    </header>
    <p>
        오늘은 날씨가 맑고 쾌청해서 산책을 다녀왔다.
    </p>
    <p>
        산책을 하면서 마음이 편안해지는 느낌을 받았다.
    </p>
    <p>
        집에 돌아와서 맛있는 저녁을 먹고 영화를 보았다.
    </p>
    <footer>
        <p>작성자: 홍길동</p>
    </footer>
</article>

HTML

<article class="comment">
    <p>
        댓글 내용
    </p>
    <footer>
        <p>작성자: 홍길동</p>
        <time datetime="2023-07-20">2023년 7월 20일</time>
    </footer>
</article>

상품 설명

HTML

<article>
    <header>
        <h2>상품명</h2>
    </header>
    <p>
      상품 설명
    </p>
    <img src="상품 이미지 주소" alt="상품 이미지">
    <p>
        상품 가격
    </p>
    <p>
        배송 정보
    </p>
    <p>
        환불 정책
    </p>
</article>

이벤트 정보

HTML

<article>
    <header>
        <h2>이벤트명</h2>
        <time datetime="2023-07-20">2023년 7월 20일 ~ 7월 30일</time>
    </header>
    <p>
        이벤트 내용
    </p>
    <img src="이벤트 이미지 주소" alt="이벤트 이미지">
    <p>
        이벤트 참여 방법
    </p>
    <p>
        이벤트 경품
    </p>
</article>

기타 독립적인 콘텐츠

HTML

<article>
    <header>
        <h2>콘텐츠 제목</h2>
    </header>
    <p>
        콘텐츠 내용
    </p>
    <img src="콘텐츠 이미지 주소" alt="콘텐츠 이미지">
    <p>
    콘텐츠 작성자
    </p>
    <time datetime="2023-07-20">2023년 7월 20일</time>
</article>

제시한 예제는 <article> 태그가 주로 어떤 종류의 콘텐츠를 묶는 데 사용될 수 있는지를 명확하게 보여주고 있습니다. <article> 태그는 다양한 독립적인 콘텐츠 유형을 나타내는 데 사용될 수 있으며, 각각의 콘텐츠는 독립적으로 이해되고 재사용 가능하도록 정의됩니다.

이 외에도 논문, 제품 리뷰, 포럼 게시물, 인터뷰 등에서 사용할 수 있습니다.

중첩된 `<article>` 태그의 사용

하나의 문서가 여러 개의 <article> 태그를 가질 수 있습니다.
<article> 태그 내에서 다시 <article> 태그를 사용하는 것은 가능하며, 다음의 예제에서는 일일 날씨 예보를 표시하기 위해 중첩된 <article> 태그가 사용되었습니다. 중첩된 <article> 태그는 각 날짜에 대한 날씨 예보 정보를 독립적인 콘텐츠로 나타내며, 부모 <article> 태그인 "서울 날씨 예보" 내에서 관련 내용으로 묶여 있습니다.

HTML

<article>
    <h1>서울 날씨 예보</h1>
    <article>
        <h2>2023년 10월 17일</h2>
        <p>맑은 날씨로 예상됩니다.</p>
    </article>
    <article>
        <h2>2023년 10월 18일</h2>
        <p>가끔 구름이 끼일 것입니다.</p>
    </article>
    <article>
        <h2>2023년 10월 19일</h2>
        <p>소나기가 예상됩니다.</p>
    </article>
</article>

`<article>`과 `<section>` 태그의 차이

<article> 태그는 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다.
반면, <section> 태그는 문서나 애플리케이션의 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는데 사용됩니다.
태그의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <section> 태그보다 <article> 태그가 더 좋은 선택일 수 있습니다.

`<article>` 태그의 구문상 주의할 점

<article> 태그는 <address> 태그의 자식 혹은 자손 태그가 될 수 없습니다.
<article> 태그의 작성자 정보를 <address> 태그를 이용하여 제공할 수 있습니다. 그러나 중첩 <article>에는 적용되지 않습니다.
<article> 태그의 암시적 role 속성의 값은 article입니다.