■ XHTML 선언
HTML과는 다르게 XHTML은 문서의 시작에 XML을 선언한다.
[XHTML 1.0/XHTML 1.1]
<?xml version="1.0" encording="euc-kr"?>

■ 문서형식 선언
H

■ MIME타입
H

■script 요소와 style 요소
H

■요소와 속성은 반드시 소문자로 작성한다
H

■속성값은 반드시 인용부호로 둘러싼다
H

■빈 요소의 서식
H

■태그는 생략할 수 없다
H

■태그는 정형식(well-formed)아로 기술한다
H

■속성은 약술할 수 없다
H

■공백문자의 취급
H

■name 속성과 id 속성
H

■그 밖의 차이들.
H

XHTML 1.0과 XHTML 1.1의 차이

XHTML 1.0과 비교했을때, 모듈화된 XHTML 1.1은 확장성과 유연성이 크게 향상되었다.

  • 문서형식 선언의 차이

    XHTML 1.0은 HTML 4.01 처럼 'Strict', 'Transitional', 'Frameset'이라는 세가지 문서형식을 이용할수 있었지만,

    XHTML 1.1은 'Strict'에 해당하는 문서형식만 사용할 수 있다.

  • html 요소들의 언어코드를 지정하는 방법의 차이

    XHTML 1.0은 lang 속성과 xml:lang 속성으로 언어코드를 지정

    XHTML 1.0은 lang 속성이 폐지되어, xml:lang 속성으로만 지정

  • name 속성과 id 속성을 지정하는 방법의 차이

    XHTML 1.0은 a 요소 등 일부의 요소에 대해서 XHTML 1.0은 name 속성과 id 속성으로 플래그먼트 식별자를 지정.

    XHTML 1.1은 일부 요소에 대해서 name 속성이 폐지되어 id 속성만 지정

  • 요소의 폐지

    XHTML 1.1은 'Strict'에 해당하는 문서형식만 인정

    XHTML 1.0의 'Transitional'과 'Frameset'에서 만 사용가능했던 요소는 폐지

    applet 요소

    basefont 요소

    center 요소

    dir 요소

    font 요소

    frame 요소

    frameset 요소

    iframe 요소

    isindex 요소

    menu 요소

    noframes 요소

    s 요소

    strike 요소

    u 요소

  • 속성의 폐지

    XHTML 1.1은 아래의 속성이 폐지 되었다

    (모든요소) lang
    (a 요소) name, target
    (area 요소) target
    (body 요소) background, bgcolor, text, link, vlink, alink
    (br 요소) clear
    (caption 요소) align
    (div 요소) aling
    (form 요소) name, target
    (h1~h6 요소) align
    (hr 요소) align, noshade, size, width
    (img 요소) align, border, hspace, vspace, name
    (input 요소) align
    (legent 요소) align
    (li 요소) type, balue
    (link 요소) target
    (map 요소) name
    (object 요소) align, border, hspace, vspace
    (ol 요소) compact, start, type
    (p 요소) align
    (pre 요소) width
    (strict 요소) language
    (table 요소) align, bgcolor
    (td 요소) bgcolor, height, nowrap, width
    (th 요소) bgcolor, height, nowrap, width
    (tr 요소) bgcolor
    (ul 요소) compact, type

  • 요소의추가

    XHTML 1.1은 W3C권고 'Ruby Annotation'(2001년 5월 공포)에 근거하여 루비관련 요소가 추가 되었다.

    rb 요소

    rbc 요소

    rp 요소

    rt 요소

    rtc 요소

    ruby 요소

HTML과 XHTML의 차이

XHTML은 HTML을 XML로 재구축한 마크업 언어이다.

HTML의 간결함을 유지하면서도 XML의 논리적 엄밀성까지 갖추고 있다.

HTML에서는 느슨한 코딩도 문제없이 브라우저에서 표시될 수 있지만, XHTML은 그렇지 않다.

XHTML은 XML어플리케이션의 하나로 인정되기 때문에 HTML보다 엄격한 코딩이 요구된다.

다만, 사용요소나 속성, 속성값에는 거의 차이가 없다.

문법은 HTML과 조금 다르다.

HTML과 XHTML의 차이

XHTML은 HTML을 XML로 재구축한 마크업 언어이다.

HTML의 간결함을 유지하면서도 XML의 논리적 엄밀성까지 갖추고 있다.

HTML에서는 느슨한 코딩도 문제없이 브라우저에서 표시될 수 있지만, XHTML은 그렇지 않다.

XHTML은 XML어플리케이션의 하나로 인정되기 때문에 HTML보다 엄격한 코딩이 요구된다.

다만, 사용요소나 속성, 속성값에는 거의 차이가 없다.

문법은 HTML과 조금 다르다.

W3C(World Wide Web Consortium)

웹기술 표준화와 추진을 목적으로 1994년 10월, 웹을 고안한 팀 버너스리(Rim Berners-lee)를 중심으로 MIT에 설립.

현재 ERCIM(유럽 정보처리수학연구 컨소시엄)과 게이오 대학 SFC(Keio-SFC)가 호스트를 조직으로 공동운영.

W3C는 웹 관련 정보 제공, 연구개발 촉진, 신기술 프로토타입 개발 등에 관여.

W3C가 제정하는 사양서(Specifications)는 웹 표준으로 이정된다.

자바스크립트가 작동하지 않을 때에도 폼 서밋이 정상적으로 이루어지는 폼 체크 구현 방법

폼의 값을 체크하는 스크립트의 경우 많은 경우에 스크립트 만으로 폼을 서밋하는 방식을 이용하는 경우가 많은데 자바스크립트가 작동하지 않을 때에도 폼을 이용할 수 있게 제작을 하고 서밋이 발생했을 때 onsubmit 이벤트 핸드러를 이용하여 기능을 해치지 않고 폼을 이용할 수 있게 제작 하여야 한다.

<script type="text/javascript">
function submitForm(formEl) {
//TrimAll(formEl);

var errorMessage = null;
var objFocus = null;

if (formEl.loginId.value.length == 0) {
errorMessage = "아이디를 넣어주세요.";
objFocus = formEl.loginId;
} else if (formEl.loginPassword.value.length == 0) {
errorMessage = "비밀번호를 넣어주세요.";
objFocus = formEl.loginPassword;
}

if(errorMessage != null) {
alert(errorMessage);
objFocus.focus();
return false;
}
return true;
}
</script>

<form id="loginForm" name="loginForm" action="" onsubmit="return submitForm(this)">
<label for="loginId">아이디</label> <input type="text" id="loginId" name="loginId" />
<label for="loginPassword">비밀번호</label> <input type="password" id="loginPassword" name="loginPassword" /><br />
<input type="image" src="login.gif" alt="Login" />
</form>

정보통신 접근성 향항 표준화 포럼 접근성 예제 중에서

(http://www.iabf.or.kr/Guide/Example.asp)

"자바스크립트의 기능을 이용하여 콘텐츠를 제공하는 경우 자바스크립트에 의존하여 기능을 구현하면 안되고 HTML만으로도 핵심 기능이 작동할 수 있게 제작을 한 후에 자바스크립트로 추가 효과나 UI를 입히는 순서로 제작을 하여야 한다." 라는 조항에 따라.

자바스크립트가 작동하지 않을 때에서 팝업을 이용할 수 있게 제작된 팝업 스크립트의 예이다.

<a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300, height=200'); return false;">

<img src="openWindow.gif" alt="팝업설명">

</a>

+ Recent posts