One of the many features in HTML5 is separation of presentation from the code (tag). HTML5 is meant to simplify the tags and heavy relies on Cascading Style Sheets (CSS) especially CSS3 to handle the presentation of the html page.
Consider this basic html page;
HTML5 version of the above page;
Note the HTML5 version has simplified previouse tags that were constant in every html page that were mainly browser necessary ie:
Open tags
changes to this simple HTML5 tag;
and meta tag
changes to this simplified HTML5 tag
HTML5 simplifies the structure of the regular page make the life of web designers & developers easier. The beauty is not just in the structure of HTML5 pages but is the use of css to handle present the HTML page
HTML introduces lots of new tags that serve various individual functions. In this basic example the new Tags used include;
<header> ..Header </header> - to give the article or the page a header.
<footer>..Footer</footer> - to give article or page a footer
<nav> <a href="link">link</a></nav> - to contain the navigation links with the page.
<section>... </section> - to separate a section of the page.
<aside>...</aside> - a separate piece of information that can be placed on the page.
Also note that most browsers latest versions only have support for HTML5 with the exception of internet explorer (upcoming Internet Explorer 9 is expected to support HTML5) but with the use of HTML5shiv project code to enable current IE browsers recognize HTML5 tags, this is inserted in the <head> tag of the html page
The associated css file is shown here;
myCSSfile.css
Screenshot of HTML5 index page
Source code of HTML5 page
Consider this basic html page;
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello World, this is HTML4.01 Driven!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>Header</h1>
<div id ="content">
<table width="50%" cellspacing="10">
<tr>
<th rowspan="20" width="15%">
Navigation<p>
<a href="">Android</a>
<a href="">Java Web etc</a>
<a href="">HTML5</a>
<a href="signup.html">Signup</a>
</th>
<th></th>
<th rowspan="20" width="20%">
Right column information is put right here in the hope
that it will be displayed and information will get
as much attention as necessary
</th>
</tr>
<tr>
<td><h2>Android</h2></td>
</tr>
<tr>
<td>Mobile development has be changed with Android game plan Everyone watch out the Droids are coming</td>
</tr>
<tr>
<td><h3>Java Web with Spring and Hibernate</h3></td>
</tr>
<tr>
<td>Java Web with Spring and Hibernate is close to MVC development that can be made</td>
</td>
<tr>
<td><h3>HTML5</h3></td>
</tr>
<tr>
<td>The web is changing at break neck speed. watch out you tags</td>
</tr>
<tr>
<td><h3>Article Footer</h3></td>
</tr>
</table>
<h3>Footer</h3>
</div>
</body>
</html>
HTML5 version of the above page;
Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello World, this is HTML5 Driven</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="myCSSfile.css">
</head>
<body>
<header>
<h1> Sofware Technology</h1>
<h2> Java Web with Spring and Hibernate</h2>
<h3> HTML5</h3>
</header>
<div id="container">
<nav>
<h3>Software Technology</h3>
<a href="">Android</a>
<a href="">Java Web etc</a>
<a href="">HTML5</a>
<a href="signup.html">Signup</a>
</nav>
<section>
<article>
<header>
Android
</header>
<p> Mobile development has be changed with Android game plan </p>
<p> Everyone watch out the Droids are coming </p>
</article>
<article>
<header>
Java Web with Spring and Hibernate
</header>
<p> Java Web with Spring and Hibernate is close to MVC development that can be made </p>
</article>
<article>
<header>
HTML5
</header>
<p>
The web is changing at break neck speed. watch out you tags
</p>
</article>
</section>
<aside>
<h3>Sofware insights</h3>
<p>The software that we are looking into is something close to the cutting edge technologies as possible</p>
</aside>
<footer>
<h2>Marakana.com</h2>
</footer>
</div>
</body>
</html>
Note the HTML5 version has simplified previouse tags that were constant in every html page that were mainly browser necessary ie:
Open tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">changes to this simple HTML5 tag;
<!DOCTYPE html>and meta tag
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">changes to this simplified HTML5 tag
<meta charset=UTF-8" />HTML5 simplifies the structure of the regular page make the life of web designers & developers easier. The beauty is not just in the structure of HTML5 pages but is the use of css to handle present the HTML page
HTML introduces lots of new tags that serve various individual functions. In this basic example the new Tags used include;
<header> ..Header </header> - to give the article or the page a header.
<footer>..Footer</footer> - to give article or page a footer
<nav> <a href="link">link</a></nav> - to contain the navigation links with the page.
<section>... </section> - to separate a section of the page.
<aside>...</aside> - a separate piece of information that can be placed on the page.
Also note that most browsers latest versions only have support for HTML5 with the exception of internet explorer (upcoming Internet Explorer 9 is expected to support HTML5) but with the use of HTML5shiv project code to enable current IE browsers recognize HTML5 tags, this is inserted in the <head> tag of the html page
Code:
<head>
...
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
The associated css file is shown here;
myCSSfile.css
Code:
/*
/* myCSSfile.css: Published with permission from the
/* author: Peter Lubbers, Kaazing HTML5 Training
*/
body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2 {
margin: 0px;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: #F47D31;
}
nav h3 {
margin: 15px;
color: white;
}
#container {
background-color: #888;
}
section {
display:block;
width:50%;
float:left;
}
article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
display:block;
width:25%;
float:left;
}
aside h3 {
margin: 15px;
color: white;
}
aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer {
clear: both;
display: block;
background-color: #F47D31;
color:#FFFFFF;
text-align:center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: #F47D31;
}
a:hover {
text-decoration: underline;
}
Screenshot of HTML5 index page
Source code of HTML5 page