7. xhtml Validation

출처(Original Post) : http://www.w3schools.com/xhtml/xhtml_validate.asp

Validate xhtml with a DTD

xhtml 파일이 적절하게 검증되어 지기 전에 정확한 DTD가 파일의 첫번째 라인에 추가되어야만 한다.

아래는 간단한 xhtml 문서이다.


<!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>

6. xhtml HowTo

출처(Original Post) : http://www.w3schools.com/xhtml/xhtml_howto.asp

웹사이트를 html 에서 xhtml 로 바꾸려면 당신은 xhtml 구문에 익숙해야만 한다. 그리고 아래와 같은 단계들이 실행되어야만 한다. (순서대로 기록되어 있음)

DOCTYPE 정의가 추가되어야만 한다.

아래의 DOCTYPE 선언이 모든 페이지의 첫행에 추가되어야만 한다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위의 예제에서 transitional DTD를 사용했음을 주목하라. 우리는 strict DTD를 사용할 수도 있었다. 그렇지만, 그건 너무나 “엄격한” 구문이 필요했기에, 좀더 편안한 transitional DTD를 사용했다.

속성명은 반드시 소문자로

xhtml 이 대소문자를 구분하고, xhtml 은 html 태그로써 오로지 소문자만을 인식하기 때문에, 찾기와 바꾸기를 사용해서, 모든 대문자를 소문자로 바꿔줘야 한다.

모든 속성은 “”(따옴표) 안에 들어와야 한다.

이 작업에 시간이 상당히 소요될 것이며, 습관을 붙여 놓는다면, 많은 시간이 소요되지는 않을 것이다.

빈 태그 : <hr>, <br>, 그리고 <img>

xhtml에서 빈 태그는 허용되지 않는다. 따라서 <hr>과 <br> 태그는 <hr />과 <br />로 대체되어져야만 한다.

네스케이프는 <br/> 태그를 잘못 해석하는 문제가 있다. 왜 그런지는 모르겠지만, <br />로 대체함으로써 문제는 해결되었다.

몇몇 다른 태그들에서(<img> 태그) 위와 같은 문제가 있었다. 그렇기 때문에, <img> 태그를 </img 태그를 통해서 닫기 보다는 <img />와 같이 /> 를 태그의 마지막에 넣기로 하였고, 이 작업은 전부 수작업으로 진행되었다.

웹 사이트가 검증되었다.

공식적인 W3C 검증툴인 xhtml validator 를 사용해서 검증하였고, 몇몇의 에러가 발견되었고, 수작업으로 수정되었다. 대부분의 에러는 </li> 태그가 없다는 것이었다.

변환 툴을 이용하였을까? 우리는 TIDY 라는 툴을 사용할 수도 있었다.

Dave Raggett’s HTML TIDY 는 공짜 유틸리티이다. 상세 설명은 해당 URL 참조.

왜 우리는 Tidy 툴을 사용하지 않았을까? 우리는 “tidy” 보다 더 많은 것을 알고 있기 때문이다.

5. xhtml DTD

출처 (Original Post) : http://www.w3schools.com/xhtml/xhtml_syntax.asp

xhtml 표준은 세가지 형태의 문서의 정의를 가지고 있다.

가장 일반적인 건 xhtml Transitional 이다.

<!DOCTYPE> 는 강제적이다.

xhtml 문서는 세가지의 주요 부분으로 나눌 수 있다.

  • DOCTYPE
  • Head
  • Body

기본 문서의 구조는 아래와 같다.


<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

DOCTYPE 선언은 항상 xhtml 문서의 첫행에 위치해야만 한다.

xhtml 예제

아래는 간결한(최소한의) xhtml 문서의 예제이다.


<!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>

DOCTYPE 선언은 문서의 종류를 정의한다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

문서의 나머지 부분은 아래와 같이 일반적인 HTML과 비슷하다.


<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

3종류의 문서 정의

  • DTD는 SGML로 된 웹페이지를 지정한다.
  • DTD는 HTML과 같은 SGML 응용 프로그램에서 사용되어 진다. 특별한 종류의 Markup 문서에 적용되는 규칙을 지정하기 위해서이며, 요소(element)와 entity를 선언하는 세트로 사용되어진다.
  • xhtml 은 SGML 문서 종류의 정의와 DTD를 지정한다.
  • xhtml DTD 는 정교한(precise), 컴퓨터가 읽을 수 있는 언어(computer-readable language)를 묘사한다(describe). 허용되는 구문과 문법은 xhtml markup을 따른다.

