[HTML5]-웹 표준과 웹 접근성

1. 웹 표준

웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 사용자가 어떤 운영체제나 브라우저, 기기를 사용하든 웹페이지가 정상적으로 작동하고 동일하게 보일 수 있도록 하는 제작 기법을 가리킵니다.

 

2. 웹 표준의 장점

2-1. 유지 보수의 용이성

웹 표준에 따라 HTML과 CSS, JavaScript를 영역에 따라 구분할 수 있게 되었고, 각 영역에 해당하는 코드가 분리됨에 따라 유지 보수가 용이해졌고 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 발생했습니다.

2-2. 웹 호환성 확보

웹 표준을 준수함으로써 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 구애받지 않고 항상 동일한 결과가  나오도록 할 수 있습니다.

2-3. 검색 효율성 증대

웹 표준에 맞춰 사이트를 제작하는 것만으로도 검색 엔진에서 더 높은 우선순위로 노출될 수 있습니다. 웹 사이트를 제작하는 이유는 누군가에게 보여주기 위함이고, 웹 표준에 맞게 사이트를 제작하면 이 목적을 달성하기 위해 따로 홍보 비용을 들이지 않고도 검색의 효율성을 높일 수 있는 것입니다.

2-4. 웹 접근성 향상

웹에 접근할 수 있는 환경도 다양하지만, 웹을 이용하는 사람들 역시 다양합니다. 이렇게 많은 경우의 수를 일일이 고려하기 전에 1차적으로 웹 표준을 준수하여 사이트를 제작하여 접근성을 비약적으로 상승시킬 수 있습니다.

 

3. Semantic HTML

웹 표준에서는 HTML을 시멘틱하게 작성하는 것을 중요시합니다.  semantic은 '의미가 있는' 이라는 뜻의 단어입니다. 즉 HTML 요소를 사용되는 목적과 의도에 알맞게 사용하라는 말이죠.

Semantic HTML

위 이미지처럼 웹페이지를 구성하는 각각의 요소에 적합한 HTML 요소를 사용하는 것이 바람직합니다. 위 이미지의 <header>, <nav>, <main> 등의 요소 대신 <div>요소로만으로도 웹페이지를 제작할 수 있지만, 그 경우 모든 div 요소에 대해 class나 id를 지정해주어야 하고 코드가 길어질 수록 구조를 한 눈에 파악하기 어렵다는 문제가 발생합니다.

이처럼 특정한 요소가 어떤 기능을 하고 어떤 내용을 담게 될 것인지에 대해 확실한 의미를 가지고 있는 요소가 시멘틱 요소입니다. 이러한 시멘틱 요소를 적절하게 사용하여 구성한 HTML이 바로 시멘틱 HTML입니다.

 

4. 실제 페이지 분석

실제 웹사이트가 시멘틱 요소를 어떻게 사용하고 있는지 간단하게 분석해보았습니다.

네이버 홈페이지(https://www.naver.com)

네이버 홈페이지는 오래 전에 만들어진 웹사이트라서 그런지 다소 시멘틱하지 않게 만들어진 모습을 볼 수 있었습니다.

<header>나 <nav>, <footer> 등의 시멘틱 요소를 사용하지 않고 <div> 요소를 사용한 후 id를 통해 구분해 놓았습니다.

웹페이지의 전체 구조를 바꾸어야 하기에 시도하기 어려운 작업이겠지만, 시멘틱 HTML을 만들기 위해서는 이러한 div 요소들을 바꾸어주어야 할 것입니다.