웹표준(XHTML)을 지키지 않는 IE8

 어제 오후 이웃 블로거분들과 블로그 운영에 대한 이야기를 주고 받던 중 문득 웹표준(XHTML)에 대한 이야기가 나왔었습니다. 그래서 문득 제 블로그에 대해서  웹표준 유효성 검사를 해보니 에러 130여개를 포함하고 있더군요 ^^;; 자신의 블로그 등의 웹표준 준수 여부를 확인해 보고 싶으시다면... 아래 링크의 사이트를 방문하셔서 주소를 입력하면 결과값과 어느 부분에서 에러가 난건지 표시됩니다.

> 웹표준(XHTML) 유효성 검사 : http://validator.kldp.org/

 130개 정도의 에러를 보고는 그냥 지나칠수가 없어서 위 페이지에서 말하는 부분들을 하나씩 검토하며 수정을 했습니다. 의외로 금방금방 진행이 되더군요. 처음에 목표는 50개 이하로만 잡자였는데 5분 정도 작업하니 어느 순간 40개 정도의 에러만 표시되었습니다. 5분만에 저런 성과(?)를 보니 집착하게 되더군요. 그런데 아무리 해도 고쳐지지 않는 부분이 있었습니다. 결론부터 말씀드리면 10여개는 어쩔 수 없이 에러로 잡히게 되어 있습니다. 예를 들어 XHTML 에서는 embed 를 object 로 묶어서 써야 하는데... 다음뷰 추천 버튼은 embed 태그만 사용하거든요. 이 외에도 스킨상으로는 수정할 수 없는 몇몇 부분이 있습니다.  참고로 아래는 현재 제 블로그의 웹표준 유효성 검사 결과화면입니다. 선방 ㅎㅎ

 각설하고... 나머지 부분은 도대체 뭐가 문제인가싶어 이리저리 파헤쳐보다가 문득 작성했던 포스팅의 HTML 을 IE8 에서 확인했는데 "OMG" 생각지도 못했던 곳에서 황당스럽게 문제를 발견했습니다. 위지윅 모드에서 우측 상단에 있는 HTML 항목을 체크하니 수 많은 태그들이 "대문자" 로 표기되거나 속성값이 ' 혹은 " 로 묶여야 하는데 그렇지 않더군요. 본문의 후반부에 웹표준 문법 중 실수하기 쉬운 부분은 따로 언급하겠습니다.

 그래서 원인을 찾았다고 생각하고 HTML 에서 수정을 한 뒤 아무 생각없이 HTML 체크를 해제. 즉, 위지윅 모드로 돌아온 후 글을 저장했습니다. 그리고는 다시 위 페이지에서 확인을 했는데... "얼라리요?" 

 분명 소문자로 수정한 태그들이 대문자라며 또 오류로 표시되고 있더군요. 혹시 스킨의 소스 중에 문자를 대문자로 표시하게 하는 부분이 있어서 그런가 싶어 관련 부분은 다 제거했지만 역시나 마찬가지... 혼자 고민하다가 씨디맨에게 관련해서 테스트를 부탁, 또 황당스럽게 문제점을 발견했습니다. IE8 이 이 문제의 원인이었습니다. -_- 왜 파이어폭스나 크롬플러스로 테스트할 생각은 못한건지 ^^;; 순간 헛웃음만 나오더군요. 파이어폭스 혹은 크롬플러스 등과 같은 브라우져에서는 이런 문제가 발생하지 않습니다.

웹표준(XHTML)이 지켜지지 않는 IE8

 문제가 발생하는 부분은 이렇습니다. 우선 간단한 예시로 아래 영상을 봐주세요. 보시면 이해가 빠를 듯 합니다.

 

 글자를 굵게, 플러그인에서 '이전 글 넣기', 등록한 서식을 불러와서 사용 등 티스토리 메뉴 자체를 이용하는 경우 이런 문제를 쉽게 확인할 수 있었습니다. 위에서 보여드린 것 외에도...

 <div>, <center>, <span>, <b>, <h2>, <h3> 등의 태그들도 HTML 과 위지윅 사이를 전환하면 '대문자'로 변하더군요. 또한, target="_blank" 처럼 ' 혹은 " 와 같은 인용부호로 속성값이 묶여야 정상인데... 이런 부분이 누락되는 문제도 있었습니다. 얼추 제가 발견한건 이 정도이지만 다른 태그들도 입력해보면 유사한 문제점을 보이는 경우가 분명 더 있을거라 생각됩니다.

 이 내용을 이렇게 포스팅하는 이유는 예약발행시 다음뷰 채널 초기화 문제, 언제까지? 포스팅처럼 티스토리측에 관련 내용을 보내기 위해서입니다. 이미 관련 내용은 보낸 상태구요. 이 문제가 결코 우습게 넘길만한 일은 아니라고 생각합니다. 개인적으로는 다음뷰 채널 초기화 문제보다 훨씬 심각하다고 생각되는데... 관련된 곳에서 좀 더 정확히 문제를 파악하고 조치를 취해주길 바랍니다.

실수하기 쉬운 웹표준(XHTML) 바로잡기

 블로그를 운영하는 분들의 스킨을 살펴보면 아마 대부분 아래 사진과 같은 문구가 상단에 적혀 있을겁니다.

 XHTML 웹표준을 준수하겠다고 선언하는 내용인데요. 도대체 웹표준은 무엇이며, 이를 준수할 경우 장점 등이 궁금하신 분은 ☞ 여기를 참고하세요. 지금부터 웹표준에 어긋나는 사항을 바로잡고자 하는 분들을 위해 몇몇 내용들을 소개하겠습니다. 저도 많이 그리고 깊이 하는 지식이 아닌지라 에러로 표시가 많이 되는 부분들 중심으로 몇가지 다룰게요~

태그는 정확하게 중첩되어야 함!

<div><li>...</div></li> (X)
<div><li>...</li></div> (O)
※ 위 예시처럼 태그가 중첩될 때는 그 순서에 주의하셔야 합니다.

모든 태그와 속성은 '소문자' 로!

<STRONG>...</STRONG> (X)
<strong> ... </strong> (O)

모든 태그의 속성값은 ' 혹은 " 로 묶어야 함!

<div ... align=center> (X)
<div ... align="center"> (O)

종료 태그가 없는 경우 반드시 '/' 로 닫아야 함!

<meta name="Location" content="South Korea"> (X)
<meta name="Location" content="South Korea" /> (O)

& 대신 &amp; 를 사용해야 함!

...type=100&sort=1&page=1&view=issue... (X)
...type=100&amp;sort=1&amp;page=1&amp;view=issue... (O)

script 와 style 태그에는 type 속성이 포함되어야 함!

<script>...</script> (X)
<script type="text/javascript"> ... </script> (O)

 위 내용들 외에도 훨씬 다양한 표준 문구들이 있습니다. 검색을 해보시면 관련된 문구를 더 많이 접하실 수 있을겁니다. 여러분이 운영하는 공간은 웹표준 유효성 검사에서 어느 정도의 결과값을 보이나요? ^^ 조금씩 틈틈히 수정해 보세요~