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

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? Email our team at [email protected]