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

👁‍🗨 일반적으로 시멘틱 태그사용 시 장점으로 자주 언급되는 3가지

1. HTML 문서의 가독성과 유지보수가 쉽다.

만약 모든 태그들을 div로 만들었다고 가정했을 때, HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다.

 

2. HTML만 봐도 영역 구분이 쉽다.

웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있다.

 

3. 검색엔진이 검색(SEO)을 수행할 때 HTML내의 태그를 분석 할 수 있다.

예를 들자면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식한다. 반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식한다. 

 

🤔 웹 표준 준수 이유

국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.

 

📌 웹 표준 지켰을 때 장점

• 수정 및 운영관리 용이
• 접근성 향상
• 검색엔진 최적화(SEO)
• File Size 축소, 서버 저장 공간 절약
• 효율적인 마크업
• 호환성 가능

 

👩‍💻 내가 생각하는 시멘틱 태그 사용 이유와 웹 표준을 지키는 이유

HTML이 만들어진 의도에 대한 이해

HTML은 처음 버너스리가 발표를 할 때부터 문서(Document)의 개념으로 만들었다. 문서란 의사소통을 위해 고안된 정보를 물리적으로 묶어 놓은 것을 말하며, 표로 나타낸 문서와 같이 구조화가 가능하다. 우리의 일상 속에서 다양한 형태로 존재하는데, 제일 쉽게 접할 수 있는 건 역시 책이나 뉴스 기사 같은 것을 예로 들 수 있을 거 같다. 인터넷이 이렇게 발전하기 전까지 우리는 문서로 불렀던 것들은 종이로 이루어졌었다. 하지만  발전을 거듭하면서 전자종이의 형태로 진화하기 시작했다.

 

문서와 웹표준의 관계

우리가 일반적으로 종이로 문서를 만들 때를 생각해 보았다. 종이로 문서를 만들 때도 우리는 핵심을 잘 전달하기 위해, 전달받은 상대방이 보기 쉽게 일정한 형식을 지키며 문서를 작성한다. 그 형식은 사람마다 회사마다 다르며, 정답이 정해져 있는 것은 아니다. 하지만 체계가 있는 곳은 형식을 만들어 서로 약속을 함으로써 관리한다.

 

그렇다면, 종이로 된 문서가 아닌 전자종이로 된 문서는 어떨까?

전자종이는 특성상 종이로 공유하는 것보다 인터넷이 되는 한 마음만 먹으면 전 세계적으로 공유할 수 있을 정도로 접근성이 높다. 그렇다면 전 세계적으로 공유할 수 있는 형식은 있어야 된다 생각하며 만들어진 게 웹표준이라 생각한다.

 

예를 들어 책도 출판사가 여러 개 인 것처럼 인터넷도 여러 브라우저가 있으며 브라우저마다 차이점이 있을 수 있다. 만약 표준이라는 형식이 없다면 사람들은 이러한 것들을 고려하지 않고 문서를 난잡하게 만들게 될 것이며

그 결과, 모든 사용자들에게 정보접근에 제약이 생길 수 있다 생각한다.

 

 

문서와 시멘틱 태그의 관계

개인적인 생각이지만 전자종이는 사람만이 보기 쉽게 만들어선 안된다고 생각한다. 사람보다 문법에 더 까탈스러운 0, 1로 이루어진 컴퓨터도 쉽게 읽을 수 있게 작성해야 된다고 생각한다.

 

요즘같이 강력해진 스타일링 기능과 이벤트 기능들(click, hover, keyboard)은 종이문서와는 완전히 다른 차별점을 두고 있다. 향상된 기능으로 인해 사실상 전부 div태그로도 만들라면 만들 수 있고, 어떤 HTML태그를 써도 똑같이 보이게 할 순 있다. 문서의 스타일링을 똑같이 할 수 있다 해서 의미와 형식을 이해하지 않고 사용한다면, 책으로 비유했을 때 머리말을 사용해야 될 곳에 본문을 넣고 목록에 제목을 넣는 괴랄한 책이 나올 것이다.

 

결론

이러한 생각들로 인해 내린 결론은 장애인, 노약자를 포함한 모든 사용자들뿐만이 아닌 그걸 인식하는 컴퓨터에게도 제대로 된 형식과 정보를 주어야 하며, 그것을 위해 웹표준과 시멘틱 태그가 있다고 생각하고 인터넷 정책에 맞게 발전해 온 문서양식이 오늘의 HTML이라 생각한다.