개발자 강화/프론트엔드
[매일메일] 시맨틱 마크업이란? (FE.250124)
suyeonshim
2025. 1. 24. 20:10
시맨틱 마크업이란?
- HTML 요소를 사용하는 방식
- 시각적 목적이 아닌 "요소의 의미를 잘 나타내도록" 작성하는 방식
- 비시맨틱 태그: <div>, <span>
- 시맨틱 태그: <header>, <footer>, <article>, <section>
시맨틱 마크업이 중요한 이유?
- 접근성을 개선하기 위해
- 접근성 도구(스크린 리더)에서 콘텐츠의 구조를 더 잘 해석할 수 있음
- 웹 접근성을 개선해 다양한 사용자층(노인, 시각장애인)이 사이트 탐색을 도움
- SEO(검색 엔진 최적화)에 유리함
- HTML 시맨틱 태그로 페이지 구성을 파악함.
- 검색 엔진이 페이지를 올바르게 파악하므로, 검색 결과에서 페이지가 더 잘 노출될 수 있음
CSR(Client Side Rendering)에서도 시맨틱 마크업이 SEO에 영향을 미치는가?
원래 CSR에서 대부분의 콘텐츠가 클라이언트 측에서 렌더링되므로, 검색엔진은 크롤링 시 초기 로딩 콘텐츠만 인식함.
최근 검색 엔진은 JavaScript 렌더링을 지원하는 방향으로 진화하고 있어, 페이지 시맨틱 구조 어느정도 파악 가능.
시맨틱 마크업 잘 적용하면, 발전한 검색 엔진이 CSR에서도 콘텐츠 중요 부분을 인식할 수 있으므로 도움이 될 것.
이 블로그의 관련된 다른 글
웹 접근성과 개선 방법 (FE.250114) https://developer-dreamer.tistory.com/114
출처
[1] 매일메일. 250124. 시맨틱 마크업이란 무엇이며, 왜 중요한가요? 59번. https://maeil-mail.kr