[HTML Study #02] 시멘틱 태그, 왜 div만으론 부족할까?

✅ 시멘틱 태그

저는 프로젝트를 진행하면서 주로 <div>블록 태그로 구성해왔습니다. 그런데 프론트엔드 공부를 하면서 시멘틱 태그라는 단어가 자주 등장하는 겁니다.

“시멘틱 태그..? 시멘트..뭐 단단한 태그 그런건가 하하”

라고 하며 넘겼기에 이번 시간에 이 개념을 잘 정리하려 합니다.

🤔 시멘틱 태그란 무엇인가?

시멘틱(Semantic)은 의미 있는 이라는 뜻입니다. 그렇다면 의미있는 태그??!

➡️ 어느정도 맞는 말인데 시멘틱 태그는 HTML 요소가 그 내용의 의미를 설명해주는 태그입니다.

여기서 드는 궁금증이 있습니다.

그렇다면 <div>나 <span>태그와 무엇이 다를까??

div와 span의 역할

div는 블록 요소로 의미 없이 구조를 나눌 때 사용됩니다. span은 인라인 요소로 텍스트 일부를 스타일링하거나 묶을 때 사용합니다.

이 요소들은 의미(semantics)가 없어서 스크린 리더나 검색 엔진은 그 안에 뭐가들어있는지 잘 알 수가 없습니다.

시멘틱 태그는 무엇이 다른가

시멘틱 태그(<header>, <article>, <main>등)는 기본적으로 브라우저에서 내장된 HTML5의 블록 요소입니다.

➡️ 시멘틱 태그는 div와 같은 블록 레벨 요소

그러면 차이점은 무엇일까요?

이름에서도 말하듯, 의미입니다.

단순히 블록요소로서 구조만 나누는 것이 아니라 의미를 함께 보여준다는 것에서 차이점이 있는 것이죠.

❓왜 시멘틱 태그가 중요한가?

그래서 블록 요소에 의미를 함께 담는것이 왜 필요하며 왜 중요한 것인가 정리해보겠습니다.

1. 접근성 향상

   시각장애인들이 사용하는 스크린 리더가 태그의 의미를 인식해서 더 정확하게 읽어줍니다.

2. SEO 최적화

   검색 엔진 크롤러가 콘텐츠 구조를 이해하기 쉬워져서, 검색 순위에 긍정적인 영향을 줍니다.

3. 유지보수 용이

   다른 개발자가 코드를 봤을 때, 구조를 빠르게 파악할 수 있습니다.

4. 웹 표준 준수

   시멘틱 태그를 적절하게 사용하면 웹 표준에 더 부합하는 코드가 되어서 장기적으로 웹사이트의 안정성과 확장성을 높여줍니다.

🔎자주 사용되는 시멘틱 태그

태그	설명	예시
<header>	페이지나 섹션의 머릿글 영역. 로고, 제목, 네비게이션 등이 포함됨.	사이트 상단 메뉴
<nav>	내비게이션 링크를 묶는 영역. 보통 메뉴, 사이드바 등에 사용.	상단 메뉴바, 푸터 링크 모음
<main>	페이지의 주요 콘텐츠. 한 문서에 하나만 사용해야 함.	기사 본문, 상품 리스트
<section>	문서의 논리적 구획을 나눌 때 사용. 주제별 덩어리.	소개 섹션, 기능 설명 섹션
<article>	독립적으로 의미 있는 콘텐츠. 하나만 따로 봐도 의미가 있는 콘텐츠에 적합.	블로그 글, 뉴스 기사, 카드 컴포넌트
<aside>	보조 정보. 메인 내용과 간접적으로 관련된 콘텐츠.	사이드바, 광고, 연관글
<footer>	페이지나 섹션의 꼬리말. 저작권, 연락처, 하단 메뉴 등.	하단 메뉴, 소셜 링크, 저작권 문구
<h1> ~ <h6>	제목 태그. 숫자가 낮을수록 중요도 높음. 시멘틱 구조에서 매우 중요.	문서 구조화
<figure>	이미지, 차트, 코드블록 등의 시각 요소를 담을 때 사용.	이미지 갤러리
<figcaption>	<figure>에 대한 설명.	이미지 밑에 설명 문구
<time>	날짜/시간 표현. 기계가 이해할 수 있는 시간 데이터 제공 가능.	게시일, 마감일 표시

그렇다면 시멘틱 태그를 만들 수 있을까?

그러면 드는 생각이, 내가 시멘틱 태그를 생성해서 알기쉽게 분리하여 사용할 수 있을까에 대한 의문이다.

➡️ 결론은 만들 수 없지만, 유사한 기능은 만들 수 있다..? 정도이다.

시멘틱태그는 W3C((World Wide Web Consortium))가 정한 표준태그 입니다. 앞에서 웹 표준을 정리할 때, 여러 브라우저에서 같은 결과가 나오도록 정한 약속이라고 정리를 했습니다. 이것도 그런 약속중 하나인 것입니다.

그렇다면 왜 유사한 기능은 가능하다고 했을까요?

div에 HTML을 보충해서 필요한 정보를 제공하는 ARIA속성으로 의미를 부여해 사용할 수 있습니다. : role속성

<div role="navigation">...</div>

그러나 mdn web docs에서 ARIA를 보면, 경고합니다. 구현하려는 기능을 가진 요소가 존재한다면 개발자는 되도록 의미를 가진HTML을 ARIA보다 선호해야합니다. 라고요.

또한,

웹 컴포넌트나 React 컴포넌트로 잘 사용하는 의미있는 컴포넌트를 만들 수 있기 때문입니다.