본문 바로가기
컴퓨터이야기/HTML5&Design

HTML 4와 HTML 5의 차이점

by 변화지시자 2009. 7. 13.
반응형

2. 문법

HTML 5 언어는 이미 잘 알려진 HTML 4와 XHTML1 문법과 호환 됩니다만 HTML내 난해한 SGML 문법과는 호환되지 않습니다. 문서는 text/html MIME 형식을 사용하게 됩니다.

HTML 5는 구현을 용이하기 위해 오류 처리를 비롯하여 세부적인 파싱 규칙을 정의 합니다. 사용자 에이전트는 text/html MIME 형식을 가진 문서를 파싱 할때는 이러한 규칙을 따르게 됩니다. 아래에 HTML 문법과 함께 처리하는 간단한 예제가 있습니다. 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>
</html>

HTML 5에 사용된 다른 문법은 바로 XML 입니다. XHTML1 문서 및 구현과 같은 문법을 사용할 수 있습니다. 이 문법을 사용하는 문서는 XML MIME 형식을 사용하고 http://www.w3.org/1999/xhtml 네임 스페이스를 이용하고 XML 명세에 따라야 합니다. [XML]

아래 예제는 HTML 5에서 XML 문법을 사용할 때의 예제 입니다. 아래 문서는 application/xhtml+xml나 application/xml 같은 XML MIME 형식을 따르고 있습니다. 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>
</html>

2.1. 문자 인코딩

HTML 5 저작자들은 문자 인코딩에 관한 아래 세 가지 부분 중 하나에 설정하여야 합니다.

  • 전송 단계에서 HTTP 헤더에 Content-Type 표시.
  • 문서 앞부분에 특수 유니코드 BOM 문자를 표시. 이 문자는 인코딩 방법에 대한 정보를 제공해 줍니다.
  • 파일 초기 512 바이트 크기 내에 meta 요소 내 charset 속성에 표시. UTF-8 방식을 이용하면 <meta charset="UTF-8">와 같이 표기 하며 기존의 사용 방식인 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">에서 변경하는 게 좋습니다.

XML 문법을 작성하는 저작자들은 XML 명세에 따라 문자 인코딩 설정을 하여야 합니다.

2.2. DOCTYPE

HTML 5 문법은 웹 브라우저가 표준 모드로 문서를 렌더링 할 수 있도록 문서 처음에 DOCTYPE을 지정해야 합니다. DOCTYPE은 특별한 목적이 없이 XML을 위한 옵션입니다. XML MIME 형식 문서는 관계 없이 항상 표준 모드로 동작합니다. [DOCTYPE]

기본 DOCTYPE 선언 방식은 <!DOCTYPE html>이며 대소문자 구별을 하지 않습니다. 초기 HTML 버전에서의 DOCTYPE은 HTML이 SGML의 일부라서 새로운 DTD를 참조해야 되었기 때문에 필요했지만 지금은 더 이상 그럴 필요가 없습니다. HTML 5는 HTML 문법을 사용하는 문서를 표준 모드로 동작하기 위해 DOCTYPE을 이리 저리 바꿀 필요가 없습니다. 웹 브라우저는 단순히 <!DOCTYPE html>만 있으면 표준 모드로 동작 합니다.

3. 언어

본 장에서는 HTML 4와 HTML 5 사이에 다른 특징들을 여러 부분으로 나누어서 자세하게 설명하고자 합니다.

3.1. 컨텐츠 모델 변경

HTML 5는 div, li 같은 요소에 대해 엄격한 컨텐츠 모델을 적용합니다. 이들 요소들은 "블럭 단위" 혹은 "인라인 단위"가 될 수 있습니다. 그러나 두 가지 모두는 아닙니다. 이러한 변경을 문서 내에서 각 요소를 구조화에 사용 하는 것인지("블럭 단위") 혹은 구조 내 텍스트의 의미에 사용 하는지("인라인 단위")를 좀 더 명확하게 해 줄 것입니다. 아래 예제를 보시면 이해하실 수 있습니다. 

