HTML 입문 | HTML 확장 | HTML과 XHTML

Tags:

XHTML(EXtensible HTML)

XHTML은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다.

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

최근 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다.
따라서, 부정확한 HTML 문법을 지원하기에 필요한 자원이 부족한 환경이 점차 생겨나고 있다.
XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다.

XHTML에서의 변경 사항

문서의 구조적 측면

  • XHTML DOCTYPE을 반드시 명시해야 한다.
  • <html> 태그의 xmlns 속성을 반드시 명시해야 한다.
  • <html>, <head>, <title>, <body>태그를 반드시 사용해야 한다.

문서의 요소적 측면

  • 모든 태그는 반드시 닫혀야 한다.
  • 모든 태그는 순서대로 닫혀야 한다.
  • 모든 요소는 반드시 소문자로 사용되어야 한다.
  • XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다.

문서의 속성적 측면

  • 속성 이름은 반드시 소문자로 사용되어야 한다.
  • 속성값은 반드시 따옴표로 감싸야 한다.
  • 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다.

HTML과 XHTML의 차이점

다음 예제들은 HTML과 XHTML의 차이점을 보여주고 있다.
XHTML에서 작성되지 말아야 할 오류이다.

  • 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 한다.
HTML  : <br>
XHTML : <br />
  • 비어있지 않은 요소는 반드시 종료 태그를 가져야 한다.
HTML  : <p>첫 번째 문장</p><p>두 번째 문장
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>
  • 태그 요소들은 반드시 열린 순서대로 닫혀야 한다.
HTML  : <em><strong>This is some text.</em></strong>
XHTML : <em><strong>This is some text.</strong></em>
  • 이미지 태그에는 반드시 alt 속성이 기술되어야 한다.
HTML  : <img src="devkuma_logo.png" />
XHTML : <img src="devkuma_logo.png" alt="데브쿠마" />
  • 모든 텍스트(text)는 반드시 태그로 감싸야 한다.
HTML  : <body>본문에 사용되는 텍스트 단락</body>
XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>
  • 속성 값은 반드시 따옴표로 감싸야 한다.
HTML  : <td rowspan=3>
XHTML : <td rowspan="3">
  • 태그나 속성은 반드시 소문자만 사용해야 한다.
HTML  : <BODY><P>태그과 속성은</P></BODY>
XHTML : <body><p>반드시, 소문자만을 사용해야 한다.</p></body>
  • 속성값 생략이 되지 않아, 반드시 속성값을 명시해야 한다.
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/2018/xhtml">
  2. xmlns 속성을 추가한다.
  3. 모든 태그 이름을 소문자로 바꿔준다.
  4. 모든 빈 태그를 닫아준다.
  5. 모든 속성 이름을 소문자로 바꿔준다.
  6. 모든 속성값을 따옴표로 둘러쌓아 준다.

참조




최종 수정 : 2021-08-27