HTML Course | Understanding and Building Project Structure
Last Updated :
24 Nov, 2024
Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.
Course Navigation
Understanding and Building Project StructureWe have already 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 don't 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(if any) and only keep the standard HTML structure. That is, your index.html will look like as something below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sample Webpage</title>
</head>
<body>
</body>
</html>
Let us now divide our website in smaller parts following the HTML5 semantics. We will divide the page in different parts as follows
- HEADER: This will be further divided into
- Nav: Navigation menu.
- Image Section: To contain the image.
- MAIN: This will further contain smaller SECTIONS to display different information.
- FOOTER
Let us have a look at the below images for clear understanding of the division stated above
- Header with Navigation menu and Image
Understanding and Building Project Structure- Body with different Sections
Understanding and Building Project Structure
Understanding and Building Project Structure Write the following code in your index.html file to create all of the sections as shown above:
HTML
<!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>
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.
Similar Reads
Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De
4 min read
HTML Course | Structure of an HTML Document HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step. Structure of an HTML DocumentWhat is an HTML Document?HTML is a ma
4 min read
HTML Course | First Web Page Printing Hello World So far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you un
2 min read
HTML Course | Basics of HTML Now that you've created your first "Hello World" webpage, it's time to learn some important concepts of HTML. In this chapter, we’ll cover basic elements that add content and structure, including paragraphs, images, lists, attributes, comments, and more. Table of ContentHTML Paragraph HTML Horizonta
6 min read
HTML Course | Starting the Project - Creating Directories Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your
3 min read
HTML Course | Understanding and Building Project Structure Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code
3 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
HTML Course | Creating Navigation Menu A navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML.Course Navigation HTML Course : Creating Navigation MenuIn the last chapter, we have created the entire
6 min read
HTML Course | Building Header of the Website The header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th
4 min read
HTML Course | Building Main Content - Section 1 The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head
4 min read