<div>
 <em>…</em>
 …
</div>
<div>
 <p><em>…</em></p>
 <p>…</p>
</div>

… 아래 방식으로 사용할 수 없습니다. 

<div>
 <em>…</em>
 <p>…</p>
</div>

…p요소는 블럭 단위이고 em 요소는 아니기 때문입니다.

HTML 5의 또 다른 변경은 tfoot요소가 thead바로 다음 뿐 아니라 table 끝에도 나타날 수 있습니다.

3.2. 추가 요소

아래 요소들은 구조적 마크업을 위해 추가된 요소들입니다:

  • section은 태그는 일반적인 문서 및 어플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는 h1-h6와 함께 사용할 수 있습니다.

  • article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.

  • aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.

  • header은 문서 내 머리말 부분을 표시할 때 사용합니다.

  • footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.

  • nav는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.

  • dialog는 대화 기능을 표시할 때 사용할 수 있습니다. 

    <dialog>
 <dt> 안녕하세요?
 <dd> 네 오랜만입니다. 건강하시죠.
 <dt> 물론입니다. 당신은?
 <dd> 저도 좋습니다. 
</dialog>

  • figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.

    <figure>
 <video src=ogg>…</video>
 <legend>캡션 예제</legend>
</figure>

또 다른 몇 가지 요소들을 추가하였습니다.

  • audio와 video는 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중 source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.

  • embed는 플러그인 컨텐츠를 표시할 때 사용합니다.

  • m는 별도로 표시한 컨텐츠를 표시하는데 사용합니다.

  • meter는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.

  • time은 날짜나 시간을 표시하는 데 사용합니다.

  • canvas는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용합니다.

  • command는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.

  • datagrid는 트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. (역자 주. 목록형 구조로 테이블 보다 쉽게 구조를 이해할 수 있습니다.)

  • details은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다.

  • input을 위한 list 속성과 datalist는 유용한 콤보 박스를 만드는 데 사용합니다.

    <input list=browsers>
<datalist id=browsers>
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

  • event-source는 서버가 보낸 이벤트를 파악하는 데 사용합니다.

  • output은 자바 스크립트로 수행된 결과값을 표시하는 데 사용합니다.

  • progress은 다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.

input요소에는 아래와 같은 좀 더 세부적인 type 속성 들을 추가 합니다.

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

새로운 형식들은 웹 서버에 기 정의된 유효 형식을 전달해 줄 수 있도록 사용자 에이전트가 일정에서 날짜 선택 시 달력을 표시해 주기 위해 만든 것입니다. 또는 주소록에 이메일 주소를 입력할 때 유효성을 체크 해 줌으로서 불필요한 자바 스크립트 유효성 확인 절차를 줄여 주어 사용자들이 빠르게 기능을 사용할 수 있도록 도와 줍니다.

3.3. 추가 속성

