웹 표준검사를 도와주는 파이어폭스 부가기능-Html Validator

꿈을꾸는 파랑새

인터넷이 발달하면서 살아가면서 편리해지고 있고 인터넷을 하면 기본적으로 마주치게 되는 것이 웹페이지일 것입니다. 일단 웹페이지를 개발하시는 분들이나 블로그를 운영하시는 분들이 아니면 크게 신경을 쓰지 않는 부분이 웹 표준이 아닐까 생각이 됩니다. 웹페이지를 만드시는 분들이나 블로그 최적화를 위해서 고민하시는 분들에게 도움이 될만한 파이어폭스 부가기능이라고 생각이 됩니다. 먼저 해당 파이어폭스 부가기능인 HTML Validator을 알아보기 전에 먼저 W3C에 대해 알아보는 시간을 가져 보고 가겠습니다. W3C라는 것은 World wide Web Consortium에서 WWW(World wide Web)에서 사용하는 각종 기술의 표준화를 추진하기 위해 설립된 표준화 단체로 비영리 단체이고 약자가 W3C입니다. 여기서 웹 표준이라는 것인 W3C에 권고하는 웹 표준입니다.

인터넷을 사용하면서 웹사이트를 제작할 때 HTML.CSS, DOM, WCAG등을 말하고 있습니다. 한때에는 브라우저를 만들고 특정회사가 브라우저 전쟁에서 승리하기 목적으로 HTML을 자발적으로 확장했지만, 웹사이트 개발자들이 특정 브라우저 중심으로 만들었고 예전에는 웹 표준이라는 것은 무시되었고 파이어폭스, 구글 크롬 같은 브라우저들이 등장하면서 해당 웹브라우저로 웹사이트에 접속 시 서비스를 이용하는 데 제한적이거나 글자가 깨지거나 하는 현상이 발생했습니다. 이를 극복하기 위해서 웹 표준이 만들어졌습니다. 그리고 웹브라우저에서 웹 표준을 잘 지키고 있는지를 볼 수가 있는 Acid3 테스트가 있습니다.

일단 보시는 것은 파이어폭스 Acid 3 테스트 결과입니다. 보시는 결과와 같이 웹 표준을 준수하는 브라우저인 것을 확인할 수가 있습니다.

먼저 해당 파이어폭스 부가기능인 Html Validator을 설치를 해주면 아래와 같이 HTML 검증기가 보일 것입니다. 여기서 자신에게 맞는 것을 선택을 해주시면 됩니다. 그리고 설치를 마치면 브라우저에 Html Validator에 관한 새로운 아이콘이 생긴 것을 확인할 수가 있습니다.

HTML Validator 설정HTML Validator 설정HTML Validator 설치HTML Validator 설치

일단 예를 들어서 기본적으로 티스토리에서 제공하는 블로그 스킨을 사용하면 웹 표준에 맞게 되어 있어서 특별히 변경을 할 것이 없지만, 사용자가 티스토리에서 제공하는 플러그인이나 사용자가 각자 웹사이트에 제공하는 플러그인을 사용하다 보면 웹 표준이 깨지는 것이라고 알고 있습니다.

HTML Validator 설치HTML Validator 설치

그리고 Html Validator에서는 화살표에서 표시하는 부분에 보면 자신의 블로그나 웹사이트가 웹 표준이 아니면 경고나 위험 등을 확인할 수가 있고 해당 아이콘을 더블클릭을 해주면 아래와 같이 자신의 블로그 소스가 나오고 여기에서 화살표가 표시하는 것처럼 경고와 에러 간 일어난 부분을 확인할 수가 있고 그리고 해당 부분에 대한 정정을 도와주는 팁을 볼 수가 있습니다. 그리고 페이지 청소라는 것을 통해서 원본 HTML과 그리고 페이지 청소를 통한 정정이 된 소스를 확인할 수가 있어서 웹페이지 개발자 분들이나 HTML에 잘 아시는 블로그 분들에게 웹 표준을 통한 블로그 최적화에 도움이 되지 않을까 생각이 됩니다.

HTML Validator 오류 검증 1HTML Validator 오류 검증 1HTML Validator 오류 검증 2HTML Validator 오류 검증 2HTML Validator 오류 검증 3HTML Validator 오류 검증 3

그리고 만약 HTML이 웹 표준을 준수하는 사이트에 접속 시 아래와 같은 결과를 얻을 수 있을 거라 생각이 됩니다. 그래서 블로그 최적화나 웹페이지 최적화를 하는 데 도움이 될 수 있는 파이어폭스 부가기능이라고 생각이 됩니다.

Html Validator

Html Validator 웹표준Html Validator 웹표준


이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. Favicon of https://ssppmm.tistory.com 판다(panda) 2014.02.04 15:48 신고

    웹표준검사 부가기능이 또 생겼네요.. html 검증기 받아서 잘 쓰고 있는데..
    이것도 한번 써봐야겠네요..

    • Favicon of https://wezard4u.tistory.com Sakai 2014.02.05 02:03 신고

      판다님 정말 오래간만인것 같습니다.잘지내시는지요.한번 사용해보세요.나름 괜찮은 파이어폭스 부가기능인것 같습니다.