ITChapters | HTML Tutorials for Beginners to Advance

HTML5 Migration

Migration from HTML4 to HTML5

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

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

Typical HTM4

<div id="header">

<div id="menu">

<div id="content">

<div class="article">

<div id="footer">

Typical HTML5

<header>

<nav>

<section>

<article>

<footer>

Change to HTML5 Semantic Elements

See this example:

<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>© 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

Previous Next