💡 시맨틱 태그는 콘텐츠의 형식 뿐만 아니라 콘텐츠의 의미와 구조를 설명한다. 시맨틱 태그를 사용하면 접근성과 SEO, 가독성 측면에서 다양한 이점을 얻을 수 있다.

시맨틱 (Semantic) 이란 ?

시맨틱 단어 그 자체에는 ‘의미의, 의미론적인’ 라는 뜻이 담겨있다. 이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있다. 시맨틱 태그는 웹 페이지에 보이는 것 이상의 정보를 제공한다.

웹 기술이 발전함에 따라 태그의 내용은 정보로서 높은 가치를 포함해야 한다는 점이 점점 더 중요해지고 있다. 그래서 개발자들은 유용한 형태의 데이터로 웹을 만들기 위해 노력해야 한다. 그러한 노력 중 하나가 바로 시맨틱 태그를 사용하는 것이다. 이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있다. 따라서 SEO(검색엔진최적화) 성능을 더욱 향상할 수 있다.

시맨틱 태그(Semantic Tag)란 ?

인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조로 웹에서 원하는 정보를 찾을 때 점점 어려움을 겪게 된다.

시맨틱 태그(Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다. 기존 HTML <div> 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다. 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재한다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 된다.

다시 말해, 시맨틱 태그는 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것이다.

HTML5 이전에는 <div>, <span>과 같이 콘텐츠 보유 역할을 하지만, 포함된 콘텐츠의 유형이나 해당 콘텐츠가 페이지에서 수행하는 역할에 대해서는 별도로 표시하지 않는 태그를 사용했다.
구조를 구분하기 위해 <div>태그에 id 또는 클래스 등으로 구분하며 구조를 설계했으나, HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해진 것이다.

참고로 HTML은 “Hyper Text Markup Language” 약어로 Hyper Text 기능을 가진 문서를 만드는 언어이다. 다시 말해, 구조를 설계할 때 사용되는 언어로 Hyper Link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.

시맨틱 태그 요소의 종류

흔히들 보통 하나의 컴포넌트를 감쌀때 div 정도만 감싸왔던 것보다는 각 의미에 맞는 태그로 감싸는게 타인이 보기에도 직관적인 어플리케이션으로 만들 수 있다. 각요소들을 사용하기 위한 몇 가지 기본적인 규칙을 알아보자.

먼저, 콘텐츠의 의미와 기능에 따라 콘텐츠의 각 부분에 적합한 요소들을 선택해야 한다. 예를 들어, 로고나 제목 등이 포함된 페이지 상단에는 <header>를 사용하고,
저작권이나 연락처, 소셜 미디어 계정 링크가 포함된 하단에는 <footer>를 사용해야 한다.
다음으로는 요소가 명확한 계층 구조와 구조를 형성하도록 요소들을 올바르게 중첩해야 한다. 예를 들어, 페이지의 주요 콘텐츠를 통틀어 둘러싸려면 <main>을 사용해야 하고, 페이지를 여러 주제나 하위 제목 등 목록을 형성하려면 <section>을 사용해야 한다. 마지막으로는, 스타일 지정이나 스크립팅 목적으로 필요한 경우를 제외하고는 <div>와 같은 의미가 없는 요소나 속성을 사용하지 않아야 한다.

<header>, <footer>, <section>, <nav>, <article>과 같은 요소들은 HTML5에서 기존의 <div>보다 더 많은 기능을 수행한다. 이러한 주요 요소는 매크로 구조의 시맨틱 HTML로 작용하여 일반적인 HTML 태그들을 적절한 순서와 위치로 유지하는 데 도움을 준다.

• <article>
  • <article> 태그는 독립적인 글을 다루는 데 사용하는 태그이다. 블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의한다.

• <aside>
  • <aside> 태그는 옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의한다. 주로 문서에서 사이드바를 놓기 위해 사용한다.

• <details>

  • <details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그이다. 사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있다. 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가진다.

    추가로, <details> 태그와 함께 쓰이는 <summary> 태그는 <details> 에서 보이는 부분을 담당한다. <summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 한다.

• <figure> & <figcaption>
  • <figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정한다.
  • <figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용된다. ‘Caption’이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼, <figcaption>은 <figure>에 대한 간략한 설명이다.

• <footer>
  • <footer> 태그는 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치한다. <footer>의 요소에는 일반적으로 연락처 정보, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함된다.

• <header>
  • <header> 태그는 문서나 섹션의 머릿글을 지정하며 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의한다. 여기에는 메타 태그 정보, 키워드, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되는 경우가 많다.
• <main>
  • <main> 태그는 메인 내용을 담는 태그로, 웹사이트의 텍스트 본문이나 콘텐츠를 나타낸다. <main> 태그는 문서에서 유일해야 하고, <article>, <aside>, <footer>, <header>, <nav> 등 모든 페이지의 태그 앞에 온다.

• <nav>
  • <nav> 태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의한다.
  • 성공적인 웹사이트를 개발하려면 엑세스 가능하고 업데이트된 탐색 세션이 필요하다. 어떤 종류의 웹 사이트를 구축하든 사용자가 웹사이트를 적절하게 탐색할 수 있도록 탐색 링크를 추가해야 한다. <nav> 태그를 사용하면 탐색 링크용으로 지정된 사이트의 특정 세션을 구성하는 데 도움이 된다.

• <section>
  • <section> 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의한다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣을 수도 있다.

시맨틱 태그의 이점

시맨틱 태그를 사용함에 따라 오는 이점에는 크게 세 가지가 존재한다. 이 세 가지는 모두 인터넷 전반에 걸쳐 웹사이트의 일관성을 향상시키는 것과 관련이 있다. Non-Semantic HTML 태그는 더 모호하며 해석하는 데 더 많은 리소스가 필요하다. 개발자가 의미론적으로 작성할 때 브라우저가 식별할 수 있는 요소에 대해 표준화된 이름을 사용하므로 인터넷에서 HTML의 상호 운용성이 향상된다.

1) 접근성 향상

