..

Search

26) HTML과 XHTML

HTML과 XHTML


XHTML(EXtensible HTML)

XHTML은 EXtensible HTML을 의미합니다.

XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있습니다.


좀 더 엄격한 버전인 XHTML을 사용하는 이유

오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있습니다.

따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작합니다.

XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해집니다.

 

XML 수업 확인하러 가기 =>


XHTML에서의 변경 사항

 

문서의 구조적 측면

- XHTML DOCTYPE을 반드시 명시해야 합니다.

- <html>태그의 xmlns 속성을 반드시 명시해야 합니다.

- <html>, <head>, <title>, <body>태그를 반드시 사용해야 합니다.

 

문서의 요소적 측면

- 모든 태그는 반드시 닫혀야 합니다.

- 모든 태그는 순서대로 닫혀야 합니다.

- 모든 요소는 반드시 소문자로 사용되어야 합니다.

- XHTML 문서는 반드시 하나의 root 요소를 포함해야 합니다.

 

문서의 속성적 측면

- 속성 이름은 반드시 소문자로 사용되어야 합니다.

- 속성값은 반드시 따옴표로 감싸야 합니다.

- 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 합니다.


HTML과 XHTML의 차이점

다음 예제들은 HTML과 XHTML의 차이점을 보여주고 있습니다.

 

1. 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 합니다.

예제

HTML  : <hr>

XHTML : <hr />

 

2. 비어있지 않은 요소는 반드시 종료 태그를 가져야 합니다.

예제

HTML  : <p>첫 번째 문장</p><p>두 번째 문장

XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>

 

3. 요소들은 반드시 열린 순서대로 닫혀야 합니다.

예제

HTML  : <em><p>This is some text.</em></p>

XHTML : <em><p>This is some text.</p></em>

 

4. <img>태그에는 반드시 alt 속성이 기술되어야 합니다.

예제

HTML  : <img src="alternative.png" />

XHTML : <img src="alternative.png" alt="explanation" />

 

5. 모든 텍스트(text)는 반드시 태그로 감싸야 합니다.

예제

HTML  : <body>본문에 사용되는 텍스트 단락</body>

XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>

 

6. 속성값은 반드시 따옴표로 감싸야 합니다.

예제

HTML  : <td rowspan=3>

XHTML : <td rowspan="3">

 

7. 태그 이름이나 속성 이름에는 반드시 소문자만을 사용해야 합니다.

예제

HTML  : <BODY><P>태그 이름과 태그 속성은</P></BODY>

XHTML : <body><p>반드시 소문자만을 사용하자.</p></body>

 

8. 속성값 생략이 없어졌으므로, 반드시 속성값을 명시해야 합니다.

예제

HTML  : <textarea readonly>읽기만 가능합니다.</textarea>

XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>

 

위에서 살펴본 모든 HTML 예제는 XHTML 기준에는 맞지 않지만, HTML에서는 모두 정상적으로 동작합니다.

HTML 문서를 XHTML 문서로 변환하는 방법

1. 첫줄에 다음 코드를 추가합니다.

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

2. xmlns 속성을 추가합니다.

3. 모든 태그 이름을 소문자로 바꿔줍니다.

4. 모든 빈 태그를 닫아줍니다.

5. 모든 속성 이름을 소문자로 바꿔줍니다.

6. 모든 속성값을 따옴표로 둘러쌉니다.


연습문제