시맨틱 태그란?
semantic이라는 단어는 "의미의, 의미론적인"이라는 뜻을 담고 있는 단어이다.
그럼으로 시맨틱 태그는 의미를 가진 태그?로 유추할 수 있다.
유추한 것과 같이 시멘틱 태그는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다.
즉, 기존 HTML block element이면서 사이트의 레이아웃을 설계하기 위해 존재하는 태그이다.
예시로는 header, nav, article, section, main등이 존재한다.
div로만 개발하면 가독성도 떨어질 것이다..
즉, 한 줄 설명을 하자면
태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 태그이다.
시맨틱 태그를 사용하는 이유
시맨틱 태그를 사용하는데에는 다양한 이유가 있기에 간단하게 이야기해보자
- 검색엔진 최적화(SEO)
검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다.
시맨틱 태그 사용시 분석시 검색엔지에 발견 될 확률이 높다.
- 쉬운 소스코드 구조화
브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다. (ex, 스크린 리더기)
- 코드 가독성 향상
여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 ㅟㅂ게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있다.
위와 같은 이유 때문에 시맨틱 태그를 사용한다고 할 수 있다.
웹 표준이란?
웹 표준은 어떤 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙이다.
웹 표준을 지키는 이유 등에 대해서 작성
웹 표준을 지키지 않는다면, 다른 브라우저나 os에서는 화면이 안보이는 등의 부적절한 효과를 줄 수 있다. 하지만 웹 표준을 사용하면 모든 사용자에게 동일한 화면을 보여줌과 동시에 아래의 이점들을 얻을 수 있다.
-
검색엔진 최적화
시맨틱 태그에서 설명했던 것과 같이 웹 표준을 지켜 작성한다면 크롤러 봇이 좀 더 이해하기 쉬워지기에 결과 순위의 우위를 가져갈 수 있다. -
코드 가독성 향상
개발자가 코드를 이해하기 더 쉬워진다.
즉, 개발자의 효율을 높여주므로 큰 장점이라고 할 수 있다. -
호환성 UP
웹 표준을 준수함으로서 다양한 브라우저에서 작동이 가능한 웹 사이트를 만들 수 있다.
웹 표준을 안 지켜서 나쁜점은 존재하지만, 웹 표준을 지켜서는 이점만 존재하기에 지키는게 좋을 것 같다.
