Bin's Blog

시맨틱 태그(Semantic Tag)란? 본문

Web

시맨틱 태그(Semantic Tag)란?

hotIce 2023. 11. 9. 16:22
728x90

들어가며

오늘은 HTML에서 다뤄보려고 한다. 실제로 이 주제는 내가 면접에서 받았던 질문이다. 그 당시를 회상하면, 시맨틱태그에 대해서 알긴 하나 대답의 깊이가 없는 나의 모습을 반성하면서 꼭 포스팅을 해야겠다고 결심했다.

왜 시맨틱 태그가 중요해서 면접에서 단골로 질문이 나오는지 살펴보자.

 

시맨틱 태그란?

내가 프로젝트를 했었을 때는, 시맨틱 태그를 사용하지 않아도 <div> 태그를 활용해서 웹 문서를 만들었다. 사실 그 당시에는 시맨틱 태그가 무엇인지, 왜 중요한지에 대한 이해 자체가 없었다. 

우리가 시맨틱 태그를 사용해야 하는 이유는 다음 3가지로 말할 수 있다.

 

1️⃣ HTML 문서의 가독성과 유지보수가 쉬워진다. 실제로 프로젝트에서 div를 많이 쓰다보면 div지옥에 빠져서 나중되면 어디가 어느 부분인지, 어떤 영역인지 한 눈에 파악하기 어려워진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다. 

2️⃣ 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있다. 

3️⃣ 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있다. 실제로 검색엔진 최적화는 기업의 수익으로 연결되기 때문에 너무나도 중요한 부분이다. h1태그를 문서당 하나만 사용하는 것도 검색엔진 최적화 때문이다.

검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식한다. 반대로 <section> 태그로 묶은 콘텐츠는 재배포를 금지하는 콘텐츠로 인식한다. 

 

Semantic 요소들로 아래와 같이 직관적으로 웹사이트를 구성할 수 있다.

 

시맨틱 태그의 종류

태그 설명
<header> 사이트의 머리부분에 사용
<main> 메인 콘텐츠를 나타는데 사용
<section> 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소
<article> 개별 콘텐츠를 나타내는 요소
<aside> 좌우측의 사이드 영역
<footer> 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
<hgroup> 제목과 부제목을 묶어서 나타내는 요소
<nav> 웹 페이지 메뉴를 만들 때 사용

 

시맨틱 태그 상세 설명

<header>

<header> 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용한다. 하나의 구역이기에 <header> 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 <form>태그를 사용해 검색창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣는다. 때로는 사이트의 머리말이 들어갈 수도 있다. 또한 HTML 문서 내에 여러개의 <header> 태그를 작성하는 것 또한 가능하다.

 

<main>

<main>태그는 해당 페이지의 메인 콘텐츠를 나타낼 때 사용하며 반드시 한 번만 사용되어야 한다. <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다. 

 

<hgroup>

<hgroup>은 제목과 부제목을 묶어서 나타내는 요소로 <h1>, <h2> .. 이렇게 연속해서 나올 때 묶어주기 위한 태그이다. 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당한다. 

<section>
  <hgroup>
    <h1>제목 h1</h1>
    <h2>소제목 h2</h2>
  </hgroup>
</section>

 

<nav>

<nav> 태그는 네비게이션 표현을 위한 태그로써 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들의 모음을 나타낸다. 이 태그를 사용하면 어느 부분이 네비게이션인지 쉽게 알 수 있다. <nav>태그는 본문의 영향을 받지 않는다. 즉 <header><footer><aside> 태그를 안에 포함시킬 수도 있고 독립해서 사용할 수도 있다. 즉 <body>태그 안에는 어디든지 사용이 가능하다. 

 

<footer>

<footer>태그는 일반적으로 웹 문서 끝자락에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다. <footer>태그 안에 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그들을 활용하여 푸터 안에 다양한 정보들을 넣을 수 있다. 

 

<aside>

웹 콘텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 <aside>태그로 표현한다. 특히 sidebar를 <aside>태그를 사용하면 굉장히 편리하다. 

 

<article>

<article>태그는 웹페이지 상에서의 실제 내용을 의미한다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목 등이 있으며 한마디로 정의하면 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 사용하면 된다. 

 

<section>

<section>태그는 콘텐츠의 영역, 즉 여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 담당한다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용한다. 

 

 

마무리하며

오늘은 시맨틱 태그에 대해서 알아봤다. 시맨틱 태그를 활용할수록 개발자에게 좋고 회사에도 좋은 일석이조이다. 이제 배웠으니 활용하자. 

728x90

'Web' 카테고리의 다른 글

session과 JWT 그리고 OAuth  (0) 2023.09.25
웹 브라우저의 동작원리  (0) 2023.09.22
CORS란 무엇일까?  (0) 2023.09.03
쿠키와 세션  (0) 2023.07.06
'Web' Related Articles more