HTML 5는 다양한 요소에 대해 여러 가지 새 속성들을 제공 하고 있습니다.

  • a와 area 요소는 link와 함께 사용 가능한 media 속성을 이용할 수 있습니다.

  • a와 area 요소는 ping이라는 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있습니다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 합니다.

  • area 요소는 좀 더 견고 하도록 hreflang와 rel 속성 모델을 사용합니다.

  • base 요소는 a 요소에서 이미 널리 지원되는 target 속성을 지원합니다. a와 area에서 iframe과 함께 웹 어플리케이션에서 유용하기 때문에 target을 계속 지원 하게 됩니다.

  • li요소에서 value 속성은 표현 요소가 아니므로 계속 지원 됩니다. ol 요소에서 start 속성 역시 지원 됩니다.

  • meta 요소는 charset은 이미 많은 곳에서 지원 하고 있고 문서를 위한 문자 인코딩을 깔끔하게 적용 하므로 지원을 시작 합니다.

  • 새로 만든 autofocus 속성이 input (type이 hidden일 때를 제외), select, textarea, button 요소에 추가 됩니다. 이 속성은 문서를 읽는 동안 폼 콘트롤을 지정하는 선언적 방식을 제공합니다. 이 기능은 사용자가 원하지 않을 경우 제공하지 않는 설정을 제공 함으로서 사용자 경험을 보장 해 주어야 합니다.

  • 새로 만든 form속성은 input, output, select, textarea, button, fieldset 요소들이 한 개 이상의 폼 양식과 함께 사용하도록 지원 합니다.

  • input, button, form 요소에서 새로 사용할 수있는 replace 속성은 폼이 제출된 후 문서내에 실행되는 것에 영향을 주도록 할 수 있습니다.

  • form, select, datalist 요소는 data 속성을 가질 수 있습니다. 이 속성은 select나 datalist인 경우 서버로 부터 받은 데이터를 자동 완성해 주거나 할 때 사용할 수 있습니다.

  • 새로운 required 속성은input (type 속성이 hidden, image, submit 같은 버튼 일 때 제외), textarea에서 사용 가능 합니다. 이는 폼을 제출하기 위해서는 이 항목을 사용자가 꼭 입력해야 한다는 것을 지정 합니다.

  • input과 textarea는 inputmode라는 새로운 속성을 가집니다. 이 속성은 예상하는 입력 종류에 따라 사용자에게 힌트를 주는 인터페이스를 지원 합니다.

  • disabled 속성으로 fieldset 전체를 사용하지 않도록 할 수 있습니다.

  • input 요소에 몇 가지 새로운 속성이 추가 됩니다. autocomplete, min, max, pattern, step. 이전에 언급한 대로 list와 datalist, select 요소에도 함께 사용할 수 있습니다.

  • input과 button은 template이라는 새 속성을 통해 템플릿 반복 작업을 할 수 있습니다.

  • menu 요소는 type, label, autosubmit 같은 새 속성을 가집니다. 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다.

  • style 요소는 scoped 속성을 가집니다. 이는 지정한 스타일 시트를 사용하는 데 사용합니다. style 요소에서 지정된 스타일 규칙은 내부 트리에서만 적용할 수 있습니다.

  • script 요소는 스크립트를 불러오고 실행하는 방식에 영향을 주는 async라는 새로운 속성을 사용할 수 있습니다.

HTML 4의 몇 가지 속성들이 모든 요소에 사용할 수 있습니다. 아래 속성들은 이제 전역 속성으로 사용 가능 합니다. class, dir, id, lang, tabindex, title.

아래 속성들은 추가된 전역 속성들입니다.

  • contenteditable 속성을 가진 요소는 편집 가능한 영역임을 표시하는 속성입니다. 사용자들은 마크업과 내용을 바꿀 수 있습니다. (역자 주. 본 기능은 상용 표준이었음.)
  • contextmenu 속성을 가진 저작자에 의해 제공되는 컨텍스트 메뉴를 지정하는 데 사용할 수 있습니다.
  • draggable 속성을 가진 요소는 새 드래그앤 드롭 API에 사용할 수 있습니다.
  • irrelevant 속성을 가진 요소는 아직 혹은 더 이상 의미 있지 않다는 것을 말합니다.

아래에는 적당한 네임 스페이스를 가진 요소에 나타날 수 있는 전역 속성들입니다. 이 속성은 반복 템플릿 기능에 사용할 수 있습니다.

  • repeat
  • repeat-start
  • repeat-min
  • repeat-max

HTML 5는 on이벤트명으로 사용되던 HTML 4의 모든 이벤트 핸들러를 사용할 수 있습니다. 또한, 다중 문서 메시지 API와 event-source 요소와 함께 사용할 수 있는 onmessage 같은 추가된 이벤트 핸들러도 있습니다.

3.4. 변경 요소

