How to rename an HTML file after downloading a webpage?
After downloading a webpage, you want to rename an HTML file, like changing `index.html` to `home.html`, only to end up with a bunch of errors and broken links? Don’t worry — this tutorial is for you.
In fact, renaming the HTML file itself won’t affect the styles or images inside the page (because CSS and image paths are relative to the file location, as long as you don’t move the folder). The real source of the errors is usually that other pages are still looking for it under the old name. For example, a link in the navigation bar still points to the original `about.html`, but you renamed the file to `about-us.html` — click it, and of course you get a 404.
Below, I’ll show you a foolproof way to rename files.
Preparation (Important!)
- Make a backup of the entire template folder — copy it somewhere else so you can restore it if things go wrong.
- Download and install a code editor. A popular choice is VS Code (https://code.visualstudio.com/) (free). Don’t use Notepad; it’s too limited and easily causes encoding problems.
Step 1: Open the whole project folder with VS Code
Launch VS Code, click File → Open Folder in the top left corner, and choose the template folder you downloaded and extracted.
This way you can see all the files on the left, and the search-and-replace operation that follows will be performed across the entire folder.
Step 2: Decide exactly which file name to change and understand its connections
Suppose your template has these pages: `index.html`, `about.html`, `services.html`, `contact.html`, and they all link to each other through the navigation menu.
You want to rename `services.html` to `our-services.html`. That means every link that contains `services.html` must be updated as well.
Step 3: Global search for the old file name (precise search)
1. Press `Ctrl + Shift + F` (`Cmd + Shift + F` on Mac) to open the global search panel.
2. In the search box, type the old file name. For precision, it’s best to include the quotes — search for `"services.html"` (with double quotes).
- This accurately matches `href="services.html"` and avoids accidentally changing other text.
- Then do the same search for `'services.html'` (single quotes) to make sure nothing is missed.
3. Look at the search results; you’ll clearly see which files and which lines reference it. Typically, it’s the navigation menu (which appears on every page), footer links, and similar places.
Step 4: Replace all references in one click
1. Click the small arrow on the left side of the search box to expand the replace field.
2. In the replace field, enter the new file name: `our-services.html`.
3. First click the Replace button on the right to preview each change and check that it’s correct. Once you’re sure, click Replace All.
4. Repeat the process with the other quote style — replace `'services.html'` with `'our-services.html'`.
Now all references to the old file name inside the project have been automatically updated.
Step 5: Actually rename the file
In VS Code’s left-hand file list, find `services.html`, right-click, choose Rename, and enter the new name `our-services.html`.
Because you’ve already updated every reference beforehand, this rename won’t break any links.
Step 6: Test — click through every page
Open each `.html` file in the project with your browser, then go through all the navigation links from start to finish. Make sure that:
- Every page opens correctly with no 404.
- The updated page name appears correctly in the address bar.
- Styles, images, and scripts load properly.
If everything goes smoothly, the rename is a success! The essence is simply “update all links first, then rename the file.” With global search and replace, you can get it done in just a few seconds.
In fact, renaming the HTML file itself won’t affect the styles or images inside the page (because CSS and image paths are relative to the file location, as long as you don’t move the folder). The real source of the errors is usually that other pages are still looking for it under the old name. For example, a link in the navigation bar still points to the original `about.html`, but you renamed the file to `about-us.html` — click it, and of course you get a 404.
Below, I’ll show you a foolproof way to rename files.
Preparation (Important!)
- Make a backup of the entire template folder — copy it somewhere else so you can restore it if things go wrong.
- Download and install a code editor. A popular choice is VS Code (https://code.visualstudio.com/) (free). Don’t use Notepad; it’s too limited and easily causes encoding problems.
Step 1: Open the whole project folder with VS Code
Launch VS Code, click File → Open Folder in the top left corner, and choose the template folder you downloaded and extracted.
This way you can see all the files on the left, and the search-and-replace operation that follows will be performed across the entire folder.
Step 2: Decide exactly which file name to change and understand its connections
Suppose your template has these pages: `index.html`, `about.html`, `services.html`, `contact.html`, and they all link to each other through the navigation menu.
You want to rename `services.html` to `our-services.html`. That means every link that contains `services.html` must be updated as well.
Step 3: Global search for the old file name (precise search)
1. Press `Ctrl + Shift + F` (`Cmd + Shift + F` on Mac) to open the global search panel.
2. In the search box, type the old file name. For precision, it’s best to include the quotes — search for `"services.html"` (with double quotes).
- This accurately matches `href="services.html"` and avoids accidentally changing other text.
- Then do the same search for `'services.html'` (single quotes) to make sure nothing is missed.
3. Look at the search results; you’ll clearly see which files and which lines reference it. Typically, it’s the navigation menu (which appears on every page), footer links, and similar places.
Step 4: Replace all references in one click
1. Click the small arrow on the left side of the search box to expand the replace field.
2. In the replace field, enter the new file name: `our-services.html`.
3. First click the Replace button on the right to preview each change and check that it’s correct. Once you’re sure, click Replace All.
4. Repeat the process with the other quote style — replace `'services.html'` with `'our-services.html'`.
Now all references to the old file name inside the project have been automatically updated.
Step 5: Actually rename the file
In VS Code’s left-hand file list, find `services.html`, right-click, choose Rename, and enter the new name `our-services.html`.
Because you’ve already updated every reference beforehand, this rename won’t break any links.
Step 6: Test — click through every page
Open each `.html` file in the project with your browser, then go through all the navigation links from start to finish. Make sure that:
- Every page opens correctly with no 404.
- The updated page name appears correctly in the address bar.
- Styles, images, and scripts load properly.
If everything goes smoothly, the rename is a success! The essence is simply “update all links first, then rename the file.” With global search and replace, you can get it done in just a few seconds.
