1. Home
  2. Tools
  3. Text
  4. Formatting
  5. HTML Formatter
Share

Format HTML Text

HTML   FORMATTING  
HTML Formatter is used to Format HTML text, documents or files by indenting & syntax highlighting them. The objects are layed out in a tree like structure which can be easily expanded/collapsed. The desired indentation level can be selected from the settings.


Input: Paste HTML text below



Settings


Background Information

HTML is the most widely used markup in the world. It is served from a variety of sources running on different platforms. Even though there has been a trend in the last few years towards having tighter control on the generated markup, there still are old sites & archaic WYSIWYG editors that are plagued by markup generation issues. As such, HTML markup is often plagued by formatting incosistencies. This tool aims to solve these issues when you are trying to debug/edit the markup & don't have access to a powerful HTML markup editor. Read more at wikipedia

Settings Explained

Indentation
This setting governs how the output is indented which is something that varies depending upon your text editor settings or server side scripting language/framework that generates HTML markup. You have choice between the following indentation levels:-
  • 2 Spaces
  • 3 Spaces
  • 4 Spaces
  • 1 Tab
  • None
The indented output is easier for humans to comprehend. This is the most important use of this tool as people paste the minified or unformatted HTML that is generated by web servers and try to understand what's in it via indentation.
2 Spaces
<html>
  <body>
    <div>The name's Bond, James Bond.</div>
    <marqueue>Shaken, not stirred</marqueue>
  </body>
</html>
3 Spaces
<html>
   <body>
      <div>The name's Bond, James Bond.</div>
      <marqueue>Shaken, not stirred</marqueue>
   </body>
</html>
4 Spaces
<html>
    <body>
        <div>The name's Bond, James Bond.</div>
        <marqueue>Shaken, not stirred</marqueue>
    </body>
</html>
1 Tab
<html>
	<body>
		<div>The name's Bond, James Bond.</div>
		<marqueue>Shaken, not stirred</marqueue>
	</body>
</html>
None
<html>
<body>
<div>The name's Bond, James Bond.</div>
<marqueue>Shaken, not stirred</marqueue>
</body>
</html>
Line Breaks
If selected, line breaks are added to elements
Line Breaks: On
<html>
<body>
<div>The name's Bond, James Bond.</div>
<marqueue>Shaken, not stirred</marqueue>
</body>
</html>
Line Breaks: Off
<html><body><div>The name's Bond, James Bond.</div><marqueue>Shaken, not stirred</marqueue></body></html>
➤