HTML 시맨틱 태그와 웹 표준을 지키는 이유
시맨틱 태그(Semantic Tag) 란?
Semantic : 의미의 / 의미론 적인
요소의 의미를 고려하여 구조를 설계하고 코드를 작성하는 행위
시맨틱 웹의 설계
div/span 태그는 non-semantic이다
시맨틱 마크업을 사용할때의 장점
-
검색 엔진은 시맨틱 마크업을 분석하여 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다
-
시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색 할 때 시맨틱 마크업을 통해 푯말로 사용 가능
-
의미없는
div를 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 훨씬 쉬움 -
개발자입장에서 태그 안에 채워질 데이터 유형을 제안 및 코드를 작성하고 유지보수하는 면에서도 생산성 측면에서도 더욱 유용하다
-
의미있는 이름짓기는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기를 반영할 수 있다
시맨틱 태그에는 어떤 것들이 있을까?
header, nav, article, section, footer 등이 존재하며
해당 태그들은 페이지 내용을 그룹화하고 의미를 부여해준다
이렇게 구조화된 페이지는 검색 엔진 등이 페이지의 내용을 더 잘 이해할 수 있으므로
SEO(검색 엔진 최적화)에 도움이 되어준다
웹 표준을 지키는 이유?
웹 표준을 지키는 것은 모든 브라우제에게 일관 되게 웹 페이지를 보여줄 수 있도록 하기 위함이며, 웹 표준을 따르면 웹 페이지가 어떤 브라우저에서도 일관된 방식으로 동작하므로, 웹페이지를 만드는데 드는 비용과 시간을 획기적으로 줄일 수 있다
웹 표준을 지키는 것은 웹 접근성을 높이는데도 도움이 되는데,
웹 접근성이란 장애를 가진 사용자, 저사양 브라우저를 사용하는 사용자 등 다양한 사용자들이 웹페이지에 쉡게 접근할 수 있도록 하는것
웹 접근성을 높이려면, 웹 페이지가 일관된 방식으로 작동해야하며
이를 위해서는 웹 표준을 따라야한다!
웹 표준을 따르는 것은 보안성을 높이는데도 큰 도움이 되는데,
웹 표준을 따르면 보안 취약점을 높이고 , 웹 애플리케이션의 보안성을 높일 수 있다
보안성을 높이는데 도움이 되는 이유는?
1. 새로운 보안 기능의 도입 : 웹 표준은 보안성을 높이기 위한 새로운 보안 기능을 지속적으로 도입하는데 예를 들어 HTML5 에서는 웹 저장소 API를 도입하여 쿠키보다 더 안전하게 데이터를 저장할 수 있도록 했다.
또한 HTTPS 프로토콜을 지원하고, 사용자 인증과 암호화등의 보안기능을 제공,
2. 국제 표준 기술의 적용 : 웹 표준은 국제 표준 기술을 적용하기 때문에, 다양한 브라우저와 디바이스에서 일관되게 웹 페이지를 보여줄 수 있다.
이를 통해 취약점이 발생할 수 있는 요소들을 미리 파악후 대응할 수 있게되고 보안에 대한 공통된 이해를 갖게 된다
