달력

1

« 2020/1 »

  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  


 

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>

 

 

 


Posted by codedragon codedragon

댓글을 달아 주세요