XHTML은 eXtensible HyperText Markup Language의 약자이다. HTML을 대체하기 위한 목적으로 만들어졌지만 HTML 4.01 규약에 "거의" 준한다.
쉽게 말하자면 XHTML은 HTML에 비해 일반 HTML에 비해 좀더 명확하고 구조적인 특징을 가지고 있다.
HTML은 정해진 태그 집합만을 사용하는 정적인 마크업 언어라면, XHTML은 XML(Extensible Markup Language: 확장 마크업 언어)로 정의된 단 하나의 집합만을 사용한다.
XHTML은 단순히 HTML4를 업그레이드한 것이 아니라 XML 애플리케이션을 가장 폭넓게 사용하는 웹 페이지에 적용할 수 있다는 데에서 의미를 찾을 수 있다.
XML 어플리케이션이 사용 가능하다는 말은 바로 기계가 이해할 수 있는 언어라는 것이다.
기계가 이해하려면 우리가 흔히 색상, 글꼴 형식, 레이아웃 등 눈으로 보는 표현적인 요소가 완전히 배제되어 있다는 것이다.
HTML4.01 보다 더 표현과 구조가 엄격하게 분리되고 있다는 뜻이다.
다만 브라우저 지원 문제가 걸림돌인데, 인터넷 익스플로러도 XML을 충분히 지원한다고 보기에 아직 부족한 면을 찾을 수 있다.
XHTML은 HTML 문서의 하위 호환성유지와 함께 더욱 강력하게 확장할 수 있도록 해주는 것이다.
XHTML과 CSS 기반 사이트는 이러한 수고를 덜고 유지비용이 감소
디자인 부분을 CSS 파일로 분리해낸다면 훨씬 더 간단해진다.
지금까지 만들어온 일반적인 HTML 코드를 보면 아마도 실제 내용보다 디자인 요소가 차지하는 부분이 더 클 것이다.
문서 내 이러한 디자인 요소들은 파일의 용량이 키움에 따라, 웹페이지 로딩과 렌더링 속도를 느리게 하고 있다.
대부분의 웹페이지 들이 <html>로 시작하여 <head>와 <body> 태그를 사용하여 웹페이지를 표현한다.
그러나 웹페이지를 표현 하는 방식을 제대로 표현 하기 위해 웹 브라우저가 적절한 문서 형태를 표기하도록 할 필요가 있다.
<즉 문서의 루트 요소 앞에는 공백 없이 DOCTYPE 선언>
선언은 XHTML에 대한 세 DTD(DocumentType Definition) 파일(strict, transitional, frameset) 중 하나를 참조해야 한다.
1) HTML 2.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
2) HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
3) HTML 4.01 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
4) XHTML 1.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
5) XHTML 1.1 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
현재상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다. * *
정확한 문서 구조 준수
<html xmlns="http://www.w3.org/1999/xhtml">
모든 요소는 완벽하게 중첩되어야 한다.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
모든 속성 값은 인용 부호 "(" 나 ")"로 묶어야 한다.
<a href=http://sample.com>틀린 경우</A>
<a href="http://sample.com" >맞는 경우</a>
모든 요소와 속성은 소문자여야 한다
<A href="http://sample.com" >틀린 경우</A>
<a href="http://sample.com" >맞는 경우</a>
모든 요소는 닫아야 한다
<img src="http://sample.com/wrong.jpg" >
<img src="http://sample.com/right.jpg" />
모든 속성값은 속성이 함께 선언되어야 한다
<option value="wrong" selected>틀린 경우</option>
<option value="right" selected="selected">맞는 경우</option>
모든 script 및 style 요소에는 type 속성이 포함되어야 한다*.\*
<script type="text/javascript" language="javscript"></script>
<style type="text/css"></style>
모든 img 및 area 요소에는 alt 속성이 포함되어야 한다*.\*
모든 SCRIPT{}내의 태그는 Escape 시켜야 한다*.\*
<script type="text/javascript">
<!--// 틀린 표현!
document.write("</P>");
// -->
</script>
<script type="text/javascript">
<!---// 맞는 표현!
document.write("<\/P>");
// -->
</script>
XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, <과 &와 같은 개체(entities)들 은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로
CDATA로 마크업 하여 표시하는 게 좋다.
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
모든 문서 내 URL에서 &를 쓰면 안 된다.\*
<!---에러! --> <a href="foo.cgi?chapter=1§ion=2" >...</a>
<!---적합! --> <a href="foo.cgi?chapter=1&section=2" >...</a>
: <div>와 <span>은 둘다 그루핑에 사용되는 엘리먼트이지만 <div>는 block이고
<span>은 inline이라는 큰 차이점이 있다.
<div>를 이용하면 뒤에 개행이 이루어 지고
<span>을 이용하면 개행이 이루어 지지 않는다.
<div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd> 등이 block들이고 <a>, <img>,
<select>, <input> 등이 대표적인 inline 엘리먼트들 이다.
<h1> ~ <h6> 까지 6단계의 heading태그
문단은 <p>로 구분을 하고 간격을 CSS로 제어하게 되면 브라우져와 상관없이 일관된 디자인을 유지 <p>를 사용할 때에는 반드시 닫는 태그도 사용해 주어야 한다.
<p> 첫번째 문단
<p> 두번째 문단
<p> 세번째 문단
위와 같이 단락의 경계를 <p>로 구분 하는 것이 아니라 하나의 문단을 <p>와 </p>로 감싸는 식으로 작성을 해야 한다.
<p>첫번째 문단</p>
<p>두번째 문단</p>
<p>세번째 문단</p>
그리고 <p>는 하위에 block요소를 포함 할 수가 없다. 텍스트나 이미지와 같은 inline요소만을 하위에 포함 할 수 있기 때문에 주의해서 사용해야 한다.
<em>과 <strong>은 문장안에서 강조를 나타낸다. 보통의 브라우져에서 <em>은 이탤릭으로, <strong>은 볼드체로 나타나게 된다.
<dfn>태그는 정의를 나타낼 때에 사용된다.
<code>는 컴퓨터 코드를 나타내는 태그이고 <samp>는 코드의 결과 출력물을 나타낼때에 사용한다.
<kbd>는 유저의 키보드 입력을 나타내고, <var>는 프로그램에서의 변수를 나타낸다.
<kbd>Enter</kbd>키를 누르세요
<cite>는 인용이나 출처를 밝힐 때에 사용한다.
<abbr>는 축약어를 나타내고 <acronym>은 두문자어를 나타낸다.
<blockquote>는 block요소의 인용문이고
<q>는 inline요소의 인용을 나타낸다. 보통 <blockquote>는 인덴트를 해서 보여주게 되고
<q>는 인용문 앞 뒤로 따옴표를 나타내 준다.
위첨자나 아래첨자를 나타내고자 할때 하용한다.
x<sup>2</sup> + 4x + 4 = (x+2)<sup>2</sup>
이 태그를 사용하게되면 공란도 갯수에 맞게 다 나오고 글자폭이 일정한 폰트로 화면에 나오게 된다.
소스 코드등을 나타낼 때에 많이 사용한다. 단, 자동 줄바꿈이 되지 않기 때문에 너비가 제한 적일 때에는 주의해서 사용해야 한다.
<pre class="code">function menuOn(imgEl)
{ imgEl.src = imgEl.src.replace(".gif", "_on.gif"); }function menuOut(imgEl)
{ imgEl.src = imgEl.src.replace("_on.gif", ".gif"); }</pre>
문서에 <ins>새로 추가</ins>되거나 <del>삭제된 내용</del>을 표시 할 수 있습니다. 보통 <ins>는 밑줄을, <del>은 취소선으로 표현이 된다.
Unordered List
<ul>은 하위로 <li> 엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 불렛이 나타나게 된다.
Ordered List
<ol>은 하위로 <li> 엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 자동적으로 숫자가 나오게 된다.
Definition List
<dl>은 하위로 <dt>와 <dd>엘리먼트를 갖게 된다. <dt>는 term을 <dd>는 definition을 나타낸다.