시맨틱 마크업이란무엇인가

Woody·2025년 8월 13일
0

매일메일

목록 보기
7/13

오늘의 질문

시맨틱 마크업이란 무엇이며, 왜 중요한가

내답변

오늘의 질문은 알지 못하는 질문. 답변 불가

답변

시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 요소의 의미를 잘 나타내도록 작성하는 방식이다. <div> <span> 이 아닌 <header> <footer> <article> <section> 과 같은 시맨틱 태그를 사용하여 문서 구조와 콘텐츠의 역할을 명확하게 하는 것.

시맨틱 마크업이 중요한 이유는 크게 두가지가 있다.

  1. 접근성을 개선하기 위함. 시맨틱 요소들은 스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석할 수 있게 해 주어 시각장애인이나 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색할 수 있게 함.

  2. SEO(검색엔진최적화)에 유리하다. 검색 엔진은 HTML 의 시맨틱 구조를 통해 페이지의 구성을 파악한다. 그렇기에 시맨틱 마크업을 적절히 적용하여 검색 엔진이 페이지를 올바르게 파악할 수 있고 그에 따라 페이지가 노출될 가능성을 높혀준다.

웹 접근성과 SEO 를 위한 중요한 요소로 현대 웹 개발에 필수적인 기술이라 볼 수 있다.

CSR 에서도 SEO 에 영향이 있을까?

CSR 환경에서는 다소 제한적일 수 있지만 중요한 역할이 있다.
대부분의 콘텐츠가 클라이언트 측에서 렌더링 되기 때문에, 검색 엔진이 페이지를 크롤링할 때 페이지의 초기 콘텐츠만 인식할 가능성이 크다. 그렇더라도 검색엔진들이 최근 JavaScript 렌더링을 지원하는 방향으로 진화하고 있어, 페이지의 시맨틱 구조를 어느 정도 파악이 가능하다. 따라서 시맨틱 마크업을 제대로 적용하면 CSR 에서도 검색엔진이 콘텐츠의 중요한 부분을 더 쉽게 인식하게 될 것

느낀점

평소 사용하던 태그들의 이름을 명확히 몰랐던 것 같다. 확실히 평소에 쓰던 내용이다보니 빠르게 기억에 남고, 학습이 가능한 것 같다. 머리속의 지식을 구체화 시킨 느낌?

profile
프론트엔드 개발자로 살아가기

0개의 댓글