HTML5을 배우기 전에 현재 가장 많이 사용되고 있는 XHTML에 대한 이해가 더 필요해 보인다.
HTML 버전이 중요한 것이 아니라 현재 가장 표준화 된 방식을 사용해서 코드를 작성하면 HTML5가 도입되더라도 코드의 변경은 거의 없어보인다.
만약, HTML5를 도입하게 된다면 클라이언트 입장에서는 많이 달라지는게 없지만 개발자 입장에서 코딩하기가 조금 더 수월해질 것이다.
1. XHTML
XHTML(eXtensible HyperText Markup Language)?
1) HTML4.01 보다 표현과 구조와 엄격하게 분리되었다.
2) HTML 문서의 하위 호환성을 유지하며 더욱 강력하게 확장되었다.
3) 표현과 구조를 분리하여 더욱 구조화된 문서 작성을 가능케 하며 이로 인해 가독성 또한 높아진다.
- 현재 naver가 XHTML1.0(Transitional)을 사용한다.
- Daum, Google 등은 html5 선언을 사용하지만 html5에 의존성 있는 태그는 사용하지 않는다.
1.1 올바른 DOCTYPE 사용
문서의 루트 요소 앞에서는 공백없이 DOCTYPE 선언이 있어야 하며, 이 선언은 XHTML에 대한 3개의 DTD(Document Type Definition) 파일(strict, transitional, frameset)중 하나를 참조해야 한다.
DOCTYPE 코드는 일반형식(Transitional)과 엄격한 형식(Strict)으로 나누어져 있다.
DOCTYPE을 규정하는 가장 좋은 방법은 Strict 형식을 사용하는 것이지만, 아직 브라우저 호환성 때문에 <embed>나 비표준 태그를 사용해야할 필요가 있으므로 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.
- 네이버 HTML 선언 방식
<!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/1999/xhtml" lang="ko" xml:lang="ko" xmlns:ie="">
- DTD의 선택
DTD는 문서의 작성방법과 여러 태그네임과 속성등을 결정 짓기 때문에 선택에 있어서 신중을 기할 필요가 있다.
DTD를 선택한다는 것은 정해진 문법 규약을 따르겠다는 의미기 때문에 선택한 DTD에 따라서 표준이거나 비표준이 아니고 반드시 XHTML을 사용할 필요는 없다. 그리고 XHTML을 사용하게 된다면 XML 문법을 완벽하게 지켜서 페이지를 제작해야 하기 때문에 그러한 준비가 되어 있지 않은 상황이라면 XHTML을 사용하는 것보다는 HTML을 사용하는 것이 더 바람직하다.
1.2 XHTML 일반 문법 준수
1) 문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
2) 모든 요소는 완벽하게 중첩되어야 한다.
틀린 예제) <p>This is a <i>bad example.</p></i>
맞는 예제) <p>This is a <i>good example.</i></p>
3) 모든 속성 값은 인용부호(", ')로 묶어야 한다.
틀린 예제) <a href=http://sample.com>틀린 경우</A>
맞는 예제) <a href="http://sample.com">맞는 경우</a>
4) 모든 요소와 속성은 소문자여야 한다.
XML은 대소문자를 구별하므로 대소문자를 구분하여 작성하여야 한다.
5) 모든 요소는 닫아야 한다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다.
<br>은 잘못된 것이며 <br></br> 또는 <br />이 올바른 형식이다.
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다. (예: <br/> 가 아니라 <br />)
6) 모든 속성값은 속성이 함께 선언되어야 한다.
XML은 속성의 최소화를 지원하지 않으므로 속성 값의 짝들은 모두 작성되어야 한다.
7) 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
language 속성이 사용되지 않는 HTML4 이후로는 script 요소의 type 속성을 반드시 지정해야 한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
8) 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
9) 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
자바 스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어 있다.
HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료 태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.
<script type="text/javascript">
<!?
// 맞는 표현!
document.write("<\/P>");
// -->
</script>
XHTML에서 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, <과 &와 같은 개체들은 XML 프로세서에 의해 각각 <과 &로의 개체 참조로서 인식되므로 CDATA로 마크업 하여 표시하는게 좋다.
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
10) 모든 문서 내 URL에서 &를 쓰면 안 된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으로 인식하기 때문에 생기는 문제이다.
HTML 문서 내에서만 &를 &로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에서는 &를 써야 한다.
웹 서버에서는 &가 아니라 &만을 인식하기 때문이다.
2. 구조적 XHTML 사용 방법
XHTML을 작성함에 있어서 가장 중요하게 생각하고 있어야 하는 것은 "의미에 맞는 태그를 사용"하는 것이다.
2.1 잘못 사용하고 있는 태그
1) 무분별한 테이블 사용
<table>은 행과 열이 있는 2차원의 데이터를 표시하는데 사용되는 태그이지, 구성요소를 구분하는데 사용되는 태그가 아니다.
2) 잘못된 위치, 태그, 스크립트 사용
불필요한 테이블을 없애고 중앙 정렬이나 여백을 없애는 것과 같은 디자인적인 요소를 CSS로 처리하여 간결하고 의미에 맞는 마크업을 해야한다.
2.2 그룹 요소 (div, span)
페이지를 제작할 때에는 각각의 의미를 갖고 있는 컨텐츠를 묶거나 표시를 해줄 필요가 있다.
이러할 때에 사용하는 태그가 <div>와 <span>이다.
의미에 맞는 태그를 사용해서 페이지를 제작한 다음에는 <div>나 <span>을 이용해서 단위별로 구분을 해주어야 한다.
1) block과 inline
block과 inline의 차이는 엘리먼트 뒤에 개행이 이루어지는지로 구분할 수 있다.
<div>를 이용하면 뒤에 개행이 이루어 지고 <span>을 이용하면 개행이 이루어 지지 않는다.
<div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>등이 block들이고 <a>, <img>, <select>, <input> 등이 대표적인 inline 엘리먼트들이다.
2.3 표제
Heading 태그는 각 부분에서 중요한 역할을 하는 제목들을 표시할 때에 사용하게 되고, <h1>~<h6>까지 6단계의 heading 태그가 있다.
페이지의 한 부분에서 가장 중요한 제목을 <h1>으로 묶어주게 되고 그 아래 중요도를 갖는 것은 <h2>, <h3>등을 이용해서 제목을 표기해 주게된다.
주의할 것은 <h1>의 하위 heading은 <h2>여야지 <h3>나 <h4>와 같이 단계를 건너뛰는 것은 좋지 않다.
2.4 문단
<p>태그는 문단을 나타낼 때 사용한다. <p> 태그의 간격이 브라우져 별로 다르다고 하여 <br />을 사용하면 안되고 문단은 <p>로 구분을 하고 간격을 CSS로 제어하는 것이 올바른 마크업 방법이다.
<p>를 사용할 때에는 반드시 닫는 태그도 사용해주어야 하며, <p>는 하위에 block 요소를 포함할 수 없기 때문에 주의해서 사용해야 한다.
2.5 구문(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)
1) 강조 : em, strong
<em>과 <strong>은 문장안에서 강조를 나타낸다. 보통 브라우져에서 <em>은 이탤릭으로, <strong>은 볼드체로 나타내게 된다.
문장안에서 중요도가 있을 때에는 <em>과 <strong>을 사용해야 하고 단지 이탤릭이나 볼드를 표현하고자 할 때에는 <i>와 <b>를 사용해야 한다.
2) 정의
<dfn>태그는 정의를 나타낼 때에 사용된다.
3) 코드
<code>는 컴퓨터 코드를 나타내는 태그이고 <samp>는 코드의 결과 출력물을 나타낼때 사용한다.
4) 값의 표시
<kbd>는 유저의 키보드 입력을 나타내고, <var>는 프로그램에서의 변수를 나타낸다.
5) 출처
<cite>는 인용이나 출처를 밝힐 때에 사용한다.
6) 축약
<abbr>는 축약어를 나타내고 <acronym>은 두문자어를 나타낸다. 약어 그대로 발음하는 것은 <acronym>, 한글자씩 읽는 것은 <abbr>을 사용한다.
7) 인용 : blockquote, q
다른 인용문을 표시할 때에 사용한다. <blockquote>는 block요소의 인용문이고 <q>는 inline 요소의 인용을 나타낸다.
보통 <blockqutoe>는 인덴트를 해서 보여주게 되고 <q>는 인용문 앞 뒤로 따옴표를 나타내 준다.
8) 첨자 : sup, sub
위첨자나 아채럼자를 나타내고 할때 사용한다.
2.6 형식을 가지고 있는 컨텐츠 (pre)
미리 형식을 가지고 있는 내용을 나타내고자 할 때에는 <pre> 태그를 사용한다.
이 태그를 사용하게 되면 공란도 개수에 맞게 다 나오고 글자폭도 일정한 폰트로 화면에 나오게 된다.
소스 코드등을 나타낼 때에 많이 사용되며, 인덴트나 개행을 위해서 다른 태그등을 사용하지 않아도 화면에 그대로 렌더링 되는것을 볼 수 있다.
2.7 추가 및 삭제(ins, del)
문서에 추가된 내용이나 삭제된 내용을 명시할 때에 사용한다.
2.8 목록 (ul, ol, dl)
1) Unordered List : <ul>은 하위로 <li> 엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 불렛이 나타나게 된다.
2) Ordered List : <ol>은 하위로 <li> 엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 자동적으로 숫자가 나오게 된다.
3) Definition List : <dl>은 하위로 <dt>와 <dd>엘리먼트를 갖게 된다. <dt>는 term을 <dd>는 difinition을 나타낸다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| 웹 표준 핵심 가이드북 : 폼 관련 요소 (0) | 2013.01.13 |
|---|---|
| 웹 표준 핵심 가이드북 : 웹 접근성, 웹 표준 요약 (0) | 2013.01.13 |
| 실전 웹 표준 가이드 : CSS 레이아웃 (0) | 2013.01.11 |
| 실전 웹 표준 가이드 : CSS 선언 (0) | 2013.01.11 |
| 실전 웹 표준 가이드 : CSS 선택자 (0) | 2013.01.11 |
