* 정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
표준 문서는 head, title 및 body 구조 요소로 구성되어야 한다.
프레임 세트 문서는 head, title 및 frameset 구조 요소로 구성되어야 한다.
* 완벽한 중첩
HTML은 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않는다. W3C 문법 검사기나 웹 개발자 도구의 지원을 받아 문법의 유효성을 확보하지 않으면 호환성(오류, 화면깨짐) 문제가 발생한다.
잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 한다.
<div><p>...</div></p> (X)
<div><p>...</p></div> (O)
* 소문자 작성
HTML은 대소문자를 함께 사용하는 것을 허용하였으나 XHTML은 '요소'와 '속성'들을 반드시 소문자로 표기해야 한다. 단, 속성의 '값'은 대소문자 혼합 표기가 가능하다. 이러한 차이는 XML이 대소문자를 구별(case-sensitive)하기 때문이다.
예를 들어, <li>와 <LI>는 서로 다른 태그이다.
때문에 대소문자를 명확하게 구분하기 때문에 대문자와 소문자로 구성된 '값'은 동일하지 않고 확실히 구별된다.
예를 들어 class="value"와 calss="Value"은 서로 다른 값이다.
<DIV CLASS="value"> (X)
<div class="value"> (O)
* 모든 요소는 닫아야 한다.
HTML은 종료태그가 없는 것을 허용하며, 내용을 포함하지 않는 태그는 종료하지 않는다.
XHTML은 반드시 종료태그를 갖는다.
빈 요소에는 종료태그가 포함되거나 시작 태그가 />로 끝나야 한다. 예를 들어, <br>은 잘못된 것이며 <br></br> 또는 <br/>이 올바른 형식이다. 하지만, XML을 사용할 수 없는 이전 브라우저와 호환을 위하여 /> 앞에 공백이 있어야 한다.
예를 들어 <br/>이 아니라 <br />이다.
<img src="..." alt="..."> (X)
<img src="..." alt="..." /> (O)
<area />, <base />, <basefont />, <br />, <col />, <frame />, <hr />, <input />, <isindex />, <img />, <link />, <meta />, <param />
* 모든 속성값은 인용 부호("나") 안에 값을 넣어야 한다.
HTML은 속성값의 인용부호를 생략할 수 있었지만, XHTML은 인용부호 생략을 허용하지 않는다.
<p class=value> (X)
<p class="value"> (O)
* 모든 속성값은 속성이 함께 선언되어야 한다.
HTML은 속성값에 대한 단축 표기를 사용하나, XHTML은 단축 표기를 허용하지 않는다.
간소화될 수 없는 속성은 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, selected가 있다.
<input type="radio" checked> (X)
<input type="radio" checked="checked" /> (O)
참고 - HTML 브라우저에서 HTML 4를 지원하지 않는 경우, 속성이 전체 형식으로 표시되면 브라우저에서 이들 속성을 해석하지 못 할 수도 있다.
* 지원불가요소
a, applet, frame, iframe, img, map 요소의 name 속성은 폐기되었으며 id 속성으로 교체되어야 한다.
name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.0 Transitional 버전의 문서까지는 지원하고 있다.
하지만 XHTML 1.0 Strict 버전에서는 지원하지 않으며 이후 버전에서는 폐기된다.
참고) XHTML Strict에서는 target이라는 속성이 폐기(deprecated)되었음.
이것은 링크의 타겟 프레임을 사용자가 직접 제어하도록 유도하기 위한 방침이며 자용자의 의자와 관계없이 강제로 새창을 띄우는 것이 합리적인 방식이 아니라는 것을 의미한다.
사용자는 Ctrl+Click, Shift+Click 등의 단축키를 이용하여 선택적으로 새창을 띄울 수 있다.
Strict에서 사용되지 않는 태그 - <center>, <u>, <strike>, <applet>
* 모든 script와 style 요소에는 type 속성이 정의되어야 한다.
language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 저정해야 한다.
코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type 및 language 속성을 설정하고 style 요소에서는 type 속성을 설정한다.
<script type="text/javascript" language="javascript"></script>
<style type="text/css"></style>
* 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
* 모든 script 내의 태그는 escape 시켜야 한다.
자바스크립트에서 HTML 태그 쓰기에서 많은 경우 오류를 낸다.
자바스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어있다.
document.write("</p>"); (X)
document.write("<\/p>"); (O)
HTML4에서는 script내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.
XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로 , <과 &는 마크업의 시작으로 처리되고, <과 &와 같은 개체(entities)들은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로 CDATA로 마크업 하여 표시하는 것이 좋다.
<script type="text/javascript" language="javascript">
<![CDATA[
<h1></h1>
]]>
</script>
* 모든 문서 내 url에서 &를 쓰면 안된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으로 인식하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
<a href="foo.cgi?chapter=1§ion=2"></a> (X)
<a href="foo.cgi?chapter=1&section=2"></a> (O)
HTML 문서 내에서만 &를 &l로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에서는 &를 써야 한다.
웹 서버에서는 &가 아니라 &만을 인식하기 때문이다.
다음은 XHTML에서 흔히 있는 오류이다(유효성 검사 프로그램이 한글화되어 있지 않기 때문에 영문을 우선 표기함):
* Improperly nesting elements (elements must be closed in reverse order) - 부적합한 함유 요소
<em><strong>This is some text.</em></strong> (X)
<em><strong>This is some text.</strong></em> (O)
* Not specifying alternate text for images (using the alt attribute, which helps make pages accessible for devices that don't load images or screen-readers for the blind) - 대체 텍스트가 기술되지 않음
<img src="/skins/common/images/poweredby_mediawiki_88x31.png" /> (X)
<img src="/skins/common/images/poweredby_mediawiki_88x31.png" alt="MediaWiki" /> (O)
* Putting text directly in the body of the document - 본문에 직접 텍스트를 삽입
<body>Welcome to my page.</body>
<body><p>Welcome to my page.</p></body>
* Nesting block-level elements within inline elements - 인라인 요소에 블록-레벨 요소를 포함
<em><h2>Introduction</h2></em> (X)
<h2><em>Introduction</em></h2> (O)
* Using the ampersand outside of entities (use & to display the ampersand character) - '&' 문자를 직접 사용 ('&'로 대체)
<title>Cars & Trucks</title> (X)
<title>Cars & Trucks</title> (O)
이것은 완전한 목록은 아니지만 XHTML 코드 작성 시에 흔히 생기는 일반적인 오류들을 포함하고 있다.
HTML 4.01 Strict 의 요건
- 모든 웹 페이지는 문서 형식 정의 태그 ‹DOCTYPE! ...›로 시작한다.
- 가장 상위 태그(엘리먼트)인 ‹html›로 시작해 종료 태그 ‹/html›로 문서의 끝을 마감한다.
- ‹head›와 ‹body›엘리먼트만이 ‹html›태그에 포함될 수 있다.
- ‹head›엘리먼트 안에는 반드시 ‹title›엘리먼트가 포함된다.
- ‹head›엘리먼트에만 ‹meta›와 ‹style›엘리먼트를 넣을 수 있다.
- ‹body›엘리먼트 안에는 반드시 블록 엘리먼트만을 사용한다.
(인라인 엘리먼트는 ‹p›등의 블록 엘리먼트로 감싸 구성하며 독립적으로 사용하지 않는다.)
- 인라인 엘리먼트 내부에는 블록 엘리먼트가 들어갈 수 없다.
- 블록 엘리먼트들은 문단 엘리먼트 ‹p› 바깥에 두어야 한다.
- 리스트 엘리먼트 ‹ul›과 ‹ol›의 내부에는 오직 리스트 아이템 엘리먼트인 ‹li›만이 들어갈 수 있다.
- ‹li›엘리먼트 안에는 텍스트, 인라인, 블록 엘리먼트 모두를 넣을 수 있다.
- ‹blockquote›엘리먼트 안에는 반드시 블록 엘리먼트만을 넣는다.
(인라인 엘리먼트는 ‹p›등의 블록 엘리먼트로 감싸서 넣는다.)
- 인라인 엘리먼트가 서로 중첩되지 않도록 주의를 기울인다.
- ‹img›엘리먼트에는 반드시 alt=""속성을 덧붙인다.
- 프리젠테이션(장식)을 위한 태그 요소는 사용하지 않는다.
'all' 카테고리의 다른 글
jQuery link (0) | 2010.03.03 |
---|---|
PNG24 백그라운드 이미지로 사용할 경우 css (0) | 2010.03.03 |
DTD <!DOCTYPE> 설명 (0) | 2010.03.03 |
PNG24 투명 이미지 iepngfix.htc 이용하기 (0) | 2010.03.03 |
PNG24 투명 이미지 스크립트 html 직접 입력하기 (0) | 2010.03.03 |