HTML Course | Understanding and Building Project Structure

Course Navigation

We have created all of the directories needed for our project. Let’s just start writing our HTML code. Since we are designing a single page website – Website with a single HTML page( No internal links ). So, we will write all of our codes in the file “index.html”. We donot need any other HTML to create for this project.

Before we begin with writing code, keep in mind these two things:



  • All of our HTML code will be in the “index.html” file.
  • All of our code will follow the standard HTML5 rules.

What is HTML5?

HTML5 is the fifth version of the HTML scripting language. It supports a lot of new things that older versions of HTML does not. For Example: In HTML5 there is something new called the Semantic Elements. Semantic elements have meaningful names which tell about the type of content. For example header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them. To learn more about what’s new in HTML5, please visit:

Let us now start with actually coding our website. Remove everything from your index.html and only keep the standard HTML structure. That is, your index.html will now look like as something below:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
<title>Sample Webpage</title>
</head>
<body>
  
</body>
</html>

chevron_right


Let us now divide our website in smaller parts following the HTML5 semantics. We will divide the page in different parts as follows:

  1. HEADER: This will be further divided into:
    • Nav: Navigation menu.
    • Image Section: To contain the image.
  2. MAIN: This will further contain smaller SECTIONS to display different information.
  3. FOOTER

Let us have a look at the below images for clear understanding of the division stated above:

  • Header with Navigation menu and Image:
  • Body with different Sections:
  • Footer:

Write the following code in your index.html file to create all of the sections as shown above:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
    <head>
        <title>
            First Web Page
        </title>
    </head>
  
    <body>
        <!-- Header Menu of the Page -->
        <header>
            <!-- Top header menu containing
                 logo and Navigation bar -->
            <div id="top-header">
                <!-- Logo -->
                <div id="logo">
  
                </div>    
                <!-- Navigation Menu -->
                <nav>
                      
                </nav>
            </div>    
  
            <!-- Image menu in Header to contain an Image and 
                 a sample text over that image -->
            <div id="header-image-menu">
  
            </div>
        </header>
  
        <!-- Main content between Header and Footer -->
        <main>
            <!-- Section 1 of Main content -->
            <section>
                  
            </section>
  
            <!-- Section 2 of Main content -->
            <section>
                  
            </section>
  
            <!-- Section 3 of Main content -->
            <section>
                  
            </section>
        </main>
  
  
        <!-- Footer Menu -->
        <footer>
              
        </footer>
    </body>
</html>

chevron_right


If you run the above code, you will see an empty web page as till now we are not printing anything. In the above code we have just outlined the skeleton of the website using the available tags in HTML5. In the next article we will see how to design the Header menu using styles and CSS.



My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.