Share

Format HTML Text

Jun 23, 2018 0 Comments
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

Pinger Man
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

Tags

HTML   FORMATTING  

Settings Explained
  • 1. 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>
  • 2. 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>
 
Comments 0

History
Aug 23, 2017
Tool Launched