시맨틱 태그를 사용하면 페이지의 접근성이 향상된다. HTML 시맨틱 태그 요소는 사람들이 웹페이지를 탐색하고 페이지와 상호 작용하는 데 도움이 되는 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공할 수 있다. 예를 들어 <nav>의 경우, 콘텐츠에 탐색 링크가 포함되어 있음을 나타낼 수 있고, <article>의 경우에는 독립형 콘텐츠가 포함되어 있음을 나타낼 수 있다.

2) SEO (검색엔진최적화) 향상

SEO(검색엔진최적화)는 Google과 같은 검색엔진 상에서 웹사이트 순위에 영향을 미친다. 시멘틱 태그를 사용하면 검색엔진과 사용자에게 웹페이지가 더 눈에 띄고 매력적으로 보이게 만들 수 있다.

시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는 데 도움이 되며, 이를 통해 검색결과 상에서 웹사이트 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있다. 더불어 웹페이지의 성능과 속도를 향상시켜 이탈률을 줄이고 전환율을 높이는 데에도 도움이 될 수 있다.

또한, 검색엔진에 풍부하고 구조화된 데이터를 제공할 수 있으며, 이는 더욱 매력적이고 유익한 스니펫과 결과를 만들어 낼 수 있다.

3) 가독성 향상

시맨틱 태그를 사용하면 웹페이지의 가독성 또한 향상된다. 즉, 사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 된다. 시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 된다.

또한, 시맨틱 태그는 제목과 키워드, 요약 등 콘텐츠의 가장 중요하고 관련성 높은 부분을 강조할 때 도움이 된다.

가독성 측면에서 시맨틱 태그가 중요한 이유는 불필요하거나 중복되는 코드를 피하는 데 도움이 된다는 것이다. 이를 통해 웹페이지를 더 빠르고 효율적으로 만들 수 있다.