현재는 xhtml 의 문서 종류는 3가지이다.

  • STRICT
  • TRANSITIONAL
  • FRAMESET

xhtml 1.0은 이 3가지 문서 종류를 지정하기 위해서, 3가지의 DTD를 사용한다. Strict, Transitional, 그리고 Frameset이다.

xhtml 1.0 Strict


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

당신이 정말로 깨끗하게 정리하고 싶을 때 (when you really clean markup), 위와 같이 DTD를 사용하면 된다. 위의 예제는 CSS와 같이 사용하면 된다.

xhtml 1.0 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위의 예제는 HTML의 디스플레이 기능과 CSS를 지원하지 않는 브라우저를 사용하기 위해서 사용하면 된다.

xhtml 1.0 Frameset


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

위의 예제는 프레임 페이지에서 사용한다.

4. xhtml 구문

출처 (Original Post) : http://www.w3schools.com/xhtml/xhtml_syntax.asp

xhtml은 깨끗한(clean) HTML 구문을 필요로 한다.

기타 xhtml 구문 법칙 :

  • 속성명은 반드시 소문자로 써야 한다.
  • 속성값은 반드시 따옴표안에 묶여야 한다.
  • 속성의 최소화는 금지되어 있다. (Attribute minimization is forbidden)
  • id 속성은 이름 속성을 대체한다. (The id attribute replaces the name attribute)
  • xhtml DTD는 요소를 강제적으로 정의한다. (The xhtml DTD defines mandatory elements)

속성명은 반드시 소문자로 써야 한다.

아래는 틀린 예이다.


<table WIDTH="100%">

아래는 옳은 예이다.


<table width="100%">

속성값은 반드시 따옴표안에 묶여야 한다.

아래는 틀린 예이다.


<table width=100%>

아래는 옳은 예이다.


<table width="100%">

속성의 최소화는 금지되어 있다. (Attribute Minimization Is Forbidden)

아래는 틀린 예이다.


<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

아래는 옳은 예이다.


<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

아래는 HTML 속성의 최소화가 xhtml 에서 어떻게 적어야 하는지에 관한 표이다.

HTML XHTML
compact compact=”compact”
checked checked=”checked”
declare declare=”declare”
readonly readonly=”readonly”
disabled disabled=”disabled”
selected selected=”selected”
defer defer=”defer”
ismap ismap=”ismap”
nohref nohref=”nohref”
noshade noshade=”noshade”
nowrap nowrap=”nowrap”
multiple multiple=”multiple”
noresize noresize=”noresize”

id 속성은 이름 속성을 대체한다. (The id attribute replaces the name attribute)

html 4.01 은 요소에 들어가는 이름 속성을 a, applet, frame, iframe, img, 그리고 map으로 정의한다. xhtml 이름 속성은 그 방식을 사용하지 않고(deprecated) id를 그 대신 사용한다.

아래는 틀린 예이다.


<img src="picture.gif" name="picture1" />

아래는 옳은 예이다.


<img src="picture.gif" id="picture1" />

Note : 예전 브라우저와 잠시동안 교차동작(interoperate)하기 위해서 당신은 name과 id를 동시에 쓸 수 있다. 완벽하게 속성을 동일하게 줘서, 아래는 그 예이다.


<img src="picture.gif" id="picture1" name="picture1" />

중요한 호환에 관한 노트

xhtml 브라우저를 오늘날의 브라우저와 호환되게 하려면 당신은 “/” 기호앞에 빈칸을 하나 만들어야만 한다.

Lang 속성 (The Lang Attribute)

Lang 속성은 거의 대부분의 xhtml 요소에 적용된다.

요소에 lang 속성을 사용하고자 한다면, 당신은 반드시 xml:lang 속성을 사용해야 한다. 아래는 그 예이다.


<div lang="no" xml:lang="no">Heia Norge!</div>

xhtml 요소의 강제성

