시맨틱 태그 파헤쳐보기 (2)

현우

May 5, 20262d ago

Last modified

May 5, 2026 9:19 PM

레퍼런스

Empty

어떤 경우에 어떤 시맨틱 태그를 써야할까?

<article> vs <section>, 둘 중 어떤 것으로 래핑을 해야할까?

엘리먼트 구조를 구성할 때, 두 태그 모두 콘텐츠를 묶는 역할로 사용을 하고 있다.
그런데 두 태그를 "언제 어떻게" 사용을 해야하는지에 대해서는 명확하게 사용법을 알고있지 못하는 것 같다.

핵심 기준은 하나이다, 페이지에서 떼어내도 독립적으로 의미가 있으면 <article>, 아니면 <section>.

<!-- 블로그 포스트 목록 -->
<main>
  <article>                          ← 이 포스트만 따로 읽어도 완결됨
    <h2>시맨틱 HTML이란?</h2>
    <p>...</p>
    <section>                        ← 포스트 안의 특정 섹션 (댓글)
      <h3>댓글</h3>
      <article>                      ← 각 댓글도 독립적 콘텐츠
        <p>좋은 글이에요</p>
      </article>
    </section>
  </article>
</main>

<article> 안에 <section>이 들어갈 수 있고, <section> 안에 <article>도 들어갈 수 있다. <article>은 중첩도 가능하다.

<button> vs <a>, 둘 중 어떤 것을 사용해야할까?

<!-- 페이지 이동이 목적 → <a> -->
<a href="/posts/1">글 보러가기</a>

<!-- 동작 실행이 목적 → <button> -->
<button type="button" onclick="openModal()">상세보기</button>

<!-- 폼 제출 → <button type="submit"> -->
<button type="submit">저장</button>

<a>는 링크(URL 이동)용이고, <button>은 동작(스크립트, 폼 제출)용이다. <a href="#">나 <a onclick="...">로 버튼 역할을 구현하는 경우를 종종 봤는데, 스크린리더는 이걸 "링크"로 읽는다. 키보드로 Enter를 눌렀을 때 동작이 예상과 다를 수 있다.

<time> 태그는 어떤 경우에 사용할까?

<!-- datetime 속성으로 기계가 읽을 수 있는 형식을 제공 -->
<time datetime="2026-04-27">2026년 4월 27일</time>
<time datetime="2026-04-27T09:00">오전 9시</time>
<time datetime="PT2H30M">2시간 30분</time>

화면에 표시되는 텍스트는 "2주 전"처럼 사람이 읽기 편한 형식이어도, datetime 속성에 ISO 형식을 넣으면 검색엔진과 보조 기술이 정확한 시각을 파악할 수 있다.

heading 계층은 순서를 지키는 것이 좋다

<!-- 좋은 예 — 계층이 논리적으로 내려간다 -->
<h1>제품 소개</h1>
  <h2>주요 기능</h2>
    <h3>빠른 처리 속도</h3>
    <h3>높은 보안성</h3>
  <h2>가격 안내</h2>

<!-- 나쁜 예 — 시각적 크기 조절 목적으로 계층을 건너뜀 -->
<h1>제품 소개</h1>
<h3>주요 기능</h3>  ← h2를 건너뜀

스크린리더 사용자는 heading 목록으로 페이지를 탐색한다. h1 → h3처럼 계층이 건너뛰면 탐색 구조가 깨진다.
만약, 텍스트 크기가 이유라면 CSS로 조정하는 것이 올바르다.

시맨틱 태그의 주의사항

<section>은 기본적으로 랜드마크가 아니다

앞서 설명했지만, 접근 가능한 이름(accessible name)이 없는 <section>은 스크린리더의 랜드마크 목록에 등록되지 않는다. <section>을 쓸 때는 aria-label이나 aria-labelledby로 이름을 주거나, 제목을 <h2>~<h6>로 명확히 제공하는 것이 좋다.

ARIA role을 중복으로 선언하지 않는 것이 좋다

<!-- 불필요한 중복 — <nav>에 role="navigation"은 이미 내장되어 있다 -->
<nav role="navigation">...</nav>

<!-- 그냥 이렇게 쓰면 된다 -->
<nav>...</nav>

이미 암묵적 ARIA role이 있는 태그에 동일한 role을 명시적으로 달 필요가 없다. 오히려 코드가 지저분해진다.

시맨틱 태그를 쓴다고 기본 스타일이 사라지는 게 아니다

<h1>은 기본적으로 font-size: 2em, font-weight: bold가 들어있다. <button>은 브라우저마다 기본 테두리와 배경이 있다. 시맨틱 태그를 쓰면 CSS reset에서 이 기본 스타일을 정리해줘야 하는 경우가 생긴다. 처음 시맨틱 태그로 마크업을 전환했을 때, 의도하지 않은 스타일이 붙어서 당황했던 기억이 있는데, 이 경우에는 CSS reset이나 normalize.css 설정이 되어있는지 먼저 확인하는 것이 좋다.

<main>은 페이지당 하나만 있어야 한다

<main> 요소는 문서 내 유일한 주요 콘텐츠 영역이다. 하나의 HTML 문서에 두 개 이상 있으면 안 된다. hidden 처리된 <main>이 여럿 있는 경우도 W3C 명세상 권장하지 않는다.

<article> 안의 <header>, <footer>는 banner/contentinfo가 아니다

앞서 설명한 것처럼, <header>와 <footer>의 ARIA role은 상위 맥락에 따라 달라진다. <article> 안에서는 banner나 contentinfo가 아닌 generic이다. 각 <article>마다 헤더와 풋터를 자유롭게 쓸 수 있다는 뜻이다.

<article>
  <header>                      ← generic role (banner 아님)
    <h2>글 제목</h2>
    <time datetime="2026-04-27">2026년 4월 27일</time>
  </header>
  <p>...</p>
  <footer>                      ← generic role (contentinfo 아님)
    <p>작성자: 김현우</p>
  </footer>
</article>

CSS로 시각적 표현을 바꿔도 의미는 유지된다

시맨틱 태그의 의미는 CSS와 독립적이다. 스타일을 어떻게 바꿔도 태그 자체의 역할은 유지된다. 반대로 시각적으로 비슷하게 만들어도 의미는 달라지지 않는다.

예전에는 레이아웃을 만들기 급급했다면, 현대의 프론트엔드에서는 "접근성" 이라는 키워드가 많이 대두되고 있다. "접근성"을 신경쓰는 것이 아무래도 누구나 이용할 수 있는 좋은 서비스를 만들 수 있는 개발자의 건강한 서비스 마인드가 아닐까 싶다.

이제는 마크업을 짤 때 태그 하나를 고르는 것 자체가 선택이라는 게 보인다. 그냥 <div>로 감싸면 편하지만, 어떤 의미를 가진 콘텐츠인지 고민하고 태그를 고르는 습관을 가져야겠다se. 특히 <section>에 이름을 붙이지 않으면 랜드마크가 아니라는 부분은 몰랐을 때와 알고 난 뒤가 확실히 다르다. 접근성 도구로 직접 내 페이지를 탐색해보는 것도 꼭 해봐야겠다.

시맨틱 HTML에 대해 더 깊게 파고들고 싶다면 MDN의 HTML elements reference와 W3C의 ARIA in HTML 명세가 기준이 된다. ARIA 명세 문서는 처음에 읽기 어렵지만, 각 태그의 암묵적 역할을 정확히 확인할 수 있는 가장 정확한 출처다.

悠悠

Subscribe to '悠悠自適'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to '悠悠自適'!