offfff

HTML XHTML 본문

프로그래밍

HTML XHTML

offfff 2016. 9. 17. 09:00

What Is XHTML?


- XHTML은 eXtensible HyperText Markup Language의 약어이다.

- XHTML은 HTML과 거의 동일하다.

- XHTML은 HTML보다 더 엄격하다.

- XHTML은 XML 어플리케이션으로 정의된 HTML이다.

- XHTML은 대부분의 주요 브라우저가 지원을 한다.




Why XHTML?


인터넷 상의 많은 페이지는 좋지 않은 HTML을 포함하고 있다.

아래 HTML 코드는 HTML의 규칙을 따르지 않았음에도 불구하고, 대부분의 브라우저에서 잘 동작한다.


<html>

<head>

<title>This is bad HTML</title>


<body>

<h1> Bad HTML

<p>This is paragraph

</body>


많은 종류의 웹 브라우저가 사용되고 있다.

컴퓨터, 스마트 폰, 그리고 다른 작은 디바이스 등 다양한 환경에서 웹 브라우저가 동작한다.

좋지 않은 HTML문서를 번역하는데 , 작은 장치일수록 리소스나 파워에 제한이 있다.

XML은 엄격하게 문법을 지켜야 하는 문서에 쓰이는 마크업 언어이다.

HTML과 XML의 장점을 결합 한 것이 XHTML이다.

HTML을 XML로 다시 디자인 한 것이 XHTML이다.




The Most Important Differences from HTML?


Document Structure

- XHTML은 DOCTYPE를 의무적으로 작성해야 한다.

- <html> 태그의 xmlns 속성이 의무적이다.

- <html>, <head>, <title>, <body> 구조를 꼭 지켜야 한다.


XHTML elements

- element가 적절히 nested되게 작성해야 한다.

- 시작 태그와 끝 태그를 잘 써야한다.

- 소문자로만 작성되어야 한다.

- 하나의 root element만 가져야 한다.


XHTML Attributes

- 속성이름은 소문자로만 작성해야 한다.

- 속성 값은 반드시 따옴표를 사용한다.

- 속성 값을 생략하지 않는다.




<!DOCTYPE ...> Is Mandatory


XHTML 문서는 DOCTYPE으로 XHTML을 꼭 선언해 주어야 한다.

XHTML의 DOCTYPE 선언은 여기를 참조한다.

<html>, <head>, <title>, <body> element들은 무조건 적어야 하며,

<html>에는 xmlns 속성을 반드시 적어야 한다.

아래 예제는 필요한 최소한의 element로 작성된 XHTML document의 소스코드이다.


<!DOCTPYE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>Title of document</title>

</head>


<body>

... some content ...

</body>


</html>




XHTML Element Must Be Properly Nested(끝 태그 작성 순서를 올바르게 하자)


HTML에서 아래와 같은 실수를 하는 경우가 있다.


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


XHTML은 엄격하게 아래와 같이 올바른 표현을 사용해야 한다.


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




XHTML Element Must Be Always Be Closed(끝 태그를 잘 작성하자)


아래는 틀린 예이다.


<p>This is a paragraph

<p>This is another paragraph


다음이 맞는 표현이다.


<p>This is a paragraph</p>

<p>This is another paragraph</p>




Empty Elements Must Also Be Closed(empty element는 꼭 아래와 같이 닫는다)


아래는 틀린 예이다.


<br>

<hr>

<img src="happy.gif" alt="Happy face">


다음이 맞는 표현이다.


<br />

<hr />

<img src="happy.gif" alt="Happy face" />



XHTML Element and Attribute Names Must Be In Lower Case(요소, 속성 이름은 무조건 소문자로)


아래는 틀린 예이다.


<BODY>

<P>This is Paragraph</p>

<table WIDTH="100%">

</BODY>


다음이 맞는 표현이다.


<body>

<p>This is Paragraph</p>

<table width="100%">

</body>




Attribute Values Must Be Quoted(속성에 따옴표 쓰기)


아래는 틀린 예이다.


<table width=100%>


다음이 맞는 표현이다.


<table width="100%">




Attribute Minimization is Forbidden(속성값을 생략하지 않는다.)


아래는 틀린 예이다.


<input type="checkbox" name="vehicle" value="car" checked />


다음이 맞는 표현이다.


<input type="checkbox" name="vehicle" value="car" checked="checked" />




HTML을 XHTML로 변환하는 방법


1. 모든 페이지의 첫 줄에는 XHTML의 <!DOCTYPE >을 선언한다.

2. 모든 페이지의 html element의 속성으로 xmlns를 추가한다.

3. 모든 element의 이름을 소문자로 바꾼다.

4. 모든 empty element를 닫는다.

5. 모든 속성 이름을 소문자로 적는다.

6. 모든 속성 값을 따옴표로 처리한다.




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_xhtml.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML Form Elements  (0) 2016.09.19
HTML Forms  (0) 2016.09.18
HTML URL 인코딩(HTML URL Encode)  (1) 2016.09.16
HTML 케릭터 셋, 엔코딩(HTML Charset)  (0) 2016.09.15
HTML 심볼(HTML Symbols)  (0) 2016.09.14
'프로그래밍' Related Articles more