<article>
태그의 정의 및 사용법
<article>
태그는
문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다.
예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있습니다.
<!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>
태그는 주로 다음과 같은 콘텐츠를 묶는 데 사용할 수 있습니다.
- 뉴스 기사
- 블로그 글
- 댓글
- 상품 설명
- 이벤트 정보
- 기타 독립적인 콘텐츠
뉴스 기사
<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>
블로그 글
<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>
댓글
<article class="comment">
<p>
댓글 내용
</p>
<footer>
<p>작성자: 홍길동</p>
<time datetime="2023-07-20">2023년 7월 20일</time>
</footer>
</article>
상품 설명
<article>
<header>
<h2>상품명</h2>
</header>
<p>
상품 설명
</p>
<img src="상품 이미지 주소" alt="상품 이미지">
<p>
상품 가격
</p>
<p>
배송 정보
</p>
<p>
환불 정책
</p>
</article>
이벤트 정보
<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>
기타 독립적인 콘텐츠
<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>
태그인 "서울 날씨 예보" 내에서 관련 내용으로 묶여 있습니다.
<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
입니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<article>
|
5 | 12 | 4 | 5 |
명세서
명세서 사양 | |
---|---|
<article>
|
HTML Standard #the-article-element |
참고문헌
같이 보기
- HTML role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공
- HTML <header> 태그 – 올바른 이해와 사용 방법
- HTML <main> 태그 – 올바른 이해와 사용 방법
- HTML <footer> 태그 – 올바른 이해와 사용 방법
- HTML <aside> 태그 – 올바른 이해와 사용 방법
- HTML <nav> 태그 – 올바른 이해와 사용 방법
- HTML <section> 태그 - 올바른 이해와 사용 방법
- HTML <address> 태그 - 올바른 이해와 사용 방법
- HTML <div> 태그 - 올바른 이해와 사용 방법
- HTML <hr> 태그 - 올바른 이해와 사용 방법
- HTML 제목(<h1>~<h6>) 태그 - 올바른 이해와 사용 방법