本章演示如何把一張已有的 HTML4 頁面轉換為 HTML5 頁面，在不破壞如何原始內容和結構的情況下。
注釋：您可以使用相同的技巧從 HTML4 以及 XHTML 遷移至 HTML5。
!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 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 copy; 2014 Monday Times. All rights reserved. /p /div /body /html 親自試一試
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
修改為 HTML5 doctype：
!DOCTYPE html
親自試一試
!--[if lt IE 9] script src= http://html5shiv.googlecode.com/svn/trunk/html5.js /script ![endif]-- 親自試一試
注釋：請在 HTML5 瀏覽器支持中閱讀更多有關 shiv 的知識。
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;Duplicate with equal CSS styles for HTML5 semantic elements: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;親自試一試
h2 News Article /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;親自試一試
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 /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 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /div /section footer p copy; 2014 Monday Times. All rights reserved. /p /footer /body /html 親自試一試
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 親自試一試
article 中的 div ： article h2 Famous Cities /h2 div >親自試一試
article 中的 section 中的 div ： article section h2 Famous Cities /h2 div >親自試一試
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
