How to Format HTML in Notepad++

  2. HowTo
  3. HTML Howtos
  4. How to Format HTML in Notepad++
Rajeev Baniya Feb 02, 2024
HTML HTML Code
  1. Use the XML Tools Plugin to Indent the HTML Code in Notepad++
  2. Use the TextFX Plugin to Format HTML in Notepad++
  3. Use the HTMLTidy Tool to Format HTML in Notepad++
  4. Custom Code Folding and Indentation to Format HTML in Notepad++
  5. Understanding the Significance of Formatting
  6. Conclusion
How to Format HTML in Notepad++

HTML is the backbone of web development, and writing clean and well-organized HTML code is essential for creating maintainable and efficient web pages. Notepad++ is a popular text editor that offers various methods to format HTML code effectively.

In this guide, we will explore different techniques to format HTML code using Notepad++.

Use the XML Tools Plugin to Indent the HTML Code in Notepad++

Notepad++ does not have a feature of indentation by default. Therefore, we have to install a plugin to get an indentation or code auto-format feature.

We can use the XML Tools plugin in Notepad++ to get the feature of indentation. We have to install this plugin and restart the Notepad++ to use it.

Follow the steps below to install this plugin:

  • First, go to Plugins in the menu bar of Notepad++.
  • Then click on Plugins Admin.

    go to plugins

  • Another window will open with the Available, Updates, and Installed tabs.

    Search for XML tools

  • There will be a search bar in the Available tab. Search for XML Tools.
  • Check the XML Tools and click on the Install option.

    Click install

  • After clicking on Install, it will ask for permission to restart Notepad++ and install the XML Tools plugin. Just click on Yes for that permission.
  • After installation is finished, Notepad++ will reopen. To enable the XML Tools plugin, go to Plugins, click on XML Tools, and click/check Pretty print.

Or use the shortcut key, Ctrl+Alt+Shift+B. This will format or indent HTML code in a nice format.

Check pretty print

Let’s implement the auto-indentation of the HTML code below. The following screenshot shows the unindented HTML code in Notepad++.

Unindented HTML

After applying the auto-indentation using the XML Tools, the output looks like this.

Indented HTML

This is how we can use the XML Tools plugin in Notepad++ to auto-indent the HTML code.

Use the TextFX Plugin to Format HTML in Notepad++

TextFX is a powerful plugin for Notepad++ that provides advanced text manipulation capabilities, including code formatting.

Before we get started, it’s essential to ensure you have the TextFX plugin installed in your Notepad++ editor. Follow these steps to install the TextFX plugin:

  • Open Notepad++.
  • In the Plugins Admin dialog box, search for TextFX Characters.
  • Locate TextFX Characters in the list and click the checkbox next to it.
  • Click the Install button and follow the on-screen instructions.
  • Once the installation is complete, restart Notepad++ to activate the TextFX plugin.

The TextFX plugin provides a host of text manipulation tools, including powerful features for formatting HTML code. Here’s how you can use TextFX to format your HTML:

Reindent XML

  • Open your HTML document in Notepad++.
  • Select the portion of HTML code you want to format. This can be the entire document or a specific section.
  • Go to the Plugins menu, navigate to TextFX HTML Tidy, and select Tidy: Reindent XML.
  • You will see the selected HTML code gets neatly indented and formatted according to standard conventions.

    Example Before:

    <!DOCTYPE html><html><head><title>Example Page</title></head><body><h1>Hello, World!</h1><p>This is an example paragraph.</p></body></html>

    Example After:

    <!DOCTYPE html>
<html>
   <head>
	   <title>Example Page</title>
   </head>
   <body>
	   <h1>Hello, World!</h1>
	   <p>This is an example paragraph.</p>
   </body>
</html>

Strip Unnecessary White Spaces

  • Open your HTML document in Notepad++.
  • Select the portion of HTML code you want to clean up.
  • Go to the Plugins menu, navigate to TextFX Edit, and select Delete Blank Lines (Leave First).
  • This will remove any unnecessary blank lines, making your code more compact and easier to read.

    Example Before:

    <html>

   <head>
	   <title>Example Page</title>
   </head>

   <body>
	   <h1>Hello, World!</h1>
	   <p>This is an example paragraph.</p>
   </body>

</html>

    Example After:

    <html>
   <head>
	   <title>Example Page</title>
   </head>
   <body>
	   <h1>Hello, World!</h1>
	   <p>This is an example paragraph.</p>
   </body>
</html>

