본문 바로가기
HTML

HTML5 마이그레이션(HTML5 Migration)

보여주는남자 2018. 7. 10. 00:00


Migration from HTML4 to HTML5

HTML4에서 HTML5로 이전


This chapter is entirely about how to migrate from HTML4 to HTML5.

이 장하는 방법에 대해 전적으로 마이그레이션 에서 HTML4 에 HTML5 .

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure.

이 장에서는 원래 내용이나 구조를 손상시키지 않으면 서 HTML4 페이지를 HTML5 페이지로 변환하는 방법을 보여줍니다.


You can migrate from XHTML to HTML5, using the same recipe.

동일한 레시피를 사용하여 XHTML에서 HTML5로 마이그레이션 할 수 있습니다.


Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>


A Typical HTML4 Page

일반적인 HTML4 페이지


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}
div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
div#menu ul {
    padding: 0;
}
div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>
 
<div id="header">
  <h1>Monday Times</h1>
</div>
 
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
 
<div id="content">
  <h2>News Section</h2>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>
 
<div id="footer">
  <p>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>
 
</body>
</html>
cs


Try it Yourself »


Change to HTML5 Doctype

HTML5 Doctype로 변경


Change the doctype:

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
cs


to the HTML5 doctype:


Example

1
<!DOCTYPE html>
cs


Try it Yourself »


Change to HTML5 Encoding

HTML5 인코딩으로 변경


Change the encoding information:

1
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
cs


to HTML5 encoding:


Example

1
<meta charset="utf-8">
cs


Try it Yourself »


Add The HTML5Shiv

HTML5Shiv 추가


The new HTML5 semantic elements are supported in all modern browsers. In addition, you can "teach" older browsers how to handle "unknown elements".

새로운 HTML5 의미 론적 요소는 모든 최신 브라우저에서 지원됩니다. 또한 구형 브라우저에 "알 수없는 요소"를 처리하는 방법을 "가르 칠"수 있습니다.

However, IE8 and earlier, does not allow styling of unknown elements. So, the HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

그러나 IE8 및 이전 버전에서는 알 수없는 요소의 스타일을 허용하지 않습니다. 따라서 HTML5Shiv는 버전 9 이전의 Internet Explorer 버전에서 HTML5 요소의 스타일을 활성화하는 JavaScript 해결 방법입니다.


Add the HTML5Shiv:

HTML5Shiv 추가 :


Example

1
2
3
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
cs


Try it Yourself »


Read more about the HTML5Shiv in HTML5 Browser Support.

HTML5 브라우저 지원 에서 HTML5Shiv 에 대해 자세히 알아보십시오 .


Change to HTML5 Semantic Elements

HTML5 시맨틱 요소로 변경


The existing CSS contains id's and classes for styling the elements:

기존 CSS에는 요소를 스타일 지정하기위한 ID와 클래스가 포함되어 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
 
div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}
 
div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
 
div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
 
div#menu ul {
    padding: 0;
}
 
div#menu ul li {
    display: inline;
    margin: 5px;
}
cs


Replace with equal CSS styles for HTML5 semantic elements:

HTML5 의미 론적 요소에 대해 동일한 CSS 스타일로 바꾸기 :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
 
header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}
 
section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
 
article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
 
nav ul {
    padding: 0;
}
 
nav ul li {
    display: inline;
    margin: 5px;
}
cs


Finally, change the elements to HTML5 semantic elements:

마지막으로 요소를 HTML5 의미 요소로 변경합니다.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
 
<header>
<h1>Monday Times</h1>
</header>
 
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
 
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
 
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
 
</body>
cs


Try it Yourself »


The Difference Between <article> <section> and <div>

<article> <section>과 <div> 사이의 차이점


There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>.

혼란 (부족)가 HTML5 표준의 차이는 사이가 <article> <section>와 <div>.

In the HTML5 standard, the <section> element is defined as a block of related elements.

HTML5 표준에서 <section>요소는 관련 요소 블록으로 정의됩니다.

The <article> element is defined as a complete, self-contained block of related elements.

이 <article> 요소는 관련 요소로 구성된 완전한 자체 블록으로 정의됩니다.

The <div> element is defined as a block of children elements.

<div>요소는 자식 요소의 블록으로 정의된다.

How to interpret that?

어떻게 해석할까요?

In the example above, we have used <section> as a container for related <articles>.

위 예제에서 우리는 <section>관련 컨테이너로 사용 했습니다 <articles>.

But, we could have used <article> as a container for articles as well.

그러나 <article>기사의 컨테이너로 도 사용할 수있었습니다 .

Here are some different examples:

몇 가지 다른 예가 있습니다.


<article> in <article>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<article>
 
<h2>Famous Cities</h2>
 
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
 
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
 
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
 
</article>
cs


Try it Yourself »


<div> in <article>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<article>
 
<h2>Famous Cities</h2>
 
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
 
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
 
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
 
</article>
cs


Try it Yourself »


<div> in <section> in <article>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<article>
 
<section>
<h2>Famous Cities</h2>
 
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
 
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
 
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
 
<section>
<h2>Famous Countries</h2>
 
<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
 
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
 
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
 
</article>
cs


Try it Yourself »




저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

[R]HTML5 Canvas  (0) 2018.07.12
[R]HTML5 스타일 가이드 및 코딩 규칙(HTML5 Style Guide and Coding Conventions)  (0) 2018.07.11
HTML5 의미 론적 요소(HTML5 Semantic Elements)  (0) 2018.07.09
HTML5 새 요소(HTML5 New Elements)  (1) 2018.07.08
HTML5 브라우저 지원(HTML5 Browser Support)  (0) 2018.07.07

'HTML' Related Articles

티스토리툴바