1. 시맨틱? 코드 조각의 의미?😳

HTML5 / CSS3와 같은 마크업 언어를 공부하다 보면 꼭 한 번씩 듣게되는
단어가 있죠? 시맨틱 태그(Semantic Tag)라는건데요.

의미있는 태그가 도대체 뭐길래 이렇게 중요하다고 하는지.. 🤔 왜 시맨틱 태그를 사용을 해야하는지 그 이유에 대해서 찾아봤는데 생각보다 간단 했습니다!

2. 내용에 알맞게 태그를 입혀 보아요!🤗

예를 들어 내가 좋아하는 과일 목록을 나타낸다고 가정을 해보겠습니다.

첫 번째 코드

<div>사과</div>
<div>바나나</div>
<div>딸기</div>
<div>키위</div>

두 번째 코드

<ul class="fruits">
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
  <li>키위</li>
</ul>

두 코드는 똑같이 브라우저에서는 잘 출력이 되는 것을 확인 할 수 있습니다!

하지만! 문제가 있습니다. 첫 번째 코드에서 작성한 과일 목록이
어떤 내용을 의미하는지에 대해서는 알 수가 없다는 것이죠!

두 번째 코드를 볼 경우 <ul>(Unordered List) 태그 안에 <li>(List)태그를
사용함 으로써 과일이 하나하나씩 나열 되어 있는 것을 알 수 있겠죠?

<div> <span> 같은 태그들은
논 시맨틱 태그(Non-Semantic Tag) 즉 의미가 없는 무색무취의 태그를 뜻합니다.
보통 의미가 크게 중요하지 않거나 없는 컨텐츠에 많이 사용하는 태그죠!

반면에 방금 두 번째 코드에서 사용했던
<ul> <li> 뿐만 아니라,
<article> <main> <header> <footer> <section> 같은 태그들은
시맨틱 태그(Semantic Tag) 즉, 의미가 있는 태그를 뜻합니다.

시맨틱 태그(Semantic Tag)는 방대한 정보가 넘치는 오늘 날
사람이 일일이 확인 하는 것이 아닌 검색엔진이 해당 정보가 의미가 있는지 없는지
식별하기 위해 태어난 태그라고 볼 수 있겠죠?

물론 이 외에도 많은 시맨틱 태그가 있습니다! 그 종류들은 엄청나게 많기 때문에 전부다 암기해서 사용할 필요 없이, 필요한 것만 검색해서 사용 하는 것을 생활화 하도록 합시다. 😊

3. 왜 시맨틱 태그를 사용할까요..?😒

"결국 컨텐츠가 보여지는게 중요하지 않나요?"

웹은 시각적으로 보여지는 것도 중요 하지만,
해당하는 컨텐츠의 의미를 올바르게 전달 하는 것도 중요하다고 볼 수 있습니다.
왜 올바르게 전달 해야되는지에 대한 이유는 여러가지가 있겠죠?
시맨틱 태그를 권장하는 이유는 대표적으로 다음과 같습니다!

1) 검색엔진 최적화 (SEO)

검색 엔진은 웹을 크롤링 (en-US)하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.

출처 : MDN 용어사전 - SEO

시맨틱 태그를 사용함으로써 검색엔진에 알맞는 규칙을 따르게 됩니다.
때문에 검색 결과상으로 높은 위치에 노출 될 수 있게 되고,

보통 검색 노출이 잘 되어야하는 개인 쇼핑몰, 뉴스기사, 블로그 등과 같은
게시물들이 시맨틱 태그를 사용하는 것이 가장 베스트 입니다.

2) 웹 접근성 향상

시각장애를 가진 사용자들 에게 명확한 정보를 전달하는데 도움이 됩니다.

브라우저에 있는 컨텐츠를 읽어주는 화면 판독기가 페이지를 탐색할때
해당 내용이 의미하는 바가 무엇인지 명확하게 인식하게 됩니다.

3) 코드의 효율성

협업을 하는데 있어 시맨틱 태그를 사용하게 되면
코드를 유지보수 하는데 있어 보다 간편하고 쉽게 찾을 수 있습니다.

참고자료 :
MDN 용어사전 - Semantic

잘못된 부분이나 오타가 있다면 댓글로 남겨주세요! 피드백은 언제나 환영입니다 🤗