A website is actually a bunch of files (HTML, CSS, images, etc.) organized in folders—not just one file. To make everything show up on a page, HTML needs precise instructions on where to find each file.
Relative vs. Absolute Paths
Relative Paths (for Your Own Files)
Meaning: Directions are given based on where your current file is.
How It Works:
Same folder: about.html
Inside a subfolder: images/logo.png
One folder up: ../images/logo.png
Example Project:
From index.html to logo.png: images/logo.png
From pages/contact.html to logo.png: ../images/logo.png
Rule: Use these for all links to your own files — so your site works everywhere, on any server, without editing links.
Absolute Paths (for External Files)
Meaning: Full internet address for something not on your site.
Rule: Use only when linking outside your own website (fonts, images, other sites). Never use your computer's folders as image sources!
Operating System Differences
Windows: C:\Users\Name\Documents\file.txt (starts with a drive letter, uses backslashes)
Mac/Linux: /Users/name/Documents/file.txt (starts with a slash, uses forward slashes)
In HTML, always use forward slashes / for compatibility.
HTML Boilerplate
Why use Boilerplate?
Browsers expect every web page to have a predictable, standard structure so they can display it correctly. The boilerplate tells browsers what rules to follow, what language the page is in, and helps make the website accessible and mobile-friendly.
A Modern Boilerplate:
Explained Simply:
<!DOCTYPE html>: Says "I'm an HTML5 page!"
<html lang="en">: Page language is English
<meta charset="UTF-8">: Handles all special characters smoothly.
<meta name="viewport">: Makes the site look good on mobiles and desktops.
<title>: Sets browser tab and search engine title.
Multipage Website Basics
Make separate HTML files for each section (Home, About, Contact).
Use navigation links (<a href="about.html">About</a>) on every page so users can jump between them.
Keep the same headers and footers so every page looks like part of one website.
Grouping and Labeling Elements for Design
<div>: Group Elements into Boxes
Use to wrap together sections, images, text, or anything you want to style or move together.
Think of it as putting related stuff in one big invisible box.
class and id: Naming and Targeting
class: Like a job title; many elements can use the same class for shared styling. <div class="profile-card"></div>
id: Like a unique Aadhaar number; only one per page, perfect for unique areas. <div id="main-header"></div>
<span>: Highlight Part of a Line
Wrap a word or two within a line for special styling—without breaking the paragraph.
Used like a highlighter for specific words in text. <span class="important">very important</span>
HTML Semantic Layout Tags
<header>: The top of the page or a section (logo, navigation).
<footer>: Bottom (copyright, contact).
<main>: Main content of the page (only one per page).
Use these to help browsers, search engines, and screen readers understand your site.
Best Practices and "Why"
Always use relative paths for your own files: works on other computers and servers.
Use the HTML boilerplate: ensures every browser knows how to display your site correctly.
Don't skip these steps! It's all about making your website professional, reliable, and accessible for everyone.