Convert HTML Entities

  • Open your HTML document in Notepad++.
  • Select the portion of HTML code that contains special characters or HTML entities.
  • Go to the Plugins menu, navigate to TextFX Convert, and select TextFX HTML Tidy, which will convert HTML entities to their corresponding characters.
  • This will replace HTML entities with their respective characters, enhancing readability.

    Example Before:

    <p>This is an example paragraph with special characters: &lt; &gt; &amp; &quot;</p>

    Example After:

    <p>This is an example paragraph with special characters: < > & "</p>

Use the HTMLTidy Tool to Format HTML in Notepad++

HTMLTidy is an open-source command-line tool developed by the W3C Markup Validation Service. It analyzes and cleans up HTML code by correcting errors, removing redundant or unnecessary tags, and applying consistent indentation and formatting.

Downloading HTMLTidy

Before we can start using HTMLTidy with Notepad++, we need to download and install the tool. Follow these steps:

  • Visit the Official HTMLTidy Website:

    Go to this link to access the HTMLTidy download page.

  • Choose the Appropriate Version:

    Select the version of HTMLTidy that matches your operating system (Windows, macOS, or Linux).

  • Download and Install:

    Follow the installation instructions provided on the HTMLTidy website.

Integrating HTMLTidy With Notepad++

Once HTMLTidy is installed on your system, you can integrate it with Notepad++ for seamless code formatting.

  1. Install the HTMLTidy Plugin in Notepad++:
  • Open Notepad++ and navigate to the Plugins menu.
  • Select Plugins Admin to open the Plugins Admin window.
  • In the search bar, type HTML Tidy and click on the checkbox to install the plugin.
  • Restart Notepad++ to complete the installation.
  1. Accessing HTMLTidy in Notepad++:

Once the HTMLTidy plugin is installed, you can find it in the Plugins menu under HTML Tidy.

Formatting HTML Code With HTMLTidy

With HTMLTidy integrated into Notepad++, you can now start formatting your HTML code.

  1. Select the HTML Code to be Formatted:

    Open the HTML file in Notepad++ that you want to format. Highlight the section of code you want to format.

  2. Applying HTMLTidy Formatting:

    Go to the Plugins menu and select HTML Tidy. Choose the appropriate option for your formatting needs. For general formatting, Tidy: Reindent XML is a good choice.

Consider the following unformatted HTML code:

<!DOCTYPE html><html><head><title>Example Page</title></head><body><h1>Hello, World!</h1><p>This is an example paragraph.</p></body></html>

After selecting the code and applying HTMLTidy formatting, it becomes:

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example paragraph.</p>
</body>
</html>

Custom Code Folding and Indentation to Format HTML in Notepad++

Notepad++ offers manual code folding, and indentation features that allow you to format HTML code according to your preferences.

Enabling Code Folding

Code folding allows you to collapse and expand sections of code, making it easier to navigate through large HTML files.

  • Go to the View menu in Notepad++.
  • Select Code Folding and then click on Enable.

Folding HTML Elements

  • Select the block of HTML code you want to fold (e.g., a <div> element).
  • Click on the small arrow icon that appears to the left of the line numbers.

Consider the following HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <div class="container">
            <h1>Hello, World!</h1>
            <p>This is an example paragraph.</p>
        </div>
    </body>
</html>

In this example, you can fold the <div> element containing the class "container" by clicking on the arrow next to line 5. This collapses the block, providing a cleaner view of the code.

Manual Indentation

Indentation involves adding spaces or tabs to visually separate HTML elements, making the code more readable.

  • Place your cursor at the beginning of the line you want to indent.
  • Press the Tab key to add an indentation level.

Take the same HTML code as before:

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <div class="container">
            <h1>Hello, World!</h1>
            <p>This is an example paragraph.</p>
        </div>
    </body>
</html>

By manually indenting the code, it becomes more structured and easier to navigate.

Understanding the Significance of Formatting

Clean and organized code is not just an aesthetic preference; it significantly impacts the development process. Well-formatted HTML code:

  1. Enhances Readability: Neatly organized code is easier to read and understand, facilitating quicker debugging and troubleshooting.

  2. Facilitates Collaboration: When working in a team, standardized formatting ensures everyone can easily comprehend and modify the codebase.

  3. Simplifies Debugging: Clearly formatted code isolates errors more effectively, making them easier to spot and rectify.

Conclusion

In conclusion, mastering the art of formatting HTML code using custom code folding and indentation in Notepad++ is a crucial skill for web developers. The techniques discussed in this guide, including enabling code folding, manual indentation, and utilizing plugins like XML Tools, TextFX, and HTMLTidy, provide powerful tools to enhance the readability and maintainability of your code.

By implementing these techniques, you’ll not only make your code more accessible to yourself and your team members, but you’ll also streamline the debugging process.

Remember, clean and well-organized code is the foundation of efficient web development. Embrace these methods, and you’ll be well on your way to creating exceptional web pages.