HTML5 이전 이전

HTML4에서 HTML5로 이전

이 장에서는 표준 HTML4 페이지에서 표준 HTML5로 이전하는 방법을 설명합니다.

이 장에서는 기존 HTML4 페이지를 HTML5 페이지로 변환하는 방법을 설명합니다. 원래 내용과 구조를 파괴하지 않도록 합니다.

주석：HTML4 및 XHTML에서 HTML5로 이전할 수 있는 동일한 기술을 사용할 수 있습니다.

표준 HTML4 표준 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <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>뉴스</li>
    <li>스포츠</li>
    <li>날씨</li>
  </ul>
</div>
<div id="content">
<h2>뉴스 섹션</h2>
<div id="post">
  <h2>뉴스 기사</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>뉴스 기사</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>© 2014 Monday Times. 모든 권리 보존.</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语义 요소를 지원합니다.

또한, 오래된 브라우저에 "알 수 없는 요소"를 처리하는 방법을 "교육"할 수 있습니다.

Internet Explorer에 대한 shiv 추가

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

직접 시험해 보세요

주석：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>로 변경

id="header" 및 id="footer"의 <div> 요소를 변경하십시오：

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. 모든 권리 소유.</p>
</div>

HTML5 의미론적 요소 <header>와 <footer>로 변경하세요:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

직접 시험해 보세요

HTML5 <nav>로 변경하세요

id="menu"의 <div> 요소를:

<div id="menu">
  <ul>
    <li>뉴스</li>
    <li>Sports</a></li>
    <li>날씨</li>
  </ul>
</div>

HTML5 의미론적 요소 <nav>로 변경하세요:

<nav>
  <ul>
    <li>뉴스</li>
    <li>Sports</a></li>
    <li>날씨</li>
  </ul>
</nav>

직접 시험해 보세요

HTML5 <section>로 변경하세요

id="content"의 이 <div> 요소를:

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

HTML5 의미론적 요소 <section>로 변경하세요:

<section>
.
.
.
</section>

직접 시험해 보세요

HTML5 <article>로 변경하세요

class="post"의 모든 <div> 요소를:

<div class="post">
  <h2>뉴스 기사</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

HTML5 의미론적 요소 <article>로 변경하세요:

<article>
  <h2>뉴스 기사</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

직접 시험해 보세요

이제 필요하지 않은 스타일을 제거하세요:

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>뉴스</li>
    <li>스포츠</li>
    <li>날씨</li>
  </ul>
</nav>
<section>
<h2>뉴스 섹션</h2>
<div id="post">
  <h2>뉴스 기사</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>
</div>
<div id="post">
<h2>뉴스 기사</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>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. 모든 권리 보존.</p>
</footer>
</body>
</html>

직접 시험해 보세요

article, section, div 간의 차이

HTML5 표준에서 article, section, div 간의 차이는 매우 작고 혼란스럽습니다。

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

article 요소는 관련 요소의 전체 자체 포함 블록으로 정의됩니다。

div 요소는 자식 요소의 블록으로 정의됩니다。

그러면 어떻게 이해해야 할까요？

위의 예시에서는 section을 관련 articles의 컨테이너로 사용했습니다。

그러나 우리는 article를 문서의 컨테이너로도 사용할 수 있습니다。

다양한 예시를 들어보겠습니다：

article 元소 내의 <article>：
<article>
<h2>유명한 도시</h2>
<article>
<h2>런던</h2>
<p>런던은 영국의 수도이자, 영국에서 가장 인구가 많은 도시입니다. 그것은 영국에서 가장 인구가 많은 도시입니다,</p>
<p>13억 이상의 인구를 가진 대도시 지역으로 구성되어 있습니다.</p>
</article>
<article>
<h2>파리</h2>
<p>파리는 프랑스의 수도이자 가장 인구가 많은 도시입니다.</p>
</article>
<article>
<h2>도쿄</h2>
<p>도쿄는 일본의 수도이자, 더 큰 도쿄 지역의 중심지입니다,</p>
세계에서 가장 인구가 많은 대도시 지역입니다.</p>
</article>
</article>

직접 시험해 보세요

<article> 내부의 <div>：</article>
<article>
<h2>유명한 도시</h2>
<div class="city">
<h2>런던</h2>
<p>런던은 영국의 수도이자, 영국에서 가장 인구가 많은 도시입니다. 그것은 영국에서 가장 인구가 많은 도시입니다,</p>
<p>13억 이상의 인구를 가진 대도시 지역으로 구성되어 있습니다.</p>
</div>
<div class="city">
<h2>파리</h2>
<p>파리는 프랑스의 수도이자 가장 인구가 많은 도시입니다.</p>
</div>
<div class="city">
<h2>도쿄</h2>
<p>도쿄는 일본의 수도이자, 더 큰 도쿄 지역의 중심지입니다,</p>
세계에서 가장 인구가 많은 대도시 지역입니다.</p>
</div>
</article>

직접 시험해 보세요

<article> 내부의 <section> 내부의 <div>：</article>
<article>
<section>
<h2>유명한 도시</h2>
<div class="city">
<h2>런던</h2>
<p>런던은 영국의 수도이자, 영국에서 가장 인구가 많은 도시입니다. 그것은 영국에서 가장 인구가 많은 도시입니다,</p>
<p>13억 이상의 인구를 가진 대도시 지역으로 구성되어 있습니다.</p>
</div>
<div class="city">
<h2>파리</h2>
<p>파리는 프랑스의 수도이자 가장 인구가 많은 도시입니다.</p>
</div>
<div class="city">
<h2>도쿄</h2>
<p>도쿄는 일본의 수도이자, 더 큰 도쿄 지역의 중심지입니다,</p>
세계에서 가장 인구가 많은 대도시 지역입니다.</p>
</div>
</section>
<section>
<h2>유명한 나라</h2>
<div class="country">
<h2>영국</h2>
<p>런던은 영국의 수도이자, 영국에서 가장 인구가 많은 도시입니다. 그것은 영국에서 가장 인구가 많은 도시입니다,</p>
<p>13억 이상의 인구를 가진 대도시 지역으로 구성되어 있습니다.</p>
</div>
<div class="country">
<h2>프랑스</h2>
<p>파리는 프랑스의 수도이자 가장 인구가 많은 도시입니다.</p>
</div>
<div class="country">
<h2>일본</h2>
<p>도쿄는 일본의 수도이자, 더 큰 도쿄 지역의 중심지입니다,</p>
세계에서 가장 인구가 많은 대도시 지역입니다.</p>
</div>
</section>
</article>

직접 시험해 보세요