본문 바로가기
제로베이스 14기

시맨틱 태그를 사용하고 웹 표준을 지키는 이유

by chanfficial 2023. 4. 27.

시맨틱 요소(Semantic Elements)

: 시맨틱 요소는 브라우저와 개발자에게 태그의 의미를 명확하게 설명해주는 것을 말한다. 

ex)

  • non-semantic 요소인 <div>, <span> 태그는 어떠한 의미를 담고있지 않음
  • 반대로 semantic 요소인 <form>, <table>, <articles> 등의 태그는 그 내용을 명확하게 정의함

 

 

시맨틱 태그를 사용하는 이유

 

1. 검색 엔진 최적화(SEO): 시맨틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하기 때문에 검색 엔진이 웹 페이지를  더 잘 이해할 수 있다. 이를 통해 검색 결과 페이지에서 노출될 확률과 검색 엔진 순위를 높일 수 있다.

 

2. 좋은 웹 접근성: 시맨틱 태그는 웹 페이지의 구조를 명확하게 정의하기 때문에 스크린 리더 등 보조 기술을 사용하는 사용자들도 웹 페이지를 더 쉽게 이해할 수 있다. 

 

3. 높은 코트 유지 보수성: 시맨틱 태그는 코드를 명확하게 정의하기 때문에 코드의 가독성이 높아지고 코드 유지 보수성도 높아진다. 그렇기 때문에 코드를 유지/보수 하거나 새로운 기능을 추가하기가 더 쉽다.

 

 

웹 표준을 지키는 이유

 

1. 호환성 문제 최소화: 웹 표준을 준수하면 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작한다. 이를 통해 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.

 

2. 개발 생산성 향상: 웹 페이지를 개발할 때 필요한 기능들이 미리 정의되어 있어 다른 개발자들과 협업하기 쉬워지고 생산성이 향상된다.

 

3. 보안 강화: 웹 표준을 준수하면 보안 문제를 사전에 예방할 수 있다.