HTML 시맨틱 태그, 독립적인 콘텐츠를 위한 article 태그

이전 포스트에 이어서 HTML의 시맨틱 태그 중 하나를 정리해 보겠다.

이번에는 페이지 내에서 독립적인 콘텐츠 단위를 정의하는 article 태그에 대해 자세히 알아보자.

이전 포스트

HTML 시맨틱 태그, main 태그란? SEO와 웹 접근성을 위해 반드시 지켜야 할 규칙

HTML 시맨틱 태그 시리즈 첫 번째! 웹페이지의 가장 중심이 되는 콘텐츠를 정의하는 main 태그를 알아봅니다. 올바른 포함 요소와 제외 대상, 중복 사용 금지 등 핵심 규칙과 SEO 및 웹 접근성을 높이는 효과적인 활용법을 정리했습니다.

article 태그

이번에 정리할 태그는 <article> 태그다.

article 태그는 문서의 본문을 감싸거나, 페이지・사이트 안에서 독립적으로 배포하거나 재사용할 수 있는 내용을 감싸는 태그다.

이번에도 이 블로그에 적용되어 있는 템플릿(스킨)에서 article 태그가 어떤 곳에서 사용되고 있는지 캡처한 이미지와 함께 살펴보겠다.

개발자 도구를 통해서 확인해 보면, 포스트의 제목과 카테고리가 표시된 부분에서 article 태그가 시작된다.

겉으로 보기에는 이전 포스트에서 main 태그가 시작된 부분과 같은 위치다.

그리고 포스트의 댓글 섹션 전에 article 태그가 끝이 난다.

이전 포스트에서 다룬 main 태그는 댓글까지 포함하고 main 태그가 끝이 났었다.

이것으로 article 태그가 main 태그 내부에 위치하고 있다는 것을 알 수 있다.

그런데 article 태그는 포스트의 본문을 감싸고 있던 그 태그 하나만 있는 게 아니다.

포스트 본문 하단에 있는 다른 포스트로 이동하는 링크에도 각각 article 태그가 사용되고 있었다.

이것으로 article 태그 안에 article 태그가 포함될 수 있다는 것도 알 수 있다.

그리고 블로그의 사이드바나 푸터에서 다른 포스트로 이동하는 링크에도 각각 article 태그가 사용되고 있다.

article 태그의 특징과 규칙

이전 포스트에서 소개한 main 태그는 문서에서 가장 중심이 되는 컨텐츠를 정의하는 태그라고 설명했었다.

그런데 article 태그도 문서의 본문을 감싸는 태그다.

결론부터 말하자면, <main> 태그 안에 <article> 태그가 위치한다.

반대로 article 태그 안에 main 태그가 들어가도록 하는 구조는 잘못된 설계다.

<main>은 페이지 전체의 핵심 영역을 뜻하기 때문에, 독립적인 단위인 <article>의 하위 요소가 될 수 없다.

위의 캡처 이미지에서 본 것처럼 article 태그는 한 페이지 내에 여러 개가 존재할 수 있다.

그리고 article 태그 안에 article 태그가 들어갈 수도 있다.

이때 안쪽에 있는 <article>은 바깥쪽 <article>과 관련된 내용임을 의미한다.

article 태그는 길게 나열된 본문뿐만 아니라, 사이드바의 '추천 글'이나 푸터의 '인기 글'처럼 그 자체로 하나의 정보를 구성하는 요약 카드 형태에도 사용된다.

즉, <main>뿐만 아니라 <aside>나 <footer> 안에도 article 태그를 쓸 수 있다.

<article>은 독립적인 하나의 이야기이므로, 그 안에 반드시 제목 태그(<h2>~<h6>)를 포함할 것을 권장한다.

이는 검색 엔진(SEO)이 해당 콘텐츠의 주제를 파악하는 데 결정적인 힌트가 된다.

<article>의 가장 큰 특징은 독립성과 재사용성이다.

이 태그로 감싸진 내용은 '그 자체만 떼어다가 다른 사이트에 붙여 넣어도 의미가 통해야 한다'는 것이다.

다음 포스트

HTML 시맨틱 태그: header와 nav 태그, 메뉴가 여러 개라면 aria-label은 필수!

HTML 시맨틱 태그 중 상단 영역을 정의하는 header 태그와 메뉴를 담당하는 nav 태그의 포함 관계를 알아봅니다. 특히 페이지 내에 nav 태그를 여러 개 사용할 때 SEO와 웹 접근성을 높여주는 aria-label 활용 꿀팁을 실제 사례와 함께 정리했습니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.