XHTML의 기본 규칙
1. 마크업의 구성
요소(element) = 시작 태그 + 컨텐츠 + 종료 태그
2. DTD (Document Type Definition)
- 웹 브라우저에게 렌더링 방식을 알려주는 태그가 아닌 요소
- HTML문서의 가장 처음에 선언
- DTD는 도큐먼트 타입 선언, DOCTYPE 선언이라고도 한다.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" www.w3.org/TR/html4/strict.dtd >
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1 0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" XHTML1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5
<!DOCTYPE html>
DOCTYPE은 Transitional를 많이 사용 (덜 엄격해서)
!DOCTYPE의 구조는 최상위 엘리먼트 네임(html)-국제적,공용인지/내부적,제한용인지(PUBLIC||SYSTEM)-ISO공인인증기관(+)인지||비공인인증기관(-//W3C//)인지-DTD를 작성한 기관명-DTD 타입-인코딩 언어-DTD 경로 순으로 표기한다.
DTD TYPE은 크게 3가지로 구분된다.
DTD XHTML (version) Strict : 권장 표준 안
DTD XHTML (version) Transitional : Strict 보단 완화된 표준안으로 가장 많이 사용한다.
DTD XHTML (version) Frameset : 프레임을 나눌경우 프레임페이지에 사용
3. 렌더링 모드
- 쿼크 모드(quirks mode) : 오래된 웹 브라우저를 위한 하위버전 호환 모드
- 표준 모드(standards mode) : W3C의 표준을 엄격히 준수
- 쿼크모드는 익스플로러6 등 하위버전 호환모드로, DOCTYPE 선언 없으며 무조건 쿼크모드로 인식.
- 익스플로러에서 확인. F12 눌러 개발자모드 연 뒤 문서모드 오른쪽에 쿼크 눌러 확인할 수 있다.
4. 기본 코딩 규칙
1) 열고 닫음, 중첩, 속성을 지켜야 한다.
<p><strong>마크업 문법</strong>을 지켜주세요</p> (O)
<strong><p>마크업 문법</strong>을 지켜주세요</p> (X)
<p><strong>마크업 문법</strong>을 지켜주세요 (X)
<img src=“question.gif” alt=“질문하기” alt=“QnA” /> (X)
<img src=“question.gif” alt=“질문하기 /> (X)
<table border=“border”> (O)
4) 속성 값은 큰따옴표로 묶음
5) 빈 요소의 경우 공백문자와 />사용
<img src=“ball.jpg” />
6) 일반 기호 대신 문자 참조 형식 사용
- & : &(characters Entity Name), &(entity code)
- alt 등의 속성 값에도 문자 참조를 사용
7) 주석 안에 이중 하이픈(--) 사용 금지
<!-- -- 사용 금지 -- --> (X)
5. xhtml 문서의 기본 구조
- head 영역 : 문서에 실제로 보이는 요소는 존재하지 않음
- body 영역 : 컨텐츠가 입력되는 공간
6. 사용 언어 지정
- 거의 모든 요소에 사용 가능
<html lang="ko" xml:lang="ko">
<p>
영어로는 시간에 상관없이 <span lang="en">Hello</span>라고 인사
할 수 있지만,
독일어로는 아침 10시 이전에는 <span lang="de">Guten
Morgen</span>,
이후에는 <span lang="de">Guten Tag</span>이라고 인사합니다.
</p>
7. 문서 title
- 해당 페이지를 잘 이해할 수 있도록 문서의 제목을 기술
- 브라우저의 타이틀 바에 표시되고 북마크의 기본 명칭으로 지정됨
<title>웹 접근성의 정의 | 웹 접근성 연구소</title>
<title>:::::::: 웹 접근성의 정의 :::::::</title>
<title>웹 접근성의 이해 > 웹 접근성의 정의</title>
- 웹접근성 연구소 사이트 구조 참조.
- 좋은 타이틀 형태는 <title>현재문서에서 보여주는 것 | 현재 사이트</title>
8. 정보 제공을 위한 meta 태그
인코딩 지정
<meta http-equiv="content-type" content="text/html;charset=euc-kr" />
문서에 대한 다양한 정보를 제공
keyword 키워드
description 요약설명
author 작성자
copyright 저작권정보
reply-to 이메일 연락처
date 작성날짜
9. 유효성 검사
'웹접근성과 웹표준' 카테고리의 다른 글
| XHTML의 구문 요소 (0) | 2013.07.18 |
|---|---|
| XHTML의 블록/인라인 요소, 시멘틱 요소 (0) | 2013.07.17 |
| 웹표준 실습 환경 설정 (0) | 2013.07.15 |
| 웹 접근성 향상을 위한 전략 : 웹표준 (0) | 2013.07.14 |
| 웹접근성과 장애인 차별금지법, 한국형 웹 접근성 지침 KWCAG 2.0 (0) | 2013.07.13 |
