Open In App

How to remove .html extension from URL of a static page ?

Last Updated : 16 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

All the pages on the website have a structure that is given by HTML. HTML provides the structure to content, text, tables, headings, and lists on the webpage which makes the page easy to read. While saving an HTML document it has an extension as .html. Therefore, the URL of the website has a .html extension. The .html extension can be easily removed by editing the .htaccess file.

.htaccess file

The .htaccess file is created with a Text Editor like Notepad. It is a simple ASCII file that lets the server know what configuration changes are to be made on a per-directory basis.

Note: The .htaccess is the full name of the file. It is not file.htaccess, it is simply .htaccess.

Removing .html Extension

// From  

example.com/content.html

// to
example.com/content

Steps: 

  • Log in to cPanel account.
  • In the Files section, click on the File Manager icon.
  • Click on the Settings Button in the top right corner.
  • If you want to make changes in the Primary Domain then Click on the radio button next to the Web Root. If changes are to be made on Other Domains, then Click the dropdown menu and find the domain in which changes are to be made.
  • Remember to check the checkbox next to Show Hidden Files. Now click the Save Button to return to the File Manager window.
  • Now you are in the Root Folder of the domain which you have selected to make changes. Search for the .htaccess file and right-click on it. Click on the Edit option in the menu. You can now add code to the .htaccess file.
  • Add the following code inside the .htaccess file

HTML




#remove html file extension https://example.com/page.html
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC, L]


  • Click on the Save Changes Button and then on Close Button.

You can now link any page inside the HTML document without needing to add the extension of the page as no extension will be visible now in the URL of the website.

Example:  

<a href="http://example.com/image" title="image">image</a>

The search engine may index these pages as duplicate content, to overcome this add a <canonical> meta tag in the HTML file. 

Example:  

<link rel="canonical" href="https://example.com/blog/first-blog" />

 


Similar Reads

How to Remove URL from Printing the Page ?
When you print a Web page from your Web browser, you’ll notice that the printout contains some extra pieces of information like the page number, the date and the web page’s URL at the bottom of the page. Some times you may not need this information in your printout in order to tidy up your work. So here are a few methods that let you print web page
2 min read
What is URL Locator & what are common schemes used for the URL in HTML ?
Every HTML document on the internet has a unique URL. URL stands for Uniform Resource Locator. The URL is the HTML document's address on the internet. Any file that can be accessed via the internet has a URL, including images, JavaScript files, CSS files, Flash files, and so on. To view an HTML document in a browser, enter the URL of the document i
3 min read
Convert relative path URL to absolute path URL using JavaScript
Given a relative URL, the task is to convert the relative URL to an absolute URL. Here, the base URL is also given. 2 approaches are discussed here, the first example has the baseURL provided by the user and the second takes it from the URL of the page. Approach 1: Get the relURL and baseURL from user.Use .split() method to split the base and relat
3 min read
How to redirect a page to another page in HTML ?
Redirecting a page in HTML involves sending users to a different web page automatically or upon interaction. This is typically achieved using the anchor tag's href attribute or the meta tag with the HTTP-equiv attribute set to refresh and the content attribute specifying the time delay and destination URL. Table of Content Redirect using a meta tag
3 min read
How to remove extension from string in PHP?
There are three ways of removing an extension from string. They are as follows Using an inbuilt function pathinfo Using an inbuilt function basename Using an string functions substr and strrpos Using pathinfo() Function: The pathinfo() function returns an array containing the directory name, basename, extension and filename. Syntax: pathinfo ( $pat
2 min read
How to create a static page with WordPress ?
WordPress is a free and open-source Content Management System (CMS) framework i.e. it is a tool that organizes the whole process of creating, storing and showcasing web content in an optimal way. WordPress started its journey as an improvement tool to enhance the regular typography of day-to-day writing. But it was taken as a blogging tool and as w
2 min read
How to add favicon to a static page ?
What is a favicon? A favicon, short for "favorite icon," is a small icon or image that is associated with a website. It appears in the browser's address bar, next to the page title, in browser tabs, and in bookmark lists. Favicons were introduced in the late 1990s by Microsoft Internet Explorer, and they have since become a common feature of modern
3 min read
How to create static front page in WordPress ?
Creating a static front page in WordPress can give your website a professional and customized look. Unlike the default setting where your latest posts are displayed on the homepage, a static front page allows you to showcase specific content that remains constant. This is particularly useful for business websites, portfolios, and landing pages wher
4 min read
How to get the file name from page URL using JavaScript ?
Suppose you have given an HTML page and the task is to get the file name of an HTML page with the help of JavaScript. There are two approaches that are discussed below: Approach 1: In this approach, window.location.pathname returns the relative URL of the page. Use split() method to split the URL on "/" and pop() method to get the last item from th
2 min read
How to have the class=“selected” depending on what the current page/url is ?
Having class = "selected" depending on what page / URL is. This concept is very important especially when designing a navbar for a website so that visitors on the website know on which page of the site they are on Approach: To have class=" selected" depending on what the current page/URL is : Write your HTML code. Write the CSS for the selected cla
2 min read