시멘틱 태그의 장점

시멘틱 태그란? 

semantic : '의미의', '의미론적인'

 

시멘틱 태그는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다. 

기존 HTML <div> 태그의 기능과 같이 block element고 사이트의 구조를 설계하기 위해 존재하지만, 의미가 담겨있는 태그들을 말합니다.

 

시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재합니다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 되며 잘 활용한다면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 됩니다.

 

 

HTML5 등장전엔 <div>, <span>과 같이 콘텐츠 보유 역할은 하지만, 포함된 콘텐츠의 유형이나 해당 콘텐츠가 페이지에서 수행하는 역할에 대해서는 별도로 표시하지 않는 태그를 사용했습니다.

<div id="header"> 머리말 </div>
<div id="footer"> 꼬리말 </div>

 

 

하지만 HTML5부터 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능하게 되었습니다.

               출처 :Semantic HTML: What It Is and How to Use It Correctly (semrush.com)

Semantic HTML: What It Is and How to Use It Correctly

 

 

시멘틱태그의 종류

<header> : 사이트의 헤더 영역에 사용, 주로 사이트의 로고나 이름 등이 포함된다.
<nav> : 내비게이션을 의미하는 태그로, 주로 메뉴 영역에 사용된다.
<main> : 메인 컨텐츠 영역에 사용되며, <nav>, <aside>, <article> 등이 포함된다.
<section> : 주로 <article>을 포함하는 태그로 섹션별로 나눠줄 때 사용한다.
<article> : 개별 콘텐츠, 반복되는 콘텐츠를 나타낼  때 사용한다.
<aside> : 메인 컨텐츠 이외의 내용을 담을때 주로 사용(사이드), 보통 광고나 사이드바에 사용된다.
<footer> : 페이지의 하단에 주로 고객센터나 회사 정보를 담을때 사용한다.

 

크게 종류를 나열하자면 이런식으로 정리할 수 있지만,

이 종류에 관해 더 자세히 알아보자면 많은 종류중에서도 두가지로 분류될 수 있다는 점입니다.

 

바로 어떤 내용을 감싸는 Box , 내용에 해당되는 Item 이 둘로 나뉘는데, 아래 간단한 예시 코드를 보자면

<div>
  <img src= "/media/..." />
</div>

 

div 태그가 Box 역할이며, img 태그가 item 태그가 되는 것입니다. 이 둘이 뚜렷한 차이점은 Box 는 웹 페이지 상에서 아무런 모습이 보이지 않습니다. 물론 css로 여러가지 디자인을 통해 모습이 보이게 할 순 있지만, 단순히 태그만 쓰일 경우를 말합니다. 정리하자면

 

item vs box

item : 사용자의 눈에 보이는 영역 , 사용자에게 보여주고 싶은 부분이 있는 경우에 사용하는 시멘틱 태그
box : 사용자의 눈에 보이지 않는 영역 ( item을 도와주는 기능을 수행.) , box나 비슷한 item 태그를 묶을 경우에 사용하는 시멘틱 태그

 

이렇듯 크게는 Box , Item 크게 두개로 나뉘고, 그 안에서도 또 나뉘게 됩니다.

 

예시로 <nav>태그는 페이지 이동시에 필요한 네이게이션 링크들의 집합을 쓸때 사용합니다.

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

 

이처럼 많은 시맨틱 태그들에는 용도 라는 것이 존재하고, 이런그냥 div 태그를 계속 남발해서 CSS를 적용시켜 쓰기보다는 이러한 용도들을 찾아보고 거기에 맞는 시멘틱 태그를 쓰는 것이 좋습니다.

 

그렇다면 왜 이렇게 쓰는 것을 권장하고 쓰는 것일까요?

그 부분을 알기 위해서 시멘틱태그가 주는 이점에 관해 살펴 볼 필요가 있습니다. 

시맨틱 태그의 장점

쉬운탐색

→ 예시로 <div>태그를 계속해서 남발하는 것은 어떤 부분에서 error가 발생시에 구분이 힘들어 찾기가 힘들어지지만, 용도에 맞게 분리시킨 시멘틱태그를 활용한 코드는 error시에도 탐색하기 쉬울 것 입니다.

 

접근성 향상

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

 

검색엔진 최적화

→ 우리가 구글, 네이버 등등에 검색을 할때, 최상위에 뜨는 것들이 있을 것은 이것이 검색엔진 최적화가 잘되있는 사이트라는 것을 의미합니다. 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단할 수 있습니다. 예시로 제목을 의미하는 h태그가 div 태그보다 우선순위가 높아, 더 쉬운 검색을 할 수 있게 해줍니다.

 

스크린 리더

→  스크린 리더는 시각장애인이 눈 대신 소리로 들려주어 화면 정보를 전해주는 것인데

예시로 button을 만들때 <div> 태그로 버튼 기능을 만든다면 스크린 리더에서 버튼으로 인식하지 않습니다. 그런 점은 시각장애인 분들께 서비스를 이용하는데, 매우 치명적일 수 있습니다.

 

가독성 향상

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

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

 

다른 개발자들과의 협업

→  위의 가독성향상과 이어지는 내용으로, 협업을 할때 내가 아닌 다른 개발자가 코드를 봐도 어떤 코드인지 빠르게 인식하는 것은 매우 중요합니다. 이를 위해라도 용도에 맞는 시맨틱 태그를 골라, 사용한다면 빠른 해석이 가능해질 것이고 이것은 매우 유용한 장점입니다.