XHTML
XHTML (eXtensible HyperText Markup Language)
- 확장가능한(eXtensible) HTML
- ‘XML 응용으로서의 HTML4를 다시 공식화 한것’이라고 정의. 좀더 원할하게 기계적으로 처리하도록 XML의 형식을 빌어 HTML 4.01을 재정의 하였는데 이것이 바로 XHTML
- HTML 4.01의 후속 버전이 아닌 별개로 분리된 표준
- 기존의 HTML의 다양한 웹 브라우저와 플랫폼 간의 불균일성으로 인한 한계의 대안
- XML을 기반으로 HTML 4.0을 확장하여 향후에도 지속적으로 사용 가능 하도록 만든 독립된 언어
- HTML 4.01에서 표현을 담당하는 부분과 구조부분이 엄격하게 분리되어 보다 명확하고 체계적
- 순차적 마크업의 기능 + 서술적 마크업의 장점
HTML
- HyperText Markup Language의 약자
순차적 마크업(procedural markup)
- 한 문서에 기본 데이터, 구조, 표현 정보가 저장
- 어떻게 시각적으로 표현할 것인가.
- 폰트, 색상, 여백, 줄 간격 등 표현에 관련된 다수의 추가정보
XML
- eXtensible Markup Language의 약자
- 웹에서 구조화된 문서를 전송 할 수 있도록 설계된 표준화된 텍스트 형식
- XML은 인터넷에서 기존에 사용하던 HTML의 한계를 극복하고 SGML의 복잡함을 해결하는 방안으로 HTML에 담겨져 있는 형식적 요소를 완전히 배제하는 방식
- 내 이름은 홍길동 입니다. 내 이름은
홍길동 입니다.서술적 마크업(descriptive markup)
- 기본데이터의 구조(의미)만 가지는 문서
- 문서 구조와 표현 정보를 분리
- 이질적인 환경에서 데이터 교환 형태로도 적합
-
XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다. HTML이 SGML의 응용인 데 반해, 매우 유연한 마크업 언어인 XHTML은 SGML의 제한된 부분집합인 XML의 응용이다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다. XHTML 1.0은 2000년 1월 26일, W3C의 권고안이 되었다. [원본출처 : https://ko.wikipedia.org/wiki/XHTML]
- XML문서의 일종으로서 문법적으로 정확해야한다.
- XML 라이브러리를 이용한 자동화된 처리가 가능하다.
- XHTML 1.0은 2000년 1월 26일, W3C의 권고안이 되었다.
- 2009년 7월 XHTML 2.0의 사양제정 중지
- 2014년 9월 W3C에서 HTML5를 제안 된 권장사항(proposed recommendation)으로 변경
HTML과 XHTML의 차이
요소 사용시 종료태그 생략 불가능
- HTML의 경우 P, TR, TD, LI등 요소명을 사용할 때 종료태그를 생략할 수 있었지만, XHTML에서는 이를 허용하지 않음. 따라서 모든 요소는 반드시 시작과 함께 종료를 표현(한 칸의 공백과 /)해야 함.
<source line><p><img src="images/back.gif" alt="뒤로"> <!-- html -->
<source line><p><img src="images/back.gif" alt="뒤로" /></p> <!-- xhtml -->
요소명과 속성명에 소문자 사용
- HTML의 경우에는 요소명과 속성명에 대소문자를 구분하지 않고 사용했지만, XHTML에서는 모든 요소명과 속성명에 소문자만 사용할 수 있음.
<P><IMG SRC="images/back.gif" alt="뒤로"> <!-- html -->
<p><img src="images/back.gif" alt="뒤로" /></p> <!-- xhtml -->
빈 요소 사용 시 <요소명 /> 형식으로 기술
- HTML의 경우 빈 요소는 시작 태그만 기술해도 되지만, XHTML에서는 모든 요소에 종료의 표현을 기술해야 합니다. 따라서 빈요소는 HTML과 XHTML이 다르게 표현.
<img src="images/back.gif" alt="뒤로"> <!-- html -->
<img src="images/back.gif" alt="뒤로" /> <!-- xhtml -->
속성에 속성값 생략 불가능
- HTML은 몇가지 속성의 경우 속성값을 생략할 수 있지만, XHTML에서는 이러한 단축 표기가 허용되지 않으므로 반드시 속성값을 지정해야 함.
- HTML5에서는 속성값이 없는 속성이 몇몇 존재하므로 확인하여 사용
<select selected>내용</select> <!-- html -->
<select selected="selected">내용</select> <!-- xhtml -->
잘못된 중첩의 사용 불가능
- HTML은 규칙을 느슨하게 적용하여 중첩을 잘못해도 문제가 발생하지 않는 경우가 있었지만 XHTML에서는 잘못된 중첩이 허용 되지 않음.
<p>
<span>
<em>
내용
</span>
</em>
</p> <!-- 잘못된 중첩 -->
<p>
<span>
<em>
내용
</em>
</span>
</p> <!-- 올바른 중첩 -->
모든 속성값에 인용 부호 사용
<img src=cake.jpg alt=케이크> <!-- html -->
<img src="cake.jpg" alt="케이크" /> <!-- xhtml -->
html 기본 문법에 사용하는 기호 <, >, &를Entity Name이나 Entity Code로 변환하여 사용
- https://www.tutorialspoint.com/html/html_entities.htm
- HTML과 XHTML모두 문자 참조(특수 문자)의 경우 Characters Entity Name이나 Characters Entity Code로 변환해야함.
<h1>웹표준 & 웹접근성</h1>
<h1>웹표준 & 웹접근성</h1>
<h1>웹표준 & 웹접근성</h1>
주석은 바르게 사용하고 그 안에 –(더블대시) 사용불가
- 특히 해당 주석에 영역을 구분할 목적으로 더블대시를 반복해서 사용하지 않아야 함.
<!-- 주석 기본형 -->
<!---- 잘못된 주석 ---->
<!-- ******** 유효한 주석 ******** -->
<!-- -------- 유효한 주석 -------- -->
스크립트와 스타일 element에는 type속성이 포함 되어야 한다.
<script type="text/javascript"></script> <!-- javascript -->
<style type="text/css"></style> <!-- css -->
속성값의 여백은 단일 여백으로 취급
- 중복된 여백(space 문자)의 사용은 단일 여백으로 취급하기 때문에 왼쪽과 오른쪽은 같습니다.
<script type="text/javascript"></script>
<script type="text/javascript"></script>
URL에 &를 &로 변경하여 사용 해야 한다.
- &는 XML Entity(XML 문서의 모든 표현단위)의 시작으로 인식되기 때문
<a href="http://www.naver.com/index.jsp?a=10&b=20&c=30"> 링크 </a>
HTML5 시대에 XHTML?
- XHTML문법을 지켜서 웹페이지를 만들면 자동으로 HTML5문법이 지켜진다
- HTML5문법으로 웹페이지를 만들면 XHTML 문법은 지켜지지 않는다