웹표준 웹표준 하길래 따라만 했지. 왜 웹표준을 지켜야 하는지 모르고 있었다.
각설하고 그 이유를 정리하면 다음과 같다.

1. 웹사이트를 더 빨리 불러온다.
2. 호스팅 비용을 낮추어 준다.
3. 재디자인시 보다 효율적이며 비용 발생을 줄여준다.
4. 전체 사이트의 시각적 일관성 유지에 도움이 된다.
5. 보다 나은 검색 결과를 얻게 된다.
6. 모든 방문자와 브라우저의 접근성을 높여준다.
7. 게다가 여러 곳에서 웹표준 사용을 늘려가고 있어 당신의 경쟁력, 즉 직업보장이 된다.

테이블은 왜 쓰면 안돼냐고 물으신다면..

테이블 사용의 문제
  : 표현 데이타와 컨텐츠의 혼용.
 : 페이지의 크기를 불필요하게 증가시킨다. 따라서 사용자가 방문할 때마다 표현
   데이타를다운받아야 한다.
  : 대역폭은 무료가 아니다.
  : 현재의 사이트와 내용(Contents)을 재디자인할 때, 매우 많은 작업과 비용을
   유발하게 된다.
  : 또한 전체 사이트의 시각적 일관성을 유지하는 데 매우 힘들고 과도한 비용을
   발생시킨다.
  : 테이블 기반 페이지는 웹을 이용하려는 장애인, 핸드폰과 PDA 사용자에겐
  접근성을 떨어뜨리게 된다.

http://www.softwant.com/standards/index.php 에서 만화를 통해 쉽게 웹표준을 설명하고 있다. 한글로 번역해놓은것 같은데, 아무리 쉽게 설명했다고 해도 아무래도 기본지식이 필요한건 어쩔수 없나보다.

XHTML 일반 문법 준수

정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.

표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 한다



모든 요소는 완벽하게 중첩되어야 한다.
모든 요소들이 완벽하게 내포(nest) 되어야 하는 것은 필수적이다. 중첩(overlapping)이 부적합(illegal)한 것임에도 불구하고 기존 웹 브라우저들에서 널리 관대하게 사용되었다.



모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶는다.



모든 요소와 속성은 소문자여야 한다.
XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관 없이 XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정해야 한다. 이러한 차이는 XML은 대소문자를 구별(case-sensitive)하므로 필수적이다. 예를 들어, <li>와<LI>는 서로 다른 태그들이다



모든 요소는 닫아야 한다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한다. 코드를 생성하거나 XHTML을 정리할 때 코드에 닫기 태그를 삽입한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다. 예를 들어, <br>은 잘못된 것이며 <br></br> 또는 <br/>이 올바른 형식이다. 빈 요소로는 area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta 및 param이 있다.
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다(예: <br/>가 아니라 <br />).



모든 속성값은 속성이 함께 선언되어야 한다.
모든 속성은 최소화되어 표기 되면 안 된다. XML은 속성의 최소화를 지원하지 않는다. 속성 값의 짝들은 모두 작성되어야 한다. a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id 속성도 있어야 한다. 예를 들어, <a name="intro">Introduction</a>는 잘못된 것이며 <a
id="intro">Introduction</a> 또는 <a id="section1" name="intro">Introduction</a>.가 맞다.
또한 <td nowrap>은 잘못된 것이며 <td nowrap="nowrap">이 올바른 형식이다. 최소화될 수 없는 속성으로는 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly 및 selected가 있다.
참고: HTML 브라우저에서 HTML 4를 지원하지 않는 경우, 부울 속성이 전체 형식으로
표시되면 브라우저에서 이들 속성을 해석하지 못할 수도 있다.


모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야 한다. 코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type 및 language 속성을 설정하고 style 요소에서 type 속성을 설정한다.



모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 설정하고, 찾을 수 없는 alt 속성을 보고한다. 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
자바 스크립트에서 HTML 태그 쓰기에서 많은 경우 오류를 낸다. 자바스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어 있다. 예를 들어 아래 예제는 잘못된 방식이다.

HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료
태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.

XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, &lt;과 &amp;와 같은 개체(entities)들
은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로
CDATA로 마크업 하여 표시하는 게 좋다.



모든 문서 내 URL에서 &를 쓰면 안 된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으로 인식 하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
HTML 문서 내에서만 &를 &amp;로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에
서는 &를 써야 한다. 웹 서버에서는 &amp;가 아니라 &만을 인식하기 때문이다.



다 알고 있는거라 자신하지 말자.
이밖에도 많은 유용한 팁이 많은데.....
다음에 또 생각나면 옮겨보자 :)

CSS로만 만들면 다 웹표준인줄 알았다.
아...역시 코딩의 길은 멀고도 험한것인가.

http://validator.w3.org

에서 HTML 표준에 맞게 작성되었는지 확인이 가능하다.
nkko.com 입력결과 무수히 많은 오류(현재 383개)가 발견되었다.

수정작업 들어간다;;
__________________________________________________________________
13시 23분 현재,
태터툴즈 자체태그를 제외를 포함하여 오류를 79개로 줄였다.
머 태터까지 어떻게 뜯어고쳐보면 제로도 불가능한것은 아닌것처럼 보이나,
더이상은 못하겠다. 회사에서 눈치보여서;;