Logo

[HTML] 시멘틱 마크업

HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 <div> 태그로만 마크업된 웹사이트를 많이 접하곤 합니다. 하지만 이렇게 오로지 <div> 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러 가지 측면에서 문제가 있을 수 있습니다.

시멘틱 마크업이란?

<div> 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 됩니다. 그래서 웹사이트에서 다음과 같은 <div> 태그가 사용되는 것을 어렵지 않게 접할 수 있습니다.

<div class="header">...</div>
<div class="main">...</div>
<div class="footer">...</div>

사실 HTML5에서 이러한 화면 레이아웃을 위해서 <header>나 <main>, <footer>와 같은 소위 시멘틱(semantic)하다고 여겨지는 대양한 태그들이 추가되었습니다. 시멘틱 태그란 마크업 대상 컨텐츠가 화면에 표현되는 방식을 결정하기 위함이 아닌, 해당 컨텐츠에 어떤 의미(역할 또는 목적)를 부여하기 위헤서 사용되는 태그입니다.

예를 들어, 널리 쓰이는 <h1>의 경우, 해당 웹페이지의 최상위 제목을 마크업하기 위해서 사용됩니다.

<h1>이것은 제목입니다.</h1>

위 엘리먼트는 브라우저에서 굵고 큰 폰트로 표현되겠지만, 이것은 브라우저에 기본적으로 적용된 스타일 때문입니다. 즉, <h1> 태그 자체는 화면에 어떤 식으로 표현될지가 아니라, 해당 엘리먼트의 의미, 즉 최상위 제목이라는 역할 또는 해당 페이지에서 가장 중요한 텍스트라는 목적을 위해 사용됩니다. 다시 말해, <h1>으로 마크업된 엘리먼트에 다음과 같이 CSS로 특정 스타일을 적용시키면, 그닥 눈에 띄지 않는 평범한 텍스트로 보여질 뿐입니다.

<h1 style="font-size: 1rem; font-weight: normal;">이것은 제목입니다.</h1>

다시 말해, 단순히 <div class="header">를 <header>로 바꾼다고 해서, 일반 사용자 입장에서 웹페이지에 어떤 시각적인 변화가 일어나는 것은 아닙니다. (개인적으로 이것이 시멘틱 태그가 많은 웹 개발자들에게 크게 주목받지 못하는 가장 큰 이유 중 하나일 것입니다.) 대신에, 이것은 웹페이지에 의미적인 변화를 주며, 이것은 일반 사용자가 아닌 검색 엔진, 스크린 리더, 개발자들에게는 큰 효용을 가져다 줍니다.

시멘틱 마크업의 효용

검색 엔진이 웹사이트를 크롤링할 때는 웹페이지가 시각적으로 어떻게 보이는지가 이닌 웹페이지가 담고 있는 데이터에 초점을 둘 수 밖에 없습니다. 따라서 해당 웹페이지가 전체적으로 어떤 구조를 가지고, 최상위 제목이 무엇이며, 그 안에 컨텐츠가 어떻게 구성되어 있는지가 중요합니다. 하지만, 모든 컨텐츠가 <div> 태그로만 마크업이 되어 있다면, 검색 엔진이 효과적으로 해당 웹페이지를 분석하기 어려울 것입니다. 따라서 검색 엔진 최적화, 즉 SEO(Search Engine Optimization) 측면에서 시멘틱 태그를 적지적소에 사용하는 것은 매우 중요한 부분입니다.

스크린 리더의 경우, 시각 장애를 가지신 분들에게 브라우저의 내용을 음성으로 안내줘야 하는데, 마찬가지로 시멘틱 마크업이 적용되지 않은 웹페이지의 구조나 내용을 파악하기 어려울 것입니다.

마지막으로, 내가 작성한 HTML 코드를 다른 개발자가 읽을 때, 또는 오랜 시간이 흐른 후 내가 다시 읽을 때, 시멘틱 태그가 적절히 사용되어 있다면 코드만 읽어봐도 대강 웹페이지가 어떻게 구성되어 있는지 쉽게 파악이 가능할 것입니다. 하지만 <div> 태그로만 마크업된 웹페이지의 경우, 브라우저로 열어보기 전까지 파악이 쉽지 않을 것입니다.

시멘틱 레이아웃

시멘틱 마크업의 적용 사례를 보여드리기 위해서, 간단한 웹페이지의 레이아웃을 마크업해보겠습니다. 우선 다음과 같이 HTML5의 <header>, <main>, <footer> 태그를 이용해서 큰 골격부터 잡고 시작하겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>아무게 회사</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

헤더 영역

<header> 태그로 마크업된 헤더 영역은 일반적으로 웹사이트의 로고와 소개글 그리고 메인 메뉴가 위치하게 됩니다. <h1> 태그는 최상위 제목을 마크업하기 위해서 쓰이는데, 일반적인 웹페이지에서는 대부분 하나만 존재하게 됩니다. <nav> 태그는 웹페이지의 메인 네비게이션을 마크업할 때 쓰입니다.

<header>
  <h1>아무게 회사</h1>
  <p>아무게 회사에 오신 것을 환영합니다.</p>

  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#about">소개</a></li>
      <li><a href="#services">서비스</a></li>
      <li><a href="#articles">보도</a></li>
    </ul>
  </nav>
</header>

메인 영역

