1. HTML문서의 구조(2) - 시맨틱 태그

 

 

시맨틱(semantic) 태그는,  앞서 살펴본 필수 태그들과 마찬가지로 html 문서 구성에서 쉽게 찾아볼 수 있는 태그들입니다. 다만, 이를 시맨틱 태그로 따로 분류해 살펴보는 이유는 무엇일까요? 쉽게 말해 말 그대로, 이름만 보아도 그 의미를 유추할 수 있는 태그입니다. 

 

하지만 단어의 의미론적인 정의를 차치하고서라도 굳이 시맨틱 태그를 써야 하는 이유는 아직 의문입니다. 사실, 그 이유는 간단하면서도 꽤나 추상적입니다. 결과적으로는 '구조화된 표준'에 가까운 문서의 구조를 정립해, 효율적인 개발과 사용을 꾀하기 위해서라고 볼 수 있죠. 

 

예를 들어, 시맨틱 태그로 구분된 영역으로 작성된 html 문서를 보면 개발자 혹은 분석하는 주체는 해당 웹사이트의 구조를 손쉽게 파악할 수 있게 됩니다. 그럼 웹사이트를 분석해 편의 기능을 제공하는 외부 솔루션도 좀 더 용이하게 동작을 할 수 있게 됩니다. 

 

또한 html 문서의 구조가 체계적으로 분류되어 있기 때문에, 다양한 디바이스에서 각각의 문서 영역을 출력하는 방식을 정의하기가 한층 쉬워집니다. 또한, 검색 엔진에서 '본문'을 검색할 때 불필요한 메뉴/푸터 등을 제외하고 검색할 수 있는 기준이 생기겠죠? 결론은, 태그를 통해 문서의 구조가 규격화되어 여러 방면에서 효율성이 올라가는 규약이라고 생각하시면 됩니다. 

 

 

---

 

 

그럼 이제 html에서 많이 사용하는 주요 시맨틱 태그에 대해서 하나씩 살펴보겠습니다.

 

○ <header> 태그

말 그대로 사이트의 헤더 영역을 의미합니다. 주로 맨 위쪽에 위치하며 왼쪽에 위치하기도 합니다. 주로 '메뉴'나 검색 창이 위치하기도 합니다.

 

amazon의 헤더 영역. 로고와 검색창, 메뉴 등 주요 고정 기능이 배치되어 있다(출처 : www.amazon.com)

 

 

○ <nav> 태그

<nav>태그는 웹 문서 안에서 다른 문서 또는 위치 등 외부로 연결하는 링크를 생성하는 영역에 사용하는 태그입니다. 흔히 말하는 표준적인 단어로 표현하면 사이트 내부의 '네이비게이션' 영역을 생성하는 용도로 사용합니다. 헤더나 푸터, 사이드 바 등의 영역 내부에서 포함하는 형태로 구현하거나 독립적으로 사용해도 무관합니다. 당연하지만 <nav> 영역이 한 페이지 내에 여러 개 존재한다면 id속성 분류를 통해 다른 스타일을 적용하는 것도 가능합니다.

 

즉, 위에서 설명한 <header> 태그 내에 <nav>를 배치하고, 헤더 안에 별도의 <div> 태그를 통해 로고나 기타 여러 요소를 포함하는 구조도 흔하게 사용된다는 의미죠.

 

apple music의 nav 태그 영역(출처 : music.apple.com)

 

 

○ <main> 태그

메인, 즉 <main>태그는<main> 태그는 핵심적인 내용과 내용이 출력되는 영역입니다. <main> 태그는 한 개의 웹 문서에서 한 번만 사용이 가능하다는 특징을 갖고 있습니다. 참고로 <header>나 <footer>의 경우에는 여러 페이지에서 공통으로 사용하게 되지만 <main>은 각 웹 문서마다 다른 내용으로 구성되는 영역입니다. 

 

○ <article>, <section> 태그

두 개의 태그는 비슷해 보이지만 구현 목적에 따라 약간의 차이가 있습니다. <article>은 말 그대로 실제로 보여주고자 하는 콘텐츠를 의미합니다. 기사, 블로그 포스팅 본문 등의 주요 콘텐츠를 나타내고 복수의 태그를 사용할 수 있습니다. <article> 내부에 <section>을 사용하기도 합니다.

 

<section>의 경우 주로 몇 개의 콘텐츠를 묶어서 구성하는 용도로 사용하곤 합니다. 단순히 스타일 적용의 목적이라면 <div>를 사용하게 됩니다. 

 

naver 메인 페이지의 section 태그 영역. 광고 배너 이외의 콘텐츠는 div로 구성되어 있다(출처 : www.naver.com)

 

 

○ <aside> 태그

이 태그는 본문 외에 왼쪽 / 오른쪽 / 아래 등의 영역에 사이드 바를 구성할 때 사용합니다. 최근에는 사이드바를 별도로 사용하지 않는 사이트도 많기 때문에, 선택적으로 사용합니다. 

 

○ <footer> 태그

푸터는 사실 여러가지 정책적, SEO 이슈 때문에 웹 사이트 디자인 추세가 변하더라도 반드시 존재하는 영역입니다. 문서의 맨 아래쪽에 위치하며, 대부분 고정되어 공통으로 노출되는 영역입니다. 주로 저작권, 연락처, SNS 링크, 법적 고지사항의 게시 등이 이루어집니다. 물론 이 안에서는 <header>, <section>, <article> 등의 태그도 모두 사용할 수 있습니다. 

 

samsung.com의 하단 푸터. 푸터 자체가 4개의 div로 구성되고, 맨 위에는 네비게이션 역할을 하는 메뉴가 따로 있다(출처 : samsung.com)

 

 

○ <div> 태그

html에서 가장 많이 사용하는 태그라고 해도 과언이 아니며, 가장 공통적으로 광범위하게 사용되는 태그입니다. div는 division을 의미하는데요, 말 그대로 "영역"을 구분하는 포괄적인 태그입니다. 위에서 <header>, <section> 등의 태그를 소개했는데 이러한 태그가 없던 시점에는 일괄적으로 이런 영역을 <div>로 구분하였습니다. 실제로 대형 상용 사이트에서는 <main>, <article> 등으로 태그 영역을 구별하지 않고 <div> 태그에 id나 class 속성 값을 명시해 영역을 구분하는 경우가 훨씬 많습니다. 

 

<header> 태그 내에 회사의 로고가 들어가는 영역이 있다면, 헤더 내에 <div id="logo">(내용)</div> 같은 형태로 별도의 영역이 구성되기도 합니다. div 태그는 향후 계속해서 살펴볼 예정입니다. 

 

<div id="header">
<div class="detail">

 

kt의 웹사이트는 헤더, 메인, 푸터 영역이 모두 <div> 태그로 대분류가 이루어져 있다(출처 : kt.com)