[매일메일] 시맨틱 마크업이란? (FE.250124)

시맨틱 마크업이란?

• 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 

[2] https://yozm.wishket.com/magazine/detail/2495/