🖥️ 시맨틱태그 (Semantic Tag)
의미를 가진 태그라는 뜻으로 사이트의 영역을 좀 더 의미 있게 나눌 때 사용한다.
태그의 이름은 다르지만 태그의 성질은 div태그와 같다.
✨ 시맨틱태그 예시
- <header>
- <nav>
- <main>
- <main>태그는 같은 HTML 파일 내에서 딱 한 번만 사용할 수 있음
- <article>, <aside>, <footer>, <header>, <nav> 안에 중첩해서 사용하면 안 됨
- <footer>
- <article>
- 독립적으로 배포하거나 재사용할 수 있는 콘텐츠에 사용함
- RSS 피드에 포함될 수 있는 내용
- 블로그 글, 뉴스기사, 댓글과 같은 요소들
- <section>
- 문서의 구획을 나누는 용도 (제목이 있는 콘텐츠 그룹)
→ 단, 구획을 나누는 용도로 사용해야 함 div처럼 스타일링을 위해 사용해서는 안됨
- 문서의 구획을 나누는 용도 (제목이 있는 콘텐츠 그룹)
- <figure>
- 이미지+설명글
- <aside>
- 사이드바
- <mark>
- 하이라이트 된 텍스트 ex) 검색결과 강조
- <details> <summary>
- 접을 수 있는 콘텐츠 (아코디언 ui)
- <time>
🤔 왜 시맨틱 태그를 사용해야 할까?
1. SEO (검색엔진 최적화)
검색엔진 로봇이 사이트 데이터를 수집할 때
메타 데이터(일종의 홈페이지 자기소개서)와 시맨틱태그가 잘 작성되어 있으면
검색엔진이 우리 사이트를 더 정확하게 파악할 수 있어서 사용자들이 내 사이트를 찾아오기 용이해진다.
2. 웹접근성 (Web Accessibility → Web A11y)
개발할 때에는 장벽 없는 인터넷(barrier free)을 만드는 것이 중요하다.
적절한 시맨틱 태그 사용은 스크린 리더 사용자들이 페이지 구조를 탐색할 수 있도록 랜드마크 역할*을 한다.
랜드마크 역할
- 웹 페이지의 주요 영역을 표시해서 스크린 리더로 웹사이트를 더 쉽게 탐색할 수 있도록 도와주는 기능
- 웹 페이지의 특정 섹션으로 바로 점프할 수 있는 기능과 페이지 구조 파악을 통해서 쉽게 이용할 수 있도록 도움
3. 개발자 관점
코드 수정 시 div태그로만 나열되어 있는 것보다
시맨틱태그를 사용하면 알아보기 쉽기 때문에 코드 수정 시 용이하고, 생산성이 증가한다.
위의 3가지 이유 중 단연 가장 중요한 이유는 SEO이다.
웹 사이트를 만들었는데 사용자가 접근이 어려우면 무용지물이 되어버리기 때문에
SEO를 고려해서 시맨틱 태그를 잘 작성하는 것이 중요하다.
728x90
