시맨틱 마크업이란?
2025-04-18 TIL-시맨틱 마크업이란?
시맨틱 마크업이란?
시맨틱 마크업(Semantic Markup)은 HTML 요소를 시각적인 목적이 아닌, 의미 중심으로 작성하는 방식이다. 예를 들어 <div>나 <span> 같은 비시맨틱 태그 대신 <header>, <footer>, <section>, <article>, <nav>, <main> 등의 태그를 사용하는 것이다. 이렇게 하면 문서의 구조와 각 콘텐츠의 역할을 명확하게 할 수 있다.
시맨틱 마크업의 중요성
1. 접근성을 높일 수 있다.
- 시맨틱 요소들은 스크린 리더와 같은 보조 기술이 페이지의 구조를 더 잘 이해하도록 도와준다.
- 예를 들어,
<header>나<main>,<nav>같은 태그는 해당 콘텐츠의 목적과 위치를 명확하게 표현하므로, 시각장애인이나 고령자 등 다양한 사용자들이 더 효율적으로 웹 페이지를 탐색할 수 있게 된다.
2. SEO(검색 엔진 최적화)에 유리하다.
- 검색 엔진은 HTML 문서의 구조를 기반으로 콘텐츠를 파악한다.
- 시맨틱 마크업을 사용하면 검색 엔진이 페이지의 구성과 중요한 콘텐츠를 더 잘 이해하게 되어 검색 결과에서 더 좋은 위치에 노출될 가능성이 높아진다.
CSR 환경에서도 시맨틱 마크업이 SEO에 영향을 미치는가?
-
CSR(Client Side Rendering) 환경에서는 콘텐츠가 클라이언트 측에서 렌더링되므로, 초기 HTML에는 거의 내용이 없는 경우가 많다.
- 이 때문에 검색 엔진이 페이지의 전체 내용을 제대로 크롤링하지 못할 가능성이 있다.
-
하지만 최근 검색 엔진들은 JavaScript 렌더링을 지원하는 방향으로 발전하고 있으며, 시맨틱 마크업과 구조화된 데이터를 함께 활용하면 CSR 환경에서도 어느 정도 SEO에 긍정적인 영향을 줄 수 있다.
-
또한, 시맨틱 태그를 사용하는 것은 SEO 외에도 웹 표준을 지키고 유지보수성과 접근성을 높이는 데 여전히 중요한 요소이기 때문에 CSR에서도 고려해야 하는 부분이다.