1) 모든 엘리먼트들은 반드시 완벽하게 중첩되어야 합니다.
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.
2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.
3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.
4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.
5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.
6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.
당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.
7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.
8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.
2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.
3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.
4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.
5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.
6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.
당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.
7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.
8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)
Strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
다음은 이러한 XHTML 규칙에 따라 생성된 XHTML 코드의 예입니다. 아마 겉으로 보기에는 일반 HTML과 별 차이를 못느끼실지도. ^_^;
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
생각보다는 간단하죠?
Strict DTD에서는 사용할 수 없는 HTML 태그들이 있습니다.
<applet> : 애플릿을 이용하기 위해서는 <object> 를 대신 쓰세요.
<frame>, <frameset>, <noframes>: Frameset DTD로 선언하지 않으면 사용할 수 없습니다.
<center>, <font>, <basefont>, <s>, <strike>, <u> : 이러한 "디자인 요소"들은 사용할 수 없습니다. 디자인과 관련된 부분은 모두 CSS에서 처리하도록 합니다.
<iframe> : XHTML 문서에서는 iframe을 사용하지 않습니다. 구조화된 문서를 만드는데 방해됩니다.
<dir>, <menu> : 역시 사용하지 않습니다. (HTML 4.01에서도 삭제되었죠. ^_^)
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
| onClick // onmouseup // onmousedown // onkeydown / onKeyUp // onkeypress (0) | 2007.12.05 |
|---|---|
| 드롭다운 메뉴 변환 HTC, HTC를 이용한 selectBox 꾸미기 (0) | 2007.11.07 |
| HTML 4.01 DTD (0) | 2007.11.03 |
| META태그란? (0) | 2007.11.03 |
| DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |