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.
