Basic Structure Of An HTML5 Document

Someone asked me how to make a webpage. An HTML document is the most basic thing in making a webpage. So here’s its basic structure.

Basic Structure Of An HTML Document

Step 1: Create an index.html file. It should have the following codes.

HTML

<html>
     <head>
          <title><!--here is where your page title goes--></title>
         <!--here is where your css code/link goes-->
     </head>
<body>

     <!-- here is where your page content goes -->

     Just a sample content

     <!-- here is where your javascript goes
         (before, it is usually in the <head> section, but for better page
         performance, JavaScripts are coded at the bottom part of the page***.)
    -->
</body></html>

You should see “Just a sample content” text in your web browser when you run this. Then for HTML5, the same principles apply, it’s just there are more on it.


HTML5

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Website</title>
    </head>
<body>

    <header>
        <nav>
            <ul>
                <li>Menu Option 1</li>
                <li>Menu Option 2</li>
            </ul>
        </nav>
    </header>

    <section>

    <article>
        <header>
            <h2>Content Title</h2>
            <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
        </header>
        <p>Some content of the article here.</p>
    </article>

    </section>

    <aside>
        <h2>The Blogger</h2>
        <p>This is your side bar. You can add your information or links here.</p>
    </aside>

    <footer>
        <p>Copyright 2013 - Your name</p>
    </footer>

</body>
</html>

Beginners may need this one. See more at W3Schools. Latest and more advanced HTML5. Thanks for reading! 🙂

***Google GroupsYahoo ResearchStackOverflow


Comments

2 responses to “Basic Structure Of An HTML5 Document”

  1. Anonymous Avatar
    Anonymous

    really? how can you say that the App will perform well if the javascript is putted in the Body tag? any proofs?

  2. Please check the references links first.

Leave a Reply

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