HTML5 Migration

HTML5 Migration （HTML5迁移）

On this page, we’ll show how you can migrate from HTML4 to HTML5. Let’s learn it step by step. （在此页面上，我们将展示如何从HTML4迁移到HTML5。让我们一步一步地学习它。）

id （ID）

class （级）

<div id="header"> - <header>
<div id="menu"> - <nav>
<div id="content"> - <section>
<div class="article"> - <article>
<div id="footer"> - <footer>

The steps described below can also be taken for migrating from XHTML to HTML5. （>也可以采取以下步骤从XHTML迁移到HTML5。）

Step 1: Changing the Doctype

Step 1: Changing the Doctype

We change the HTML4 doctype to HTML5 doctype. （我们将HTML4 doctype更改为HTML5 doctype。）

HTML4 

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

HTML5 

<!DOCTYPE html>

Step 2: Changing the Encoding

Step 2: Changing the Encoding

Here, we change the HTML4 encoding information to HTML5 encoding. （在这里，我们将HTML4编码信息更改为HTML5编码。）

HTML4 

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

HTML5 

<meta charset="utf-8">

Step 3: Adding the HTML5Shiv

Step 3: Adding the HTML5Shiv

All modern browsers support the new HTML5 semantic elements. Moreover, you can “teach” older browsers handling “unknown elements”. The HTML5Shiv is used to enable styling of HTML5 elements in such browsers. （所有现代浏览器都支持新的HTML5语义元素。此外，您可以“教授”处理“未知元素”的旧浏览器。HTML5Shiv用于在这些浏览器中启用HTML5元素的样式。）

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

Step 4: Changing to HTML5 Semantic Elements

Step 4: Changing to HTML5 Semantic Elements

Fisrt, see an example where HTML4 semantic elements are used. （Fisrt ，请参阅使用HTML4语义元素的示例。）

Example of HTML4 elements: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <meta charset="utf-8">
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <style>
     body {
       font-size: 0.9em;
     }
     #header,
     #footer {
       padding: 10px;
       color: white;
       background-color: black;
       text-align: center;
     }
     h2 {
       text-align: center
     }
     h3 {
       text-align: right;
       padding-right: 20px;
     }
     div.content {
       margin: 5px;
       padding: 20px;
       background-color: lightgrey;
     }
     .article {
       margin: 20px;
       padding: 10px;
       background-color: white;
     }
     #header-menu ul {
       padding: 0;
     }
     #header-menu ul li {
       display: inline;
       margin: 5px;
     }
   </style>
 </head>
 <body>
   <div id="header">
     <h1>LaravelSoft</h1>
   </div>
   <div id="header-menu">
     <ul>
       <li>
         <a href="https://www.w3cdoc.com/learn-html.html">Books</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/quiz/">Quizzes</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/snippets">Snippets</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/tool/">Tools</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/string-functions/">String Functions</a>
       </li>
     </ul>
   </div>
   <div class="content">
     <h2>Article Section</h2>
     <div class="article">
       <h3>Article Title</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. 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">
       <h3>News Article</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
       <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>&copy; 2020 All rights reserved.</p>
   </div>
 </body>
</html>

Now, see the migration from HTML4 elements to HTML5 semantic elements. （现在，请参阅从HTML4元素到HTML5语义元素的迁移。）

Example of HTML5 semantic elements: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <meta charset="utf-8">
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <style>
     body {
       font-size: 0.9em;
     }
     header,
（标题）
     footer {
       padding: 10px;
       color: white;
       background-color: black;
       text-align: center;
     }
     h2 {
       text-align: center
     }
     h3 {
       text-align: right;
       padding-right: 20px;
     }
     section {
       margin: 5px;
       padding: 20px;
       background-color: lightgrey;
     }
     article {
       margin: 20px;
       padding: 10px;
       background-color: white;
     }
     nav ul {
       padding: 0;
     }
     nav ul li {
       display: inline;
       margin: 5px;
     }
   </style>
 </head>
 <body>
   <header>
     <h1>LaravelSoft</h1>
   </header>
   <nav>
     <ul>
       <li>
         <a href="https://www.w3cdoc.com/learn-html.html">Books</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/quiz/">Quizzes</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/snippets">Snippets</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/tool/">Tools</a>
       </li>
       <li>
         <a href="https://www.w3cdoc.com/string-functions/">String Functions</a>
       </li>
     </ul>
   </nav>
   <section>
     <h2>Article Section</h2>
     <article>
       <h3>Article Title</h3>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
（Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porta lorem的Pellentesque。Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porta lorem的Pellentesque。Morbi condimentum est nibh, et consectetur tortor feugiat at.）
       </p>
     </article>
     <article>
       <h3>News Article</h3>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
（Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porta lorem的Pellentesque。Morbi condimentum est nibh, et consectetur tortor feugiat at.）
       </p>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
（Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porta lorem的Pellentesque。Morbi condimentum est nibh, et consectetur tortor feugiat at.）
       </p>
     </article>
   </section>
   <footer>
     <p>&copy; 2020 All rights reserved.</p>
   </footer>
 </body>
</html>

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

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

In HTML5, there are some differences between the <section>, <article>, and <div> elements. Particularly:

  • The <section> element is specified as a block of related elements.

  • The <article> element is specified as an independent and complete block of related elements.

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

Example of the <section>, <article>, and <div> tags: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <section>
     <h1>Articles about flowers</h1>
     <article>
       <h2>Roses</h2>
       <p>
         Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
（玫瑰–花皇后-是崇拜和热爱的对象。自远古以来，玫瑰一直是崇拜和钦佩的对象。）
       </p>
     </article>
     <div>
       <h2>Lilies</h2>
       <p>
         Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
（百合-一种令人惊叹的美丽花朵，是各种球茎植物中最古老的之一。）
       </p>
     </div>
   </section>
 </body>
</html>
← HTML5 Browser Support
Character Sets →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部