아래 요소들은 HTML 5에서 새로운 의미로 재정의한 것으로 HTML 4에서와 쓰임이 달라지는 것들입니다. 새로운 의미를 부여하여 바르게 사용하도록 하기 위함입니다.

  • href 없이 a 요소를 사용하면 "작업용 링크"로 사용 합니다.

  • address 요소는 섹션 개념을 통해 새로운 영역을 표시합니다.

  • b 요소는 인쇄상 강조 표현을 가진 텍스트 뿐만 아니라 제품 소개 내 제품명, 문서 초록의 키워드 같은 아주 특별한 중요도는 갖지 않으나 일반적인 강조의 목적에 사용 합니다.

  • hr 요소는 단락 단위의 주제 바꿈을 할 때 사용 합니다.

  • i 요소는 인쇄상 기울움 표현을 가진 텍스트 뿐만 아니라 선박명, 머리속 생각, 다른 언어에서 숙어구, 기술 용어, 생물종 표시 같은 일반적인 사용 이나 소리나 분위기를 대체하는 문구 등에 사용 합니다.

  • label 요소를 위해 브라우저는 더 이상 라벨과 컨트롤 사이에 포커스 이동을 하면 안됩니다. 그런 동작이 기본 플랫폼의 사용자 인터페이스 표준이 아닐 경우.

  • menu 요소는 실제적 문서 메뉴 정보를 제공하는 데 사용합니다.

  • small 요소는 세부 주석 및 법적 인쇄 문서에서 작은 인쇄 정보를 담을 때 사용 합니다.

  • The strong 요소는 강조 보다 더 중요한 정보를 제공할 때 사용합니다.

3.5. 중단 요소

아래 요소들은 사용하지 않을 것은 권장 합니다. 사용자 에이전트는 이들을 함께 지원합니다만 HTML 5는 정확히 어떻게 언급되고 있는지 정당한 절차에 따라 렌더링 할 것입니다. (예를 들어 isindex 요소는 이미 파서에 의해 지원 됩니다.)

아래 요소들은 표현 요소들이며 CSS로 다루는 것이 더 낫기 때문에 HTML 5에 포함 되지 않았습니다.

  • basefont
  • big
  • center
  • font 단, 위지윅 에디터의 사용자 인터페이스 상 한계로 인해 사용하는 것은 허용 합니다.
  • s
  • strike
  • tt
  • u

아래 요소들은 사용자로 하여금 부정적인 사용성과 접근성을 주기 때문에 HTML 5 에서 제외된 요소 입니다.

  • frame
  • frameset
  • noframes

아래 요소들은 잘 사용하지 않고 다른 요소들과 사용법에서 혼란을 주는 요소들 이라 제외 되었습니다.

  • acronym은 매우 큰 혼란을 주고 있어 제외 합니다. 축약어를 사용할 때는 abbr를 사용하면 됩니다.
  • applet은 이미 object로 대체 되었습니다.
  • isindex은 이미 폼 양식을 통해 대체 되었습니다.
  • dir은 이미 ul 요소를 통해 대체 되었습니다.

noscript는 HTML 문법에서만 사용하고 XML 문법에서는 더 이상 사용하지 않습니다.

3.6. 중단 속성

HTML 4에서 사용되넌 몇 가지 속성들은 HTML 5에서 더 이상 사용할 수 없습니다. 만약 호환성 이슈 때문에 사용자 에이전트가 처리해야 한다면 동작 방식을 정합니다.

  • accesskey : 관련 요소 a, area, button, input, label, legend, textarea.
  • rev, charset : 관련 요소 link, a.
  • shape, coords : 관련 요소 a.
  • longdesc : 관련 요소 img, iframe.
  • target : 관련 요소 link.
  • nohref : 관련 요소 area.
  • profile : 관련 요소 head.
  • version : 관련 요소 html.
  • name : 관련 요소 map, img, object, form, iframe, a (대신 id 사용).
  • scheme : 관련 요소 meta.
  • archive, classid, codebase, codetype, declare, standby : 관련 요소 object.
  • valuetype, type : 관련 요소 param.
  • charset, language : 관련 요소 script.
  • summary : 관련 요소 table.
  • headers, axis, abbr attributes on td, th.
  • scope : 관련 요소 td.

