This is about live example of what is exactly page wise difference between HTML 4 and HTML 5. In HTML 4 we use div as page structure schema which is old now. Normally we make CSS classes for header,menu,section,article,footer etc. HTML 5 minimize this complexity by introducing new page structure element like header,footer,menu,section,acticle etc. these new tags simplified your page structure which was mess in previous for beginner. In upcoming example you will see a complete web page design separately in HTML4 and HTML5. After this example I am sure you will be able to understand what exactly difference between HTML 4 and 5 .
HTML 4
<!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>Girfa : Student Help HTML4 Example</title>
<style>
body {
font-family:
Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color:
black;
}
div#content {
margin: 5px;
padding: 10px;
background-color:
lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color:
white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>Raj SMS</h1>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Career</li>
<li>Facility</li>
<li>About US</li>
<li>Contact US</li>
<li>Blog </li>
</ul>
</div>
<div id="content">
<h2>Welcome Raj
SMS</h2>
<div class="article">
<h2>About Raj
SMS</h2>
<p>RAJ SMS GROUP
considers education to be a life-long process which should have a strong
foundation. The goal of the RAJ SMS GROUP is to inculcate in the students a
love for learning and a desire to excel at every level. .</p>
<p>The institution also aims at equipping the
students with the intellectual and practical skills that are necessary to meet
the challenges in the future.RAJ SMS of Institutions motto "Before self'
speaks volumes about the quality of education which the institution imparts and
the values it stands for.</p>
</div>
<div class="article">
<h2>Director
Message</h2>
<p>It is with
great pleasure to welcome you to our website. In this millennium the Computer
Education has taken the key and premier role in the professional studies and
excellence.</p>
</div>
</div>
<div id="footer">
<p>© 2017 Raj SMS. All rights reserved.</p>
</div>
</body>
</html>
HTML 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> >Girfa : Student HTML5 Example</title>
<!--[if lt
IE 9]>
<script
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<style>
body {
font-family:
Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color:
black;
}
section {
margin: 5px;
padding: 10px;
background-color:
lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color:
white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<header>
<h1>Raj SMS</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Courses</li>
<li>Career</li>
<li>Facility</li>
<li>About US</li>
<li>Contact US</li>
<li>Blog </li>
</ul>
</nav>
<section>
<h2>Welcome Raj SMS</h2>
<article>
<h2>About Raj SMS</h2>
<p>RAJ SMS GROUP
considers education to be a life-long process which should have a strong
foundation. The goal of the RAJ SMS GROUP is to inculcate in the students a
love for learning and a desire to excel at every level. .</p>
<p>The
institution also aims at equipping the students with the intellectual and
practical skills that are necessary to meet the challenges in the future.RAJ
SMS of Institutions motto "Before self' speaks volumes about the quality
of education which the institution imparts and the values it stands for.</p>
</article>
<article>
<h2>Director Message</h2>
<p>It is with
great pleasure to welcome you to our website. In this millennium the Computer
Education has taken the key and premier role in the professional studies and
excellence.</p>
</article>
</section>
<footer>
<p>© 2014
Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
No comments:
Post a Comment