HTML과 XHTML
XHTML(EXtensible HTML)
XHTML은 EXtensible HTML을 의미합니다.
XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있습니다.
좀 더 엄격한 버전인 XHTML을 사용하는 이유
오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있습니다.
따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작합니다.
XHTML 문서는 하나의 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. 모든 속성값을 따옴표로 둘러쌉니다.
[출처] TCPSCHOOL.com
'IT > Web' 카테고리의 다른 글
| HTML5 의미 요소 (0) | 2020.01.31 |
|---|---|
| HTML5 개요 (0) | 2020.01.31 |
| HTML과 자바스크립트 (0) | 2020.01.31 |
| HTML과 CSS (0) | 2020.01.30 |
| HTML 입력 양식 (0) | 2020.01.23 |
댓글