HTML 5에서는 HTML 4 중에서 CSS로 이용 가능한 표현 속성을 더 이상 사용하지 않습니다.

  • align : 관련 요소 caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr, body.
  • alink, link, text, vlink : 관련 요소 body.
  • background : 관련 요소 body.
  • bgcolor : 관련 요소 table, tr, td, th, body.
  • border : 관련 요소 table, img and object.
  • cellpadding, cellspacing : 관련 요소 table.
  • char, charoff : 관련 요소 col, colgroup, tbody, td, tfoot, th, thead and tr.
  • clear : 관련 요소 br.
  • compact : 관련 요소 dl, menu, ol, ul.
  • frame : 관련 요소 table.
  • frameborder : 관련 요소 iframe.
  • height : 관련 요소 iframe, td and th.
  • hspace, vspace : 관련 요소 img, object.
  • marginheight, marginwidth : 관련 요소 iframe.
  • noshade : 관련 요소 hr.
  • nowrap : 관련 요소 td, th.
  • rules : 관련 요소 table.
  • scrolling : 관련 요소 iframe.
  • size : 관련 요소 hr, input and select.
  • style : 관련 요소 font를 제외한 모든 요소.
  • type : 관련 요소 li, ol and ul.
  • valign : 관련 요소 col, colgroup, tbody, td, tfoot, th, thead, tr.
  • width : 관련 요소 hr, table, td, th, col, colgroup, iframe, pre.

4. API

HTML 5는 웹 어플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 요소들과 함께 더 좋은 어플리케이션 개발에 사용할 수 있습니다.

  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
  • 온라인/오프라인 이벤트 기능.
  • 새 전역 contenteditable 속성과 함께 지원 되는 편집 API 기능.
  • 새 전역 draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
  • 네트웍 API.
  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
  • 다중 메시징 처리 기능.
  • event-source 요소와 함께 사용할 서버 전달 이벤트 기능.

4.1. HTMLDocument 확장 사항

HTML 5는 다양한 방식으로 DOM 레벨2 기반 HTML로 부터 HTMLDocument 인터페이스를 확장했습니다. 이것은 Document를 구현하는 모든 객체에 적용 하는 것으로 복합 문서의 의미를 그대로 살리고 있습니다. 또한 몇 가지 유용한 새로운 기능을 추가했습니다.

  • getElementsByClassName()는 클래스명으로 요소를 선택할 수 있습니다. SVG나 MathML 같은 Document 객체와 class 속성을 가진 모든 요소에 적용할 수 있습니다.

  • innerHTML은 HTML이나 XML 문서 내용을 얻고 이해하는 데 가장 간단한 방법입니다. 이 속성은 HTMLElement에서만 사용 가능한 상용 표준이었습니다.

  • activeElement, hasFocus는 문서내에서 어떤 요소가 포커스 되어 있는지 확인 가능합니다.

  • getSelection()은 현재 선택된 객체를 반환해 줍니다.

  • designMode, execCommand()은 문서를 편집하는데 주로 사용될 것입니다.

4.2. HTMLElement 확장 사항

HTMLElement 인터페이스 역시 HTML 5에서 몇 가지 확장 사항이 있습니다.

  • getElementsByClassName()은 HTMLDocument에서 기본적으로 사용 합니다.

  • innerHTML 역시 XML 문서에서 사용할 수 있습니다.

  • classList는 className에 편리하게 접근할 수 있는 방법입니다. 모든 객체는 요소 클래스를 처리하기 위해 has(), add(), remove(), toggle() 등을 사용할 수 있습니다. a, area, link 요소들은 rel 속성과 유사한 기능을 가진 relList라는 속성을 제공 합니다.

 

 

 

 

출처 : http://channy.creation.net/project/html5/html4-differences/Overview_ko.html

 

관련글

티스토리툴바