Welcome to Day 3 of learning HTML
Today, we will be learning about HTML File Path , HTML boilerplate and classes , div ,Id . Let's get started!
Content of Day 3 session
- File Path
- HTML Boilerplate
- Classes & Id
- div, Header, Footer
1. File Path
A file path is a string that specifies the location of a file or directory in a file system. There are two types of file paths: absolute and relative.
types of File Path
- Absolute Path: C:\Users\Shivam\Documents\file.txt
- Relative Path: ../images/picture.jpg
In the above example, the absolute path specifies the complete location of the file.txt file on the C: drive, while the relative path specifies the location of the picture.jpg file relative to the current directory.
2. HTML Boilerplate
HTML boilerplate is a basic template that provides the essential structure and elements needed to create a web page. It typically includes the following elements:
Example of HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
This boilerplate includes the doctype declaration, html element with language attribute, head element with meta tags for character encoding and viewport settings, and title element for the page title. The body element is where the main content of the web page will go.
3. Classes & Id
Classes and IDs are used to identify and style HTML elements. A class is a reusable identifier that can be applied to multiple elements, while an ID is a unique identifier that can only be applied to one element.
Example of Classes & Id
<div class="container" id="main-content">
<h1 class="title">Welcome to My Website</h1>
<p class="description">This is a sample website.</p>
</div>
In the above example, the div element has a class of "container" and an ID of "main-content". The h1 element has a class of "title", and the p element has a class of "description". These classes and IDs can be used to apply CSS styles or JavaScript functionality to the elements.
4. div, Header, Footer
The div element is a container that is used to group other HTML elements together. It is often used for layout purposes and to apply styles to a group of elements. The header and footer elements are used to define the header and footer sections of a web page, respectively.
Example of div, Header, Footer
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<p>This is the main content of the page.</p>
</div>
<footer>
<p>© 2025 My Website</p>
</footer>
In the above example, the header element contains a heading and a navigation menu. The div element with a class of "content" contains the main content of the page. The footer element contains a copyright notice.