CODEDRAGON ㆍDevelopment/Web, WWW
HTML5 와 HTML4.01차이점
Contents Model, Syntax, 태그, API부분이 크게 달라진 점입니다.
Contents Model
· HTML 문서작성의 큰 구조
· 어떤요소가 어떤 콘텐츠 또는 요소를 포함할 수 있는지에 관해 정의한 논리적 구조
이전의 HTML문서구조 도식도
· Block Element와 Inline Element로 구분되는 태그를 가지고 문서를 표현 하였습니다.
· 해당 태그들을 조합하여 Tree형태의 계층구조를 이루는 문서의 Outline을 구성하고, 그 구조에 따라 Contents에 접근할 수 있었습니다.
· 아무 의미 없는 <div>태그를 사용하여 문서의 구조를 만들고 문서의 내용은 제작자들이 붙이는 id에 따라 구분하게 되어 문서 구조를 파악하고 이해하기 어렵습니다.
HTML5 문서구조 도식도
· HTML5 문서에서는 Contents Model이라는 개념이 추가되어 문서의 Outline을 잡고 Contents를 구성할 수 있게 되었습니다.
· 이로 인해 기존의 HTML보다 훨씬 더 시멘틱한 웹 구성이 가능해졌습니다.
· HTML5에서 시용하는 주요 시맨틱 태그로는 <header>, <nav>, <section>, <article>, <aside>, <footer>가 있습니다.
· 이 태그만 보고 제목, 메뉴, 실제 내용을 구분할 수 있어 문서 구조 파악이 용이해 졌습니다.
Contents Model 요소
|
Content |
태그 |
설명 |
|
Metadata |
base, command link, meta, script style, title |
나머지 Contents의 Presentation이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정할 때 사용 |
|
Flow |
a, abbr, address area, article, aside audio b, button canavas div, dl, em figure, footer, form h1~h6 header, hr I, iframe, img input |
문서와 Application의 Body에서 사용 |
|
Sectioning |
a canvas, cite code, command datalist, del dfn em, embed, I iframe, img input, span, strong sub, sup, svg textarea, time var, video, wbr text |
Headings과 Footers의 범위를 정의할 때 사용 |
|
Heading |
Sectioning Content와 동일 |
Section의 Header를 정의할 때 사용 |
|
Phrasing |
Sectioning Content와 동일 |
문서의 Text 및 Text를 intra-paragraph level로 Markup 할 때 사용 |
|
Embedded |
audio, canvas, embed iframe, img math, object, svg video a, audio button, details embed, iframe img, object, select textarea, video |
문서의 다른 Resource를 삽입할 때 사용 |
|
Interactive |
Embedded Content와 동일 |
사용자의 상호작용을 위해 특별하게 의도할 때 각각 사용 |
Syntax(구문)
· 이전보다 간소화된 구문으로 개발자들에게 개발 편의을 제공합니다.
· DOCTYPE는 HTML문서라면 최상단에 반드시 위치해야 합니다. (Enter-개행문자도 들어가면 안됩니다.)
HTML 문법을 따르도록 작성된 문서임을 나타내는 DOCTYPE 비교
|
HTML4.01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body>
</body> </html>
|
|
HTML5 |
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>
</body> </html>
|
'Development > Web, WWW' 카테고리의 다른 글
| 리스트 태그 - <ol>태그, <ul>태그 (0) | 2018.12.20 |
|---|---|
| 프레임의 장점/단점, 프레임의 대안 (0) | 2018.12.20 |
| <font>, <font> 태그의 속성 (0) | 2018.12.19 |
| 문단 관련 태그 - <br> 태그, <p> 태그, <p> 태그 align 속성(Attributes), <p> 태그와 <br> 태그 비교, <center> 태그, 내용을 가운데 정렬하는 태그 속성 (0) | 2018.12.18 |
| HTML vs XHTML vs HTML5 (0) | 2018.12.18 |