HTML Formatter - Tool Slick

URL: Fetch

Output: Formatted HTML

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>

`Ctrl` + `Alt` + `H`	Open this Help
`Ctrl` + `Alt` + `Shift` + `S`	Configure Global Settings
`Ctrl` + `Alt` + `Enter`	Format (Submit)
`Ctrl` + `Alt` + `Backspace`	Clear Output
`Ctrl` + `Alt` + `Shift` + `F`	Fullscreen Input
`Ctrl` + `Alt` + `F`	Fullscreen Output
`Ctrl` + `Alt` + `D`	Download Output
`Ctrl` + `Alt` + `C`	Copy Output
`Ctrl` + `Alt` + `U`	Focus URL Textbox
`Enter` (inside URL text box)	Load URL
`Ctrl` + `Alt` + `L`	Load Input File
`Ctrl` + `Alt` + `E`	Load Example
`Ctrl` + `Alt` + `I`	Focus Input Editor
`Ctrl` + `Alt` + `S`	Focus Settings
`Ctrl` + `Alt` + `O`	Focus Output Editor
`Ctrl` + `Alt` + `Shift` + `Up`	Expand All Output
`Ctrl` + `Alt` + `Shift` + `Down`	Collapse All Output
`Ctrl` + `Alt` + `W`	Open With Output Menu

Format HTML Text

Updated: Jun 23, 2018

Input: Paste HTML text below