2013, 29 Jun

Creating HTML5 Basic Website – Body (Part 2)

Post under : HTML 5 Tutorial. Tags: . Leave a reply
creating html5 basic website

creating html5 basic websiteIn my last html 5 tutorial I have shown you on how to create basic html5 website header. I hope you have checked it.  If not, please check this HTML5 Header Tutorial first and come back here. Now I am going to show you on creating HTML5 basic website body.

In html5 website few magnificent changes take place and make the complete html5 website more comprehensive.

Earlier in HTML4 website to define a header, menu, article, sidebar and footer, we need to use:

  • <div id=”header” class=”header”> </div>
  • <div id=”menu” class=”menu”> </div>
  • <div id=”main-article” class=”main-article”> </div>
  • <div id=”sidebar” class=”sidebar”> </div>
  • <div id=”footer” class=”footer”> </div>

But in HTML5 it becomes much easier to declare the header, nav, article and footer in website. It looks like:

  • <header> </header>
  • <nav></nav>
  • <article></article>
  • <aside></aside>
  • <footer></footer>

To find out more about HTML5, please visit  w3schools.

To continue this tutorial, I am going to re-open my index.html file from my html5 header tutorial.

Header in HTML5 basic website looks like this:

Now I am going to add a new tag called <body></body> after the </head> tag.

It will be look like:

  • </head>
  • <body> </body>
  • </html>.

This <body> </body> will display the content of website. Mandatory HTML5 tag you need to use in body sections are:

  •  <header> </header>
  • <nav></nav>
  • <article></article>
  • <aside></aside>
  • <footer></footer>

So my complete html5 basic web site code will be :

Download this complete basic html 5 index.html file with body tag from below box :

HTML 5 Basic Website - Body
946.0 B
24 Downloads
Details...

If I run this this basic website in my web browser, it will be look like below picture:

creating html5 basic website

So we have successfully created html5 basic website . But the journey not yet finished. We need to do some designing to make this website more attractive to the visitors. So in my next tutorial, I will show you on how to design this website using CSS3.

Be the first to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">