XHTML(EXtensible HyperText Markup Language)란?
XHTML은 HTML과 유사하지만, 보다 엄격한 문법 규칙을 적용한 마크업 언어입니다. XML 기반으로 작성되기 때문에 문서의 구조적 일관성을 유지할 수 있으며, 다양한 디바이스 및 브라우저 환경에서도 안정적으로 작동하는 장점이 있습니다.
XHTML을 사용하는 이유는?
오늘날 웹 콘텐츠는 다양한 플랫폼과 기기에서 활용됩니다. 하지만 기존 HTML은 브라우저별 해석 방식이 달라 오류를 포함한 코드도 작동하는 경우가 많았습니다. XHTML은 문법적 정확성을 요구하기 때문에 웹 문서를 보다 체계적으로 작성할 수 있으며, 표준 XML 파서를 활용한 자동화된 데이터 처리가 가능해집니다.
XHTML과 HTML의 차이점
1. 문서 구조의 차이
XHTML 문서는 다음과 같은 요소를 필수적으로 포함해야 합니다.
- DOCTYPE 선언이 반드시 필요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html> 태그에 xmlns 속성 추가 필수
<html xmlns="http://www.w3.org/1999/xhtml">
- <html>, <head>, <title>, <body> 태그는 반드시 포함되어야 합니다.
2. 문법적인 차이
✅ 모든 태그는 반드시 닫혀야 함
HTML에서는 일부 태그를 닫지 않아도 브라우저에서 자동으로 처리하지만, XHTML에서는 모든 태그를 명확하게 닫아야 합니다.
<!-- HTML -->
<hr>
<!-- XHTML -->
<hr />
✅ 태그는 반드시 열린 순서대로 닫아야 함
HTML에서는 일부 잘못된 태그 구조도 작동할 수 있지만, XHTML에서는 엄격하게 순서를 지켜야 합니다.
<!-- HTML (잘못된 예제) -->
<em><p>이 문장은 강조됩니다.</em></p>
<!-- XHTML (올바른 예제) -->
<em><p>이 문장은 강조됩니다.</p></em>
✅ 태그와 속성은 반드시 소문자로 작성해야 함
XHTML에서는 태그 및 속성 이름을 반드시 소문자로 작성해야 합니다.
<!-- HTML -->
<BODY><P>대문자로 작성된 태그</P></BODY>
<!-- XHTML -->
<body><p>모든 태그는 소문자로 작성해야 합니다.</p></body>
✅ 속성값은 항상 따옴표로 감싸야 함
HTML에서는 속성값을 생략할 수 있지만, XHTML에서는 모든 속성값을 반드시 따옴표로 감싸야 합니다.
<!-- HTML -->
<td rowspan=3>
<!-- XHTML -->
<td rowspan="3">
✅ 속성값을 생략할 수 없음
HTML에서는 readonly와 같은 속성값을 생략할 수 있지만, XHTML에서는 반드시 값을 명시해야 합니다.
<!-- HTML -->
<textarea readonly>읽기 전용</textarea>
<!-- XHTML -->
<textarea readonly="readonly">읽기 전용</textarea>
✅ <img> 태그에는 반드시 alt 속성을 추가해야 함
XHTML에서는 이미지 태그에 alt 속성을 필수로 포함해야 합니다.
<!-- HTML -->
<img src="image.png" />
<!-- XHTML -->
<img src="image.png" alt="이미지 설명" />HTML을 XHTML로 변환하는 방법
기존 HTML 문서를 XHTML 문법에 맞게 변환하려면 다음 과정을 따르면 됩니다.
1. DOCTYPE 선언 추가
문서의 맨 위에 XHTML을 선언하는 DOCTYPE을 추가합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2. <html> 태그에 xmlns 속성 추가
<html xmlns="http://www.w3.org/1999/xhtml">3. 모든 태그와 속성을 소문자로 변경
HTML에서 대문자로 작성된 태그나 속성이 있다면 소문자로 바꿉니다.
4. 빈 태그는 닫아주기
<br>, <hr>, <img> 등의 태그는 <br />, <hr />, <img /> 형태로 닫아줍니다.
5. 모든 속성값을 따옴표로 감싸기
속성값이 있는 태그에서 rowspan=3 → rowspan="3"처럼 따옴표를 추가합니다.
6. 속성값을 생략하지 않도록 수정
예를 들어, checked 속성은 checked="checked"로 변경합니다.
XHTML은 엄격한 문법을 요구하지만, 그만큼 문서의 안정성과 호환성을 높이는 역할을 합니다.
현재 HTML5가 주로 사용되지만, XHTML의 문법적 원칙을 따르면 보다 깔끔하고 유지보수하기 쉬운 코드 작성이 가능합니다.
HTML을 보다 구조적으로 작성하고 싶다면 XHTML 스타일을 참고해보세요!
'Web > html' 카테고리의 다른 글
| HTML5 - 변경사항 (2) | 2025.02.02 |
|---|---|
| HTML5 - 개요 (1) | 2025.02.01 |
| HTML 확장 - HTML과 자바스크립트 (1) | 2025.01.30 |
| HTML 확장 - HTML과 CSS (1) | 2025.01.29 |
| HTML 입력 양식 - Input 요소의 속성 (0) | 2025.01.28 |