HTML5 시맨틱 태그와 웹 표준을 지키는 이유

  오늘은 이와 관련하여 시맨틱 태그가 무엇인지와 이를 사용하는 이유, 웹 표준의 의미와 지키는 이유에 관해 정리해보고자 합니다!

  위 사진에 나온 병을 주목하면, 병들마다 이름표가 붙여진 것을 알 수가 있습니다.
이렇게 이름표가 붙어 있으면 그 내용물이 무엇인지 언제보더라도 알 수 있을 듯합니다.

- 시맨틱 태그(Semantic Tag) 란?

시맨틱(semantic)은 '의미의' 라는 뜻을 가지고 있습니다.
태그(tag)는 HTML 요소라고도 부르며, HTML 문서를 구성하는 기본 단위입니다.

시맨틱 태그는 '의미있는 HTML 요소'라고 이해할 수 있습니다.

  이러한 시맨틱 태그는 HTML5에서 처음 등장했고 시멘틱 태그 종류로는 웹사이트 구조를 구성하는 박스태그들과 그밖의 의미있는 다양한 태그들도 포함하여 약 100개 정도가 있습니다(23년 04월 mdn 기준).

• 웹사이트 구조를 구성하는 박스태그:
  <header> <nav> <footer> <section> <nav> ; 등..
• 그밖의 의미있는 태그:
  <h1> <mark> <time> <figure> <figcation> ; 등..

- 시멘틱 태그 왜 사용하나요?

1. 검색엔진최적화(SEO)

  웹사이트에서 우리가 원하는 정보를 얻고자할 때, 검색엔진에 노출되어 검색된 결과로 정보를 얻습니다.

  검색엔진은 매일 전세계의 웹사이트 정보를 수집하는데, 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어둡니다. 인덱스를 생성할 때 사용되는 정보는 결국 웹사이트의 HTML 코드 입니다.

  즉, 검색엔진은 HTML코드 만으로 그 의미를 인지하여야 하는데, 이때 시멘틱태그를 해석하게 됩니다. 따라서 개발자의 의도대로 검색엔진이 읽을 수 있도록 하기 위해서는 시멘틱 태그를 적극 사용하여야 할 것입니다.

2. 웹접근성

  웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside)등 영역 파악을 쉽게 할 수 있습니다. 이는 웹브라우저 뿐아니라 다양한 사람들이 각자의 환경에서 웹을 이용할 때에도 도움을 줄 수 있습니다.

  예를 들어 시각장애인들이 주로 사용하는 스크린 리더기(화면 내용을 음성으로 알려주는 소프트웨어) 등을 통해 활용될 수 있습니다. 중요성을 띄는 컨텐츠를 강조하고자 하는 목적이 있을 때, 단순히 글자를 굵게 하는 용도인 <b>태그를 사용하는 것보다 시멘틱 태그인 <strong>태그를 사용하면 스크린리더기에 의해 더 정확한 의미로 읽어질 수 있습니다.

3. 유지보수

  위 사진에서처럼 병들마다 어떤 내용물인지 이름표를 붙여놓는다면, 그 이름표만 보고도 무엇인지 바로 확인을 할 수 있을 것입니다.

  따라서 클래스명을 따로 주어야 의미 파악이 가능한 태그들의 사용보다는 태그 자체로 각 기능에 맞게 의미를 가지는 시멘틱 태그를 사용할 때, 전체적인 구조파악을 빠르게 할 수 있어 유지보수 측면에서도 효율적입니다.

- 웹표준?

웹에서 표준적으로 사용되는 기술이나 규칙을 의미하며, 이 표준은 표준화 단체인 W3C 조직에서 권고한 표준안을 말합니다.

- 웹표준 왜 지켜야하나요?

버스를 탈 때 기사님께 하차하겠다는 의사를 표현할 때, 남녀노소 구분없이 하차벨을 누릅니다. 하차벨이 눌리면, 기사님은 서서히 브레이크를 밟고 버스를 멈출 준비를 하시곤 합니다.
학생들의 하차의사 표시와 어르신들의 하차의사 표시가 다르지 않습니다.
하차의 표시로 누군가는 손을 들고, 누군가는 벨을 누르고, 또 다른 누군가는 발을 구른다면 서로 소통이 어려울수 있습니다.

이처럼 웹에서 개인이 사용하는 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 하기위해 웹표준을 지켜야합니다.

웹표준의 장점으로는,

• 소스의 통일화로 수정과 운영관리가 용이합니다.
• 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성(서로 바꾸어 쓸수 있는 성질)과 운용성(싱호간의 통신)이 확보됩니다.
• 다양한 브라우저, 장애인 지원용 프로그램에서도 대응가능하므로 접근성이 향상됩니다.
• 검색봇을 통한 효율적 노출과 같은 검색엔진 최적화가 가능합니다.
• CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상됩니다.