웹사이트의 컨텐츠를 담고 있는 메인 영역은 <main> 태그로 마크업하는데, <main> 태그는 하나의 웹페이지 내에서 하나만 존재하는 것이 일반적입니다. 메인 영역 내에서의 하위 영역 구분은 <section> 또는 <article>, <aside> 태그가 주로 사용됩니다.

<section> 태그와 <article> 태그를 햇갈려 하시는 분들이 많은데, <section> 태그는 독립적으로 때어놓기 어려운 컨텐츠를 마크업할 때 쓰이는 반면, <article> 태그는 독립적으로 때어놓을 수 있는 컨텐츠를 마크업할 때 쓰입니다. 예를 들어, 뉴스 웹사이트에서는 기사 하나 하나가 <article> 태그로 마크업될 것이고, 블로그 사이트에서는 포스팅 하나 하나가 <article> 태그로 마크업될 것입니다. 하지만, 어떤 웹페이지에서 일부로만 의미를 갖는 컨텐츠에 대해서는 <section> 태그로 마크업하는 것이 자연스럽습니다.

마지막으로 <aside> 태그의 경우에는 사라져도 대세에 지장이 없는 보조적인 컨텐츠를 마크업할 때 쓰입니다. 대표적으로 사이드바나 배너바 등을 예를 들 수 있는데, 이러한 컨턴트들은 웹페이지의 핵심적인 컨텐츠는 아니기 때문에 <aside> 태그로 마크업하는 것이 적절합니다.

<main>
  <section id="about">
    <h2>소개</h2>
    <p>우리 회사는 최고의 서비스를 제공합니다.</p>
  </section>

  <section id="services">
    <h2>서비스</h2>
    <ul>
      <li>서비스 1</li>
      <li>서비스 2</li>
      <li>서비스 3</li>
    </ul>
  </section>

  <section id="articles">
    <h2>보도</h2>
    <article>
      <header>
        <h3>최고의 서비스</h3>
        <p>출처: 페이스북</p>
      </header>
      <p>최고의 서비스라고 합니다.</p>
      <footer>게시일: 2019년 7월 27일</footer>
      <a href="#">더 보기</a>
    </article>
    <article>
      <header>
        <h3>최고의 서비스</h3>
        <p>출처: 페이스북</p>
      </header>
      <p>최고의 서비스라고 합니다.</p>
      <footer>게시일: 2019년 7월 27일</footer>
      <a href="#">더 보기</a>
    </article>
  </section>

  <aside>
    <h2>추천사</h2>
    <blockquote>완전 좋아요! <cite>김씨</cite></blockquote>
    <blockquote>킹왕짱! <cite>이씨</cite></blockquote>
  </aside>
</main>

위 예제 코드를 보면 <header>와 <footer>의 경우, <article>로 마크업된 영역 내부에서도 사용되는 것을 알 수 있습니다. 이와 같이 <header>와 <footer> 태그는 웹페이지의 최상위 영역 뿐만 아니라 하위 영역에서도 사용될 수 있습니다.

두번째 섹션에서 사용된 <ul>로 마크업된 서비스 목록의 경우 웹페이지의 메인 네비게이션이 아니기 때문에 <nav>로 마크업이 되지 않을 것을 알 수 있습니다.

풋터 영역

<footer> 태그로 둘러쌓인 풋터 영역은 일반적으로 웹사이트의 저작권 정보나 연락처와 같은 메타 데이터가 위치하게 됩니다.

<footer>
  <p>
    <small
      >&copy;2019<a href="mailto:support@company.com">아무게 회사</a></small
    >
  </p>
  <address>
    XX시 XX구 XX로 XX길<br />
    T. 1234-5678
  </address>
</footer>

그럼 div는 언제?

<div> 태그는 아무런 역할이나 목적이 없이 단순히 컨텐츠를 그룹화하는데만 사용됩니다. 따라서 위에서 언급된 시멘틱 태그를 최대한 적용해보고 남은 영역에 대해서는 <div> 태그를 쓸 수 있습니다.

예를 들어, 다음과 같은 웹페이지의 인트로 영역의 경우, 시멘틱 태그를 적용하기 애매하기 때문에 <div> 태그로 마크업할 수 있습니다.

<div>
  <img src="https://via.placeholder.com/300x100" alt="intro" title="intro" />
  <p>아무게 회사의 서비스를 한달간 <strong>무료로</strong> 체험해보세요.</p>
  <a href="#">체험 신청</a>
</div>

마치면서

사실 실무에서 복잡한 웹페이지의 마크업을 하다보면 어디서 어떤 시멘틱 태그를 써야할지가 명확하지 않고 애매하게 느껴질 때가 있습니다. 그래서 시멘틱 마크업이 적절히 적용된 웹사이트의 HTML 코드를 보면서 실제로 어떻게 활용되는지 웹사이트 유형별로 패턴을 파악하는 것이 큰 도움이 됩니다.

HTML에는 100여개에 달하는 시멘틱 태그가 존재한다고 합니다. 그 중에서 많이 사용되는 것도 있고, 거의 사용되지 않는 것도 있겠지요. 전체 리스트는 다음 MDN 레퍼런스를 참고하시기 바랍니다.

포스팅에서 작성한 전체 HTML 코드는 다음을 참고 바랍니다.

See the Pen html-semantic-markup by Dale Seo (@daleseo) on CodePen.

This work is licensed under CC BY 4.0

messageCircle