시멘틱(Semantic)이란? - 그럼 div는 언제 쓰지?

시멘틱이라는 단어는 프론트엔드 개발자라면 한 번쯤은 들어봤을 단어다

의미론적이라는 단어보다는 보통 시멘틱 태그라는 말이 더 익숙하다.

 

시멘틱이란 the meaning of a piece of code 코드 조각의 의미를 말한다. 

즉 시멘틱이란 무엇이 보여지느냐보다는 어떤 목적 혹은 역할을 하는지를 의미한다.

단순 프론트엔드 개발에만 속하는 것이 아닌 컴퓨터 공학 전반에서 쓰이는 개념이다.

 

함수이름이나 변수이름을 지을 때 다들 고민하는 이유는

"어떻게 하면 더 함수의 기능을 파악하기 쉬울까?" 라는 고민에서 나온다. 

이것도 시멘틱 고민의 일종이다

 

다음 마크업이 시멘틱 마크업의 대표적인 예라고 할 수 있다.

다음의 두 태그는 보여지는 것은 동일하다. 하지만 그 의미가 다르다고 할 수 있다.

 

h1태그를 사용하면 페이지의 최상위 제목이라는 의미가 내포되어있다.하지만 span태그를 사용한 것은 보이기에는 똑같을 지라도 아무런 의미가 없다. 

<h1>이것은 최상위 제목입니다</h1>

<span style="font-size: 32px; margin: 21px 0;">최상위 제목이 아닙니다!</span>

출처: https://www.semrush.com/blog/semantic-html5-guide/

시멘틱 마크업의 이점

1. 검색엔진 최적화(SEO)
   검색엔진은 시멘틱 태그를 참고해 페이지의 중요한 키워드를 인식하고,
   이는 검색 순위에 긍정적인 영향을 미칠 수 있다. 
   -> div로 가득한 페이지보다 main->header -> section -> footer 으로 구성된 페이지가 
   검색엔진에서 더 긍정적으로 받아들여진다.
2. 접근성 향상
   시각장애인을 위한 스크린 리더(Screen Reader)는 시멘틱 마크업을 페이지의 안내판처럼 활용해
   사용자에게 적절한 정보를 전달한다.
3. 유지보수와 협업 용이성
   의미 없는 div나 span보다 의미 있는 태그나 클래스명을 사용하면,
   다른 개발자나 나 자신이 코드를 읽을 때 훨씬 빠르게 이해할 수 있다.
4. 일관성 있는 UI 설계
   시멘틱 마크업은 디자인 시스템이나 컴포넌트 기반 개발에서
   의미에 따라 일관된 스타일과 동작을 적용하는 데 중요한 역할을 한다.
   -> div에 id나 class만으로 구분하면 충분하지 않나라고 생각 할 수 있지만, 그것만으로는 시맨틱한 의미 전달이 부족하고, 검색엔진이나 스크린 리더 같은 툴이 페이지를 해석하는 데 한계가 생긴다.

 

그렇다고 모든 컴포넌트를 다 div로 묶지 말라는 건 아님!

비시멘틱 태그는 언제쓰나?

1. 레이아웃 혹은 스타일링만 필요한 경우
   그리드, 카드, 모달같이 페이지 내에서 의미적인 경우가 필요없는 경우에 사용 
   굳이 시멘틱 태그를 넣어서 복잡하게 할 필요가 없음
   css 애니메이션이나 transition용이라면 시멘틱 태그 필요 없음
2. js 이벤트를 래핑하는 경우
   button의 클릭 이벤트를 제어 할때 기본 이벤트가 있는 경우가 있으므로 제어하기 전에 preventDefault와 같은 추가 코드 작성이 필요하다 

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // 추가 코드 작성 필요
  doSomething();
});

// 더 유연하게 조작 가능
<div class="dropdown" onclick="toggleMenu()">
  메뉴 열기
</div>

 

출처

• https://developer.mozilla.org/en-US/docs/Glossary/Semantics
• https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements
• https://www.geekster.in/articles/performance-optimization-using-semantic-tags/