최신 웹 개발 튜토리얼

HTML5 마이그레이션

❮ 이전 다음 장 ❯

HTML5에 HTML4에서 마이그레이션

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

이 장에서는 원본 콘텐츠 또는 구조의 어떤 것도 파괴하지 않고, HTML5 버전 페이지 내로 HTML4 페이지를 변환하는 방법을 보여줍니다.

동일한 조리법을 사용하여, XHTML에서 HTML5로 마이그레이션 할 수 있습니다.

일반적인 HTML4 일반적인 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

전형적인 HTML4 페이지

예

<!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.8em;}
  div#header,div#footer,div#content,div#post
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;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 id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</div>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</div>

</div>

<div id="footer">
  <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>
»그것을 자신을 시도

HTML5없는 Doctype로 변경

HTML4의 DOCTYPE에서의 문서 타입을 변경합니다 :

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

에서 HTML5 DOCTYPE에 :

예

<!DOCTYPE html>
»그것을 자신을 시도

HTML5 인코딩로 변경

HTML4에서, 인코딩 정보를 변경 :

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

HTML5로 :

예

<meta charset="utf-8">
»그것을 자신을 시도

추가] Shiv

HTML5 의미 요소는 모든 최신 브라우저에서 지원됩니다.

또한, 당신은 할 수 있습니다 "teach" 방법을 처리하는 이전 버전의 브라우저를 "unknown elements" .

추가 the shiv Internet Explorer의 지원을 :

예

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
»그것을 자신을 시도

읽기에 대한 the shiv 에 HTML5 브라우저 지원 .

HTML5 시맨틱 요소에 대한 CSS 추가

기존 CSS 스타일 봐 :

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

HTML5 의미 요소에 대한 동일한 CSS 스타일과 중복 :

예

header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
»그것을 자신을 시도

HTML5로 변경 <header> 및 <footer>

변경 <div> 와 요소 id="header" 및 id="footer" :

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&amp;copy; 2014 w3ii. All rights reserved.</p>
</div>

HTML5 의미하는 <header> 및 <footer> 요소 :

예

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>&copy; 2014 w3ii. All rights reserved.</p>
</footer>
»그것을 자신을 시도

HTML5로 변경 <nav>

변경 <div> 와 요소 id="menu" :

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

HTML5 시맨틱 <탐색> 요소 :

예

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
»그것을 자신을 시도

HTML5로 변경 <section>

변경 <div> 와 요소 id="content" :

<div id="content">
.
.
.
</div>

HTML5 시맨틱 <섹션> 요소 :

예

<section>
.
.
.
</section>
»그것을 자신을 시도

HTML5로 변경 <article>

모든 변경 <div> 와 요소 class="post" :

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</div>

HTML5 의미로 <article> 요소 :

예

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</article>
»그것을 자신을 시도

이러한 제거 "no longer needed" <style> 요소를 :

예

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
»그것을 자신을 시도

전형적인 HTML5 페이지

마지막으로 당신은 제거 할 수 있습니다 <head> 태그를. 그들은 HTML5에 필요하지 않습니다 :

예

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<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>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</article>

<article>
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</article>

</section>

<footer>
  <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>
»그것을 자신을 시도

의 차이 <article> <section> 및 <div>

혼란이있다 (lack of) 사이의 HTML5 표준의 차이, <article> <section> 및 <div> .

HTML5의 표준에서, <section> 요소가 관련 요소들의 블록으로서 정의된다.

<article> 요소가 관련 요소의 완전한 독립적 블록으로 정의된다.

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

어떻게 해석 하는가?

위의 예에서는, 사용한 <section> 종래의 컨테이너 <articles> .

그러나, 우리가 사용할 수도 <article> 뿐만 아니라 기사의 컨테이너.

다음은 몇 가지 다른 예입니다 :

<article> 에서 <article> :

<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>
»그것을 자신을 시도

<div> 에서 <article> :

<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>
»그것을 자신을 시도

<div> 에서 <section> 에서 <article> :

<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>
»그것을 자신을 시도

❮ 이전 다음 장 ❯