How to Create template using HTML5 Semantic Elements, step to create html5 template using css, difference between html4 and HTML 5 template code, create a template using HTML5 semantic element
in this post i am going to explain how to create a template using HTML5 Semantic element and CSS.
To Create a template first you must know template creation using HTML4 Div tag .exactly what we do ?
we use multiple div in our HTML page as per our requirement suppose i want to crate following layout as shown below
Div Logo Title
|
||
Div Navigation
|
||
Div Left
|
Div Content
|
Div Right
|
Div Footer
|
||
To Create above template you need to define 6 div tag and set css property like float left or right,
problem of this method is that you are going to use div tag repeatedly .
in HTML5 we are going to use Semantic Elements specially we are going to replace div tag in HTML4 with section tag or article tag or header, footer, aside etc. as per our requirement.
lets first see which are the html5 semantic elements what its use exactly.
Semantic elements means elements with certain meaning respect to user and Browser that means when you are gong to put content in this tag content got certain importance both browser and user point of view.
following are semantic elements defined by html5 and their use
Specifies a header for a document or section
Specifies a header for a document or section
<article>
Defines an article
<aside>
Defines content aside from the page content
<details>
Defines additional details that the user can view or hide
<figcaption>
Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<footer>
Defines a footer for a document or section
<mark>
Defines marked/highlighted text
<nav>
Defines navigation links
<article>
Defines an article
<aside>
Defines content aside from the page content
<details>
Defines additional details that the user can view or hide
<figcaption>
Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<footer>
Defines a footer for a document or section
<mark>
Defines marked/highlighted text
<nav>
Defines navigation links
<section>
<section>
Defines a section in a document
Defines a section in a document
Note : Above All tag are paired tag
instead of dividing your page into different div we are going to create a different section using <section> tag
for my document i am going to give heading using <header> tag also i can use this header tag in <section> , <article> , <aside> tag to give heading to content. with <hgroup> tag.
to put image in my page i am going to use <figure> tag in that i will use <img> <figcaption> to name the image
footer of my page will be in <footer> tag
to write navigation link i am going to use <nav> tag
after writing HTML code i will apply Same CSS that was apply to my HTML4 Element template lets see first HTML4 Template and then convert it into HTML5 Template.
We are going to crate below html4 template first
HTML CSS code for above template is as follow
<html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#Div{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<Div id="header">
<h1>html5css3sourcecode.blogspot.com</h1>
<Div id="templatemo_menu">
<ul>
<li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</ul>
</Div>
</Div>
<Div id="nav">
<h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</h5>
</Div>
<Div id="section">
<p>
<Div>
<img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
<figcaption>Fig1. - What is Web Hosting.</figcaption>
</Div>
</p>
</Div>
<Div id="Div">
<h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
</Div>
</body>
</html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#Div{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<Div id="header">
<h1>html5css3sourcecode.blogspot.com</h1>
<Div id="templatemo_menu">
<ul>
<li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</ul>
</Div>
</Div>
<Div id="nav">
<h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</h5>
</Div>
<Div id="section">
<p>
<Div>
<img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
<figcaption>Fig1. - What is Web Hosting.</figcaption>
</Div>
</p>
</Div>
<Div id="Div">
<h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
</Div>
</body>
</html>
Lets we convert HTML4 template into HTML5 template we are going to use same CSS classes as shown in following image
HTML CSS code for above template is as follow
<html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#footer{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<Section id="header">
<header> <h1>html5css3sourcecode.blogspot.com</h1></header>
<NAV id="templatemo_menu">
<ul>
<li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</ul>
</NAV>
</Section>
<aside id="nav">
<h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</h5>
</aside>
<Section id="section">
<p>
<figure>
<img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
<figcaption>Fig1. - What is Web Hosting.</figcaption>
</figure>
</p>
</Section>
<footer id="footer">
<h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
</footer>
</body>
</html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#footer{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<Section id="header">
<header> <h1>html5css3sourcecode.blogspot.com</h1></header>
<NAV id="templatemo_menu">
<ul>
<li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</ul>
</NAV>
</Section>
<aside id="nav">
<h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Business</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>
<li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>
<li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>
</h5>
</aside>
<Section id="section">
<p>
<figure>
<img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
<figcaption>Fig1. - What is Web Hosting.</figcaption>
</figure>
</p>
</Section>
<footer id="footer">
<h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
</footer>
</body>
</html>