의미가 통하는 시맨틱(Semantic) 태그 사용하기

최적화(SEO), 웹 접근성 향상, 가독성 모두 잡는 시맨틱 마크업!

jinah

2023년 04월 09일 · 0 분 소요

들어가며

HTML은 다른 프로그래밍 언어에 비해서 진입장벽이 낮고 쉬워 보이는 마크업 언어이지만 만만하게 보다가 막상 공부하다보면 도대체 어디에서 어떤 태그를 써야하는지 혼동되는 경우가 있습니다.
HTML을 사용할때 필수로 알아야하는 시맨틱 태그들과 제가 개인적으로 특히 많이 헷갈렸던 section과 article 태그의 차이점도 추가적으로 다뤄보도록 하겠습니다.

시맨틱(Semantic) 태그란?

Semantic: 의미의, 의미가 있는 이라는 말의 시맨틱.
HTML 태그에도 저마다의 의미가 있습니다. 문서를 작성할때 중요한 제목이라면 텍스트를 크게 하기도하고 볼드를 적용해서 강조하기도 합니다. 이렇듯 사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만드는 것을 시맨틱 태그, 시맨틱 마크업이라고 합니다. 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명합니다.

시맨틱(Semantic) 태그가 나오기 전와 후

시맨틱 태그가 나오기 전에는 아래와 같이 div 태그로 일일히 클래스 명을 넣어 이 요소의 역할을 구분해야 했습니다. 그런데 시맨틱 태그가 나온 후에는 태그 이름에서 이 엘리먼트의 위치와 역할을 단번에 알 수 있게 되었습니다.

대표적인 태그 정리

웹사이트의 브랜드를 나타내줄 수 있는 로고나 사용자들을 위한 메뉴아이템들이 들어있다면 div 대신 header를 사용하는 것이 좋습니다. 주로 페이지의 도입부에 해당하는 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등으로 구성됩니다.

하나 이상의 제목 요소(h1 ~ h6)
로고(logo)나 아이콘(icon)
저자(author) 정보

<header>
  <h1>XE그룹 블로그 로고</h1>
  <p>안녕하세요 XE그룹 블로그입니다.</p>
</header>

하단 바닥글을 의미합니다. 웹사이트의 맨 아래의 부가적인 정보나 링크들이 들어있다면 footer를 사용하면 좋습니다. 주로 들어가는 정보는 아래와 같습니다.

저자 정보
저작권 정보
연락처
사이트맵(sitemap)
페이지 맨 위로 되돌아갈 수 있는 Top 버튼
연관 페이지 등

<footer>
  <p>pxd</p>
  <p>
    <a href="mailto:info@pxd.co.kr">info@pxd.co.kr</a>
  </p>
  <address>
    (13493) 경기도 성남시 분당구 삼평동 대왕판교로 644번길 49 다산타워 3층
  </address>
</footer>

main

웹사이트의 페이지에서 중요한 콘텐츠를 가지고 있는 부분은 main을 사용합니다. 해당 문서의 중심 주제 또는 주요기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 합니다. 문서내에서 반드시 한번만 사용해야하며 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없습니다.

nav

페이지의 네비게이션 영역입니다. 사이트내,외부로 이동하는 메뉴나 목차, 색인 등의 정보가 들어갑니다. 글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 nav 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다. (웹접근성 향상) 또한 위치에 영향을 받지 않기 때문에 header나 footer, 또는 aside 에 포함시키거나 따로 사용할 수 있습니다.

<nav>
  <a href="/html">HTML</a>
  <a href="/css">CSS</a>
  <a href="/js">JavaScript</a>
</nav>

article

본문의 주 내용이 들어가는 부분을 의미힙니다. 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용합니다. article 요소에 포함될 수 있는 내용은 다음과 같습니다.

포럼(forum) 포스트
블로그 포스트
보도 기사
논평(comment)

<article>
  <h2>브랜드 블로그</h2>
  <ul>
    <li>포스팅1</li>
    <li>포스팅2</li>
    <li>포스팅3</li>
  </ul>
</article>

section

본문의 여러 내용을 포함하는 부분을 의미합니다. HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용하며, 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많다고 합니다.

챕터
소개
뉴스 항목
연락처 정보

<section>
  <h2>상품 소개</h2>
  <p>상품 설명</p>
</section>

aside

간접 콘텐츠와 보조 콘텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분에 사용됩니다. 예를 들어 블로그 양 옆의 광고나 링크 같은 사이드 바를 표시하며 필수요소가 아니기 때문에 필요한 경우에만 사용합니다

article vs section

article의 경우는 블로그 포스트에서 포스트 하나 그리고 신문 기사로 예를 들면 신문 기사 하나 자체를 묶어줄때 사용합니다. article은 이 자체만으로 독립적으로 다른 페이지에 보여줬을때 전혀 문제가 없을때 사용합니다. 즉 메인 내용들과 전혀 상관 없이 독립적으로 고유한 정보를 나타낼때 사용합니다. 그리고 article안에 많은 내용들을 가지고 있는데 이 내용들 중에 서로 연관있는 내용들을 묶어주고 싶다면 그럴때 section을 이용할 수 있습니다. section은 주제별로 구분한 그룹입니다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 사용하며 주제별 영역들을 그룹화하여 다른 주제의 문서를 구분짓기 위해 사용됩니다. article 안에 section을 넣기도 하고 section안에 article을 넣기도 하는데요. 아래 예시 코드를 보시면 조금 더 이해가 되실 수 있을 것 같습니다.

article > section

<article>
  <h2>동물</h2>
  <section>강아지</section>
  <section>고양이</section>
  <section>토끼</section>
</article>

section > article

<section>
  <h2>경제</h2>
  <article>경제뉴스1</article>
  <article>경제뉴스2</article>
  <article>경제뉴스3</article>
</section>

마치며

시맨틱 태그의 이점으로 검색엔진 최적화(SEO), 웹 접근성 향상, 가독성 향상이 있습니다. 웹크롤러와 검색엔진은 우리가 무언가를 검색하면, 다양한 기술과 알고리즘을 사용하여 자동으로 웹페이지를 읽고 하루에 수백만개 웹페이지의 노출 차례를 정해서 웹 사용자에게 관련 결과를 제공하는데, 시맨틱 태그를 사용하면 이러한 결과들을 더나은 검색 엔진 순위로 노출 시키기 때문에 시맨틱 마크업의 중요성은 굉장히 크다는 것을 알 수 있었습니다. 또한 우리가 협업하여 작업할 때에도 코드 구조를 더욱 읽기 쉽게 만들어서 동료들 그리고 개발자들과 작업 능률도 조금 더 향상 될 수 있는 것은 덤~
그동안 div에 클래스로 역할을 구분해서 작업하는 것이 익숙했던 제 자신과 그 외 많은 작업자들에게 도움이 되었기를 바라며 의미있는 코드 작성하기 지금부터라도 꼭 실천해 보도록 하자구요!