How to Create template using HTML5 Semantic Elements

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

<header>

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

<section>

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>

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>

https://drive.google.com/file/d/0B51E_9HWc8iQNllpRU9ha0NRQTA/view?usp=sharing

To download Html4 and Html5 templat click here

what is Blogger

what is Blogger, what is Blogger short info, Blogger hindi information, Blogger.com एक फ्री Blog Publishing Platform है. जिसकी सहायता से Free Blog बनाकर Texts, Images, Videos आदि आसानी से शेयर की जा सकती है. और दुनिया को अपने लेखन कौशल से अवगत कराया जा सकता है. Blogger की गिनती Content Management Systems में होती है. क्योंकि यह Content को Yearly, Monthly, Weekly, Daily, Catigarically, Labels आदि के द्वारा Manage करता है. और ये सभी Entry पाठकों के लिए उपलब्ध रहती है. Google Blogger Kya Hai in Hindi Blogger पर जो ब्लॉग बनाया जाता है. वह blogspot.com का Sub-Domain होता है. जो Google Server पर Hosted रहता है. Blogger Users गूगल सर्वर को Access नही कर पाते है. लेकिन गूगल अकाउंट से उन्हे Blogger Dashboard पर अनुमति मिल जाती है. इसलिए वे अपना Blog Manage आसानी से कर सकते. Blogspot.com के अलावा Users को Country Specifit Domain Name भी उपलब्ध करवाया जाता है. मिसाल के तौर पर एक Indian Blogger Users अगर अपना ब्लॉग बनाता है तो वह blogspot.com के स्थान पर blogspot.in का चुनाव कर

HTML5 CSS3

Search This Blog