시맨틱 마크업이 무엇이며 중요한 이유

답변 확인

시맨틱 태그(Semantic Tags)란?

시맨틱 태그는 HTML5에서 도입된 태그로, 요소의 의미를 명확히 나타내는 태그를 의미 단순히 스타일링을 위한 div, span과 같은 비시맨틱 태그와 달리, 문서의 구조와 목적을 표현

예시

• 헤더와 내비게이션:

  • <header>: 문서나 섹션의 헤더를 나타냄.

  • <nav>: 내비게이션 링크를 그룹화.

• 주요 콘텐츠:

  • <main>: 문서의 주요 콘텐츠 영역.

  • <article>: 독립적인 콘텐츠 단위(기사, 블로그 포스트 등).

  • <section>: 관련 콘텐츠를 그룹화.

• 보조 콘텐츠:

  • <aside>: 주된 콘텐츠와 간접적으로 관련된 보조 정보.

• 푸터:

  • <footer>: 문서나 섹션의 바닥 영역.

비교

종류	설명
시맨틱 태그	<header>, <article>: 의미와 구조를 명확히 전달.
비시맨틱 태그	<div>, <span>: 스타일링이나 레이아웃을 위한 용도.

시맨틱 마크업의 중요성

1. 가독성과 유지보수성 향상

• 코드를 읽는 사람이 문서 구조를 더 쉽게 이해할 수 있음.

• 팀원 간 협업 시 역할과 의도를 명확히 전달 가능.

2. 접근성(Accessibility) 개선

• 스크린 리더와 같은 보조 기술이 문서 구조를 더 잘 이해하고 사용자 경험을 향상시킴.

3. 검색 엔진 최적화(SEO)

• 검색 엔진이 웹페이지의 구조와 콘텐츠를 더 잘 분석하여 검색 순위를 높이는 데 기여.

4. 표준 준수와 미래 호환성

• HTML5 표준을 준수하여 다양한 브라우저와 플랫폼에서 일관되게 작동.

CSR(Client Side Rendering)과 시맨틱 마크업

CSR 환경에서는 시맨틱 마크업이 SEO에 주는 영향이 다소 제한적일 수 있지만, 여전히 중요한 역할을 함

이유

1. JavaScript 렌더링 발전: 검색 엔진이 JavaScript 렌더링을 지원하면서, CSR 페이지의 시맨틱 구조를 어느 정도 파악할 수 있음

2. 콘텐츠 이해도 향상: 시맨틱 마크업은 검색 엔진이 중요한 콘텐츠를 더 잘 인식하게 도와, 검색 결과에 긍정적인 영향을 미침