—HTML Series · Post 13: File Structure & Organization
HTML File Structure:
Your Project's Blueprint
A clean folder structure is the difference between a project you can maintain and a project that makes you cry at 2am. Let's set it up right from the start.
You can write perfect HTML, flawless CSS, and brilliant JavaScript — but if your files are scattered everywhere with no structure, your project is a ticking time bomb. One wrong file path and your styles vanish. One misplaced script and nothing works.
File structure isn't glamorous. Nobody's going to compliment your folder names. But it's the invisible architecture that holds everything together. And if you learn it now, you'll never have to untangle a messy project later.
This post covers three things: how to link CSS to your HTML, how to link JavaScript, and how to organize your project folders like a professional.
Linking CSS — The <link> Tag
CSS goes in its own file (never inline in your HTML for real projects). You connect it to your HTML using the <link> tag inside the <head>.
Three attributes matter here: rel="stylesheet" tells the browser this is a CSS file, href is the path to the file, and the fact that it's in the <head> means the browser loads styles before rendering the page — so users never see a flash of unstyled content.
You can link more than one CSS file. This is common in larger projects where you might split styles into reset.css, layout.css, and components.css. They load in order — so styles in the last file override earlier ones if there are conflicts.
Linking JavaScript — The <script> Tag
JavaScript gets connected with the <script> tag. But unlike CSS, where you place it matters a lot.
href for the file path. Loads before the page renders so styles are ready immediately.src for the file path. Place after HTML or use defer so it doesn't block rendering.When the browser hits a <script> tag, it stops rendering the page and downloads/runs that JavaScript first. If your script is in the <head> without defer, users see a blank page while the script loads. Put it at the bottom of <body> or use defer — both ensure the HTML loads first.
What About "defer" vs "async"?
You'll see both of these attributes on script tags. Here's the quick version:
defer — downloads the script in the background and runs it after the HTML is fully parsed. Scripts run in order. This is what you want 99% of the time.
async — downloads in the background but runs as soon as it's ready, even if the HTML isn't done. Scripts might run out of order. Use this only for independent scripts like analytics that don't interact with your page content.
Folder Structure — The Professional Setup
Here's the folder structure you should use for every project from this point forward. It's simple, scalable, and what you'll see in real-world codebases:
index.html sits in the root — it's your entry point, the first page browsers load. CSS goes in its own css/ folder. JavaScript in js/. Images in images/. Everything has a home.
When you push code to GitHub, deploy to Netlify, or hand off a project to another developer — they should be able to open your folder and immediately understand what's what. If everything is dumped in one folder with names like style2-final-FINAL.css, that's chaos. Organization is communication.
Growing Projects — The Expanded Structure
As your projects get bigger, the structure scales naturally:
Multiple HTML pages sit in the root. CSS files split by concern. JavaScript files split by feature. Same principle — just more files.
Understanding File Paths
When you link a CSS file or an image, the browser needs to know where that file lives. That's what file paths are — directions from one file to another. There are three types you'll use:
If your CSS isn't loading or your image is broken, it's almost always a path issue. Open your browser's DevTools (F12), check the Console for 404 errors, and look at the Network tab to see which file path the browser is trying to load. Fix the path, fix the problem.
Naming Conventions — The Unwritten Rules
File naming seems trivial until you deploy a project and discover that your server is case-sensitive and Hero.jpg is not the same as hero.jpg. Here are the rules that will save you pain:
Web servers look for index.html by default. When someone visits yoursite.com, the server automatically serves index.html. If your file is named home.html or main.html, the server won't find it without extra configuration. Always name your main page index.html.
My first project had everything in one folder. HTML, CSS, JavaScript, 47 images, a README, and a random text file called "notes.txt" that I used as a to-do list. Finding anything meant scrolling through a wall of files.
When I tried to deploy it, half the image paths broke because I had spaces in folder names and mixed uppercase and lowercase letters. The entire site loaded with broken images and no styles.
Spent an entire Saturday renaming files and fixing paths. Now I set up my folder structure before I write a single line of code. Every time. 📁
🔨 Mini Build: Set Up a Portfolio Project
Create a properly structured portfolio project from scratch:
The Bottom Line
File structure is one of those skills that seems boring until the day it saves you hours of debugging. CSS connects via <link> in the head. JavaScript connects via <script> at the bottom of the body (or with defer). Your project lives in organized folders with lowercase, hyphenated file names.
Set up your folder structure first — before you write any HTML. Get your links working — before you build any features. It takes two minutes and prevents hours of frustration. This is how professionals start every project.
