HTML 이란? - article 태그에 대해서 -8

쨔잔!

 

다들 잘지내셨나요?

하루만에 묻기 어색하긴 한데요..

 

아무튼 오늘은

<article> 태그에 대해서 알아보도록 하죠!

 

---

 

ⓒ Photography by pexels - https://www.pexels.com/

 

1️⃣ article 태그란?

<article> 태그는 HTML5에서 도입된 시맨틱 태그 중 하나로, 독립적인 콘텐츠를 정의할 때 사용됩니다. <article>은 문서나 웹 페이지 내에서 독립적으로 배포, 재사용 또는 참조될 수 있는 콘텐츠의 범위를 나타냅니다. 주로 블로그 글, 뉴스 기사, 포럼 게시물, 사용자 리뷰, 독립적인 설명 문서 등에 사용됩니다.

 

---

 

2️⃣ 주요 특징

 

1. 독립적인 콘텐츠 블록:
   • <article> 태그로 감싼 콘텐츠는 문서나 페이지의 나머지 부분과 독립적으로 존재할 수 있는 내용을 의미합니다. 예를 들어, 블로그 포스트나 뉴스 기사와 같은 콘텐츠는 그것만으로도 유의미하며, 다른 곳에 재사용되거나 배포될 수 있습니다.
2. 시맨틱 의미:
   • <article> 태그는 문서 내에서 특정한 주제나 정보를 독립적으로 정의하며, 검색 엔진이나 스크린 리더와 같은 기계가 그 내용을 인식하고 적절히 처리할 수 있게 합니다. 이로 인해 SEO 및 접근성 측면에서 매우 중요한 역할을 합니다.
3. 내부에 포함될 수 있는 요소들:
   • <article> 태그 안에는 헤더, 본문, 이미지, 미디어, 관련 링크 등 독립된 콘텐츠에 필요한 모든 요소가 포함될 수 있습니다. 이와 함께 <header>, <footer>, <section>, <nav> 같은 다른 시맨틱 태그도 적절히 사용될 수 있습니다.
4. 다른 태그와의 관계:
   • <article> 태그는 여러 개가 한 문서 내에 존재할 수 있으며, 각 <article>은 독립적으로 처리됩니다. 또한, <article> 태그는 다른 시맨틱 태그들인 <section>, <main>, <aside> 등과 함께 사용되며, 특히 여러 개의 독립 콘텐츠가 포함된 페이지에서 유용하게 활용됩니다.

 

---

 

3️⃣ 사용 예시

<article>
    <header>
        <h2>블로그 제목</h2>
        <p>작성자: 홍길동 | 날짜: 2024년 10월 10일</p>
    </header>
    <p>이곳에 블로그 글 본문 내용이 들어갑니다. 이 글은 독립적으로 의미를 가지며 다른 문서나 사이트에서도 재사용될 수 있습니다.</p>
    <footer>
        <p>태그: 웹 개발, HTML5</p>
    </footer>
</article>

 

위 예시에서는 <article>을 사용하여 블로그 글을 구조화하고, <header>와 <footer>를 통해 글의 제목, 작성 정보, 태그 등을 추가했습니다.

 

여러 <article>을 사용하는 예시

<main>
    <h1>최신 뉴스</h1>

    <article>
        <header>
            <h2>기사 1 제목</h2>
            <p>작성자: 홍길동 | 날짜: 2024년 10월 10일</p>
        </header>
        <p>첫 번째 뉴스 기사 내용입니다. 이 기사만으로도 독립적인 의미를 가집니다.</p>
    </article>

    <article>
        <header>
            <h2>기사 2 제목</h2>
            <p>작성자: 이순신 | 날짜: 2024년 10월 11일</p>
        </header>
        <p>두 번째 뉴스 기사 내용입니다. 역시 독립적으로 사용될 수 있는 콘텐츠입니다.</p>
    </article>

</main>

위 예시에서는 두 개의 <article>을 <main> 태그 안에 포함하여, 각각의 기사를 독립된 콘텐츠로 표현하고 있습니다.

 

---

 

4️⃣ <article> 태그의 주요 사용 사례

 

1. 블로그 포스트:
   • <article> 태그는 블로그 포스트를 정의하는 데 자주 사용됩니다. 블로그 글은 독립적인 콘텐츠로서 다른 페이지나 웹사이트에서도 쉽게 재사용되거나 배포될 수 있기 때문에, <article> 태그로 감싸는 것이 적절합니다.
