시맨틱 마크업이란?

규갓 God Gyu·2024년 12월 25일

면접질문

목록 보기
34/142

Html 요소를 사용하는 방식
단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식

ex- div / span은 비시맨틱 태그
header / footer / article / section은 문서 구조와 콘텐츠의 역할을 명확하게 함

중요한 이유

  1. 접근성 개선
    스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석하게 해주어 시각장애인, 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색 가능하게 함
    더 나아가 더 많은 사람들에게 접근 가능한 웹 환경을 제공할 수 있음

  2. SEO에 유리
    HTML의 시맨틱 구조를 통해 페이지의 구성을 파악
    그래서 검색 엔진이 페이지를 올바르게 파악할 수 있고,
    검색 결과에 더 잘 노출될 가능성이 높아짐

그래서 단순 코드 작성 컨벤션이 아닌 웹 접근성과 SEO를 위한 중요한 요소
즉, 현대 웹 개발에서 필수적인 기술이라 말할 수 있음

그렇다면 CSR에선??

뒤늦게 렌더링 되는 환경인 client side rendering에선 시맨틱 마크업이 제한적일 순 있어도 여전히 주요하다

검색 엔진이 페이지를 크롤링할 때 페이지의 초기 콘텐츠만 인식할 가능성이 크지만 최근 검색 엔진들은 JS 렌더링을 지원하는 방향으로 진화중이며, 페이지의 시맨틱 구조를 어느정도 파악할 수 있음
그렇기 때문에 CSR에서도 무시하면 안됨

그동안 면접 후유증이라는 말도 안되는 핑계로 나 자신이 너무 오만방자했고 다시 비상하자 여기서 포기하지말자 주변인들에게 후회없이 당당하게 다시 일어나자
할수있다 엄마의 희망은 나다
32년 보잘것없엇던건 아니엿어도 별볼일 있는 사람이 되어보자
아자아자!

profile
웹 개발자 되고 시포용

0개의 댓글