-
728x90반응형
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 txt.</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="expalnation" />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. 모든 속성값을 따옴표로 둘러싼다.
728x90반응형'Mark Up > Html' 카테고리의 다른 글
Input 요소의 속성 (0) 2018.10.10 Input 요소의 타입 (0) 2018.10.05 HTML 과 자바스크립트 (0) 2018.10.05 Input 요소의 속성 (0) 2018.10.05 HTML 과 CSS (0) 2018.10.04
