start coding

0 comments

Lets Code

We discuss about the theory so much and you may be feeling  boring for that reason.But believe me,this is the foundation of rest of the tutorial.If you did not any of these please go back and try to understand it.You may follow the footer link for more information.

So here is the basic html 5 structure


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html 5 document</title>
</head>

<body>

     <header>
                  <h2>Welcome to Learn html 5 today blog site.</h2>
                 <nav>
                           <menu>Home</menu>
                           <menu>Tags</menu>
                           <menu>API</menu>
                          <menu>Related Technology</menu>
               </nav>
       </header>
        <aside>
                   <h3>Html 5 Features</h3>
                    <ul>
                            <li>Audio</li>
                            <li>Video</li>
                            <li>Canvas</li>
                            <li>Web storage</li>
                            <li>Drag and Drop</li>
                           <li>And many more</li>
                    </ul>
         </aside>
         <section>
                      <h2>Dive into HTML 5</h2>
                     <article>
                                  <h2>What is the HTML 5</h2>
                                   <p>HTML 5 is the update version of html 4.And its brigs many new features for web developer.  </p>
                     </article>

        </section>
        <footer>
                     <h4>Copyright</h4>
                     <p>This site is copy right to MR.Tuhin Bepari.</p>
         </footer>
</body>
</html>

Please make the outline of these code .Copy the code and paste in the html box.Then click Outline this! button.You may see that nav have no heading below it so this is untitle section.This would be good practice if you give a heading for nav and then hide the heading using css.
Create Outline Now

Demonstration:


Step-1: We declare doctype and charset according to html 5 specification

Step -2:Good bye Div tags and use more meaningful tags in header,footer,section,navigation,site bar.But you have to  use some div tag for styling purposes.

Step- 3:Becarefull about the use of sectioning content which is article, aside, nav, section because each of them create a new section(chapter).

N.B:Please read following lesson for complete understand about the new symentic tag like header,footer,section,article,aside,hgroup and so on.




 

Copyright 2010 All Rights Reserved E-tech institute of IT.