2. 뉴스 기사:
   • 뉴스 기사 역시 독립적으로 배포되거나 참조될 수 있는 콘텐츠이므로 <article> 태그를 사용하여 마크업하는 것이 좋습니다. 페이지 내 여러 뉴스 기사들을 각각 <article>로 구분하여 사용하면 구조가 명확해집니다.
3. 포럼 게시물 또는 댓글:
   • 사용자들이 작성하는 포럼 게시물이나 댓글, 리뷰 등의 콘텐츠도 각기 독립된 정보로 취급될 수 있습니다. 이러한 경우에도 <article> 태그를 사용하여 콘텐츠를 감쌀 수 있습니다.
4. 제품 설명서, 독립적인 문서:
   • 제품 설명서나 독립적으로 작성된 매뉴얼, 가이드 등의 문서도 <article> 태그로 정의할 수 있습니다. 이러한 문서들은 페이지 내에서 독립적인 정보로 취급됩니다.

 

---

 

5️⃣ 잘못된 사용 예시

<article>
    <header>
        <h2>잘못된 예시</h2>
    </header>
    <nav>
        <a href="#">링크 1</a>
        <a href="#">링크 2</a>
    </nav>
</article>

 

이 예시에서는 <article> 안에 <nav> 태그를 사용하고 있지만, 이는 적절하지 않을 수 있습니다. 내비게이션 메뉴는 독립적인 콘텐츠라기보다는 다른 콘텐츠나 섹션으로 이동하기 위한 링크의 모음이기 때문에, <nav>는 <article> 밖에서 사용하는 것이 더 적합합니다.

 

---

 

6️⃣ <article>과 다른 시맨틱 태그들과의 차이

 

1. <section>:
   • <article>과 비슷하게 특정 주제를 정의하는데 사용되지만, <section>은 반드시 독립적이지 않은 콘텐츠 그룹에도 사용할 수 있습니다. 반면 <article>은 독립적으로 배포 및 사용될 수 있는 콘텐츠에 사용됩니다.
2. <div>:
   • <div>는 시맨틱 의미를 가지지 않는 태그입니다. <article>은 독립적인 콘텐츠임을 명시적으로 나타내는 반면, <div>는 단순히 레이아웃이나 스타일링을 위한 컨테이너 역할을 합니다.
3. <main>:
   • <main>은 문서의 주요 콘텐츠를 감싸는 태그로, 그 안에 여러 개의 <article>이 포함될 수 있습니다. <article>은 독립적인 콘텐츠 블록이고, <main>은 그 전체를 포함하는 더 큰 영역입니다.

 

---

 

7️⃣ 접근성 및 SEO 관점에서의 이점

 

1. 접근성:
   • 스크린 리더와 같은 접근성 도구들은 <article> 태그를 통해 사용자가 문서 내에서 독립적인 콘텐츠를 쉽게 구분하고 탐색할 수 있도록 돕습니다. 또한, 이 태그 덕분에 문서의 중요한 정보에 쉽게 접근할 수 있습니다.
2. SEO:
   • <article> 태그를 사용하면 검색 엔진이 이 블록이 독립적인 콘텐츠라는 것을 인식하여 콘텐츠의 가치를 더 높게 평가할 수 있습니다. 이는 검색 순위를 높이는 데 도움이 될 수 있습니다.

 

---

 

정리해서

<article> 태그는 블로그 글, 뉴스 기사, 포럼 게시물 등 독립적인 정보 블록을 정의하는 데 사용됩니다.

 

뭐가 뭔지 복잡하실까요?

쉽게 말해

신문지의 기사를 볼때

기사제목과 기사내용이 영역으로 구분되어 있는데,

그 영역 하나하나를 <article>로 보시면 될것같아요!

 

여기서 또 한가지, 

이전 시간 <main>태그 내부에는 <header>, <footer>, <nav> 등은 들어가지 않는다고 했는데,

위의 예시 코드를 보다보면 들어가있어서 의아하셨을 수 있지만,

<article>태그는 독립적인 태그로서,

위치가 <main> 태그의 내부이긴 하더라도, 별개의 독립적인 영역으로 생각하시면 될것같아요!

 

오늘도 긴시간 글읽어주신 분들 모두 감사드립니다!

오늘도 굿잠하시고

저는 이만 물러가겠습니다!