HTML Folder Structure

1<!-- ✅ Always use lowercase tags -->
2<p>Good</p>
3<!-- ❌ <P>Bad</P> -->
4
5<!-- ✅ Always close tags -->
6<li>Item</li>
7<!-- ❌ <li>Item -->
8
9<!-- ✅ Always use alt in images -->
10<img src="img.jpg" alt="Description">
11<!-- ❌ <img src="img.jpg"> -->
12
13<!-- ✅ Use semantic tags -->
14<header>, <main>, <footer>
15<!-- ❌ <div class="header"> -->
16
17<!-- ✅ Use external CSS -->
18<link rel="stylesheet" href="style.css">
19<!-- ❌ Inline CSS -->
20
21<!-- ✅ Only ONE H1 per page -->
22<h1>Main Title</h1>
23<h2>Subtitle</h2>
24<!-- ❌ Multiple H1 tags -->
25
26<!-- ✅ Always add viewport meta tag -->
27-< meta name="viewport" content="width=device-width, initial-scale=1.0">
28
29<!-- ✅ Always add charset UTF-8 -->
30-< meta charset="UTF-8">
31
32<!-- ✅ Use rel="noopener noreferrer" with target="_blank" -->
33<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

1project/
2│
3├── index.html          # Home page
4├── about.html          # About page
5├── contact.html        # Contact page
6│
7├── css/
8│   └── style.css       # All CSS styles
9│
10├── js/
11│   └── script.js       # All JavaScript
12│
13├── images/
14│   ├── logo.png        # Company logo
15│   ├── banner.jpg      # Hero banner
16│   └── icons/          # Icon folder
17│       ├── home.svg
18│       └── user.svg
19│
20└── fonts/              # Custom fonts (if any)
21    └── custom-font.woff2

1<!-- In index.html (same folder) -->
2<link rel="stylesheet" href="css/style.css">
3<script src="js/script.js"></script>
4<img src="images/logo.png" alt="Logo">
5
6<!-- In about.html (same folder) -->
7<link rel="stylesheet" href="css/style.css">
8<script src="js/script.js"></script>
9<img src="images/logo.png" alt="Logo">
10
11<!-- Linking between pages -->
12<a href="index.html">Home</a>
13<a href="about.html">About</a>
14<a href="contact.html">Contact</a>