출처: https://www.tcpschool.com/html/html_expand_xhtml
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 문서로 변환하는 방법
1. 첫줄에 다음 코드를 추가합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. xmlns 속성을 추가합니다.
3. 모든 태그 이름을 소문자로 바꿔줍니다.
4. 모든 빈 태그를 닫아줍니다.
5. 모든 속성 이름을 소문자로 바꿔줍니다.
6. 모든 속성값을 따옴표로 둘러쌉니다.
출처: https://ofcourse.kr/html-course/HTML5%EC%99%80-XHTML
HTML5와 XHTML
개요
HTML은 한 회사가 단독으로 제작한 언어가 아니며, 상용 되고 있는 대다수의 브라우저들이 독자적으로 파일을 해석하므로 표준이 잘 정해져 있지 않았습니다.
신기술을 사용하기 위해서 Adobe Flash같은 플러그인 형태의 기술을 사용하다가, 이를 HTML언어 자체적으로 표준화 한 것이 HTML5입니다.
HTML5 등장 이전에는 HTML4나 XHTML을 주로 사용했으며, 자세한 내용은 HTML의 역사를 검색하며 찾아보세요.
HTML5 등장 이전에도 표준(문서 규격)이 전혀 없지는 않았는데, 그 이전에는 주로 XHTML이나 HTML4를 사용했습니다.
웹을 처음 공부하신다면, HTML5를 사용하시면 됩니다.
XHTML
XML + HTML의 합성어로, HTML보다 엄격한 문법을 가집니다.
대표적으로 <br> 처럼 닫는 태그가 없는 태그는 끝에 공백과 함께 /> 를 붙여주어야 하고, 태그가 트리구조로 이루어져야 합니다.
- 틀림: <br> (X)
- 옳음: <br /> (O)
- 틀림: <p>첫 번째 문장<p>두 번째 문장 (X)
- 옳음: <p>첫 번째 문장</p><p>두 번째 문장</p> (O)
자세한 내용은 위키백과 XHTML 항목을 참고하시기 바랍니다.
DOCTYPE
HTML의 문서 규격을 표시 할 때에는 DOCTYPE 이라는 것을 통해 표현하게 됩니다.
HTML5 문서는 아래와 같은 코드를 문서 최상단에 쓰면서 HTML5임을 정의합니다.
<!doctype html>
XHTML 문서는 아래와 같은 DOCTYPE을 사용합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
DOCTYPE을 지정하지 않을 경우 Internet Explorer 에서 문서를 하위 엔진으로 해석하는 등의 문제가 발생할 수 있음으로 꼭 지정해 주도록 합시다.
예시
<!doctype html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document
</body>
</html>'프로그램 개발(분석, 설계, 코딩, 배포) > 2.1.1 web_html' 카테고리의 다른 글
| 코딩 없이 ChatGPT를 이용해서 웹페이지 만들기 (0) | 2023.12.09 |
|---|---|
| A4 용지 크기의 페이지 만들기 (0) | 2023.12.09 |
| [HTML/CSS/JS] A4 사이즈로 페이지 인쇄하기 (0) | 2023.12.09 |
| html iframe object embed 차이 (0) | 2023.11.20 |
| HTML 문서 꾸미기 (0) | 2023.09.24 |