모든 xhtml 문서는 반드시 DOCTYPE 을 선언해 주어야 한다. html 의 경우 head와 body 요소만 있고, title 은 head 사이에 있어야 한다.

아래는 xhtml 문서의 최소한 필요한 양식이다.


<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head><body>
</body></html>

Note : DOCTYPE 선언은 xhtml 문서 그 자체에 속하는 건 아니다. xhtml의 요소가 아니기 때문에, 끝나는 태그가 없다.

Note : xmlns 속성은 <html> 태그 안에 위치하며, xhtml 에서는 필요하다. 그러나, w3.org 의 검증은 이 속성의 없음을 불평하지 않는다. 왜냐하면 “xmlns=http://www.w3.org/1999/xhtml” 은 고정된 값(fixed value) 이며, <html> 태그 안에 자동적으로 추가되어지기 때문이다. 당신이 그 추가하지 않았더라도.

3. xhtml과 html의 차이점

출처 (Original Post) : http://www.w3schools.com/xhtml/xhtml_html.asp

당신은 정확한(strict) HTML을 쓰는 걸로 xhtml을 준비할 수 있다.

xhtml을 시작하기 위해서는 어떻게 해야 하나?

xhtml 은 HTML 4.01 표준과 많이 다르지 않다.

그래서, 당신의 코드를 4.01 표준과 맞추는 것은 좋은 출발이 된다.

추가로, 당신은 html code를 소문자로 쓰는 걸 시작해야 하며, 절대로 끝나는 태그를 생략하지 말아야 한다. (예: </p>)

가장 중요한 차이점 :

  • xhtml의 요소는 반드시 적합하게 중첩되어 있어야 한다. (xhtml elements must be properly nested)
  • xhtml의 요소는 반드시 항상 닫혀 있어야 한다.(xhtml elements must always be closed)
  • xhtml의 요소는 반드시 소문자 이어야 한다.
  • xhtml 문서는 반드시 하나의 Root element 만을 가져야 한다.

xhtml의 요소는 반드시 적합하게 중첩되어 있어야 한다.

HTML에서는 몇몇의 요소는 서로 부적합하게 중첩되어 진다. 예:

<b><i>This text is bold and italic</b></i>

xhtml에서는 모든 요소는 서로 적합하게 중첩되어져야만 한다. 예:

<b><i>This text is bold and italic</i></b> 

Note : 중첩된 리스트에서의 일반적인 실수는, 리스트 안쪽에 들어가는 리스트는 반드시 <li>와 </li> tag 안에 들어가야 하는걸 잊는 것이다.

아래는 틀린 예이다.


<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

아래는 옳은 예이다.


<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Tea 다음에 </li>태그가 있음을 확인할 수 있다. 그래야 “옳은” 코드가 된다.

xhtml 요소는 항상 닫혀 있어야 한다.

빈 공간 태그(Non-empty elements) 는 반드시 끝나는 태그를 가져야만 한다.

아래는 틀린 예이다.


<p>This is a paragraph
<p>This is another paragraph

아래는 옳은 예이다.


<p>This is a paragraph</p>
<p>This is another paragraph</p>

빈 요소(Empty Elements) 는 반드시 닫혀있어야 한다.

빈 요소(Empty Elements) 는 끝나는 태그를 가지고 있거나, 시작 태그와 /> 를 같이 써야만 한다.

아래는 틀린 예이다.


A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

아래는 옳은 예이다.


A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

xhtml 요소는 반드시 소문자로 적어야만 한다.

xhtml 사양은 태그 이름과 속성은 반드시 소문자로 적어야 한다고 규정하고 있다.

아래는 틀린 예이다.


<BODY>
<P>This is a paragraph</P>
</BODY>

아래는 옳은 예이다.


<body>
<p>This is a paragraph</p>
</body>

xhtml 문서는 반드시 하나의 루트 요소만을 가져야만 한다.

모든 xhtml 요소는 <html> 루트 요소 안에 중첩되어야만 한다. 모든 요소는 서브(자식) 요소를 가질 수 있다. 서브 요소는 쌍을 이뤄야만 하고, 부모의 요소 안에 정확하게 중첩되어야만 한다. 기본 구문은 아래와 같다.


<html>
<head> ... </head>
<body> ... </body>
</html>