Basic Structure Of An HTML5 Document

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

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 Groups, Yahoo Research, StackOverflow

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.