Intro to HTML and CSS

HTML Tidy
OK
HTML Tidy Logo

Wikipedia Logo
Facebook Logo
Blog Logo

Tidy options

Source: 0

Comress
Tree
encoding
New page
Undo

Select What to Tidy :

Inline styles

Classes, ID’s

Empty tags

Tags with one space

Successive spaces

Remove comments

Tag attributes

Make plain text

HTML Tidy

Welcome To The Online Markup Corrector!

HTML Tidy is a web browser application whose purpose is to fix invalid web code, beautify the layout and formatting of the incorrect markup. The user interface is composed of two editors where you can edit your content in a linked visual and a source editor. The two fields are displayed side by side, giving you full control and flexibility in the HTML editing process.

html tidy
Click the logo to populate the editor with the demo!

The operation of the visual editor is very simple and instinctive because it works like any common word editor program. The control bar above the text editor lists all major features you might need. Click the icons with the small arrow pointing down to reveal and modify the hidden options.

The source editor on the right side of the screen is using colors to highlight the HTML syntax and make the tags and their attributes even more distinguishable. Above the left top corner of this section is the character counter, the undo and the the new page icons and the button to enable/disable the character encoding in the HTML editor .

Three highlighted main options help you tidy up your source code with a few clicks:

  • The Indent button sets the code indentation in two stages. When you press it for the first time the block elements will be organized in a hierarchical view, leaving the inline tags intact inside. The second time it sets the inline elements in new lines and adds the tabs to highlight the tree structure. Please note that this changes the outcome of the code because it adds white spaces even between the attached inline elements.
  • The Compress button removes the new line characters from the source code and minimizes the code.
  • The main Tidy button performs the predefined HTML cleaning options on the source code. To fine-tune these options click the dropdown icon and set the desired options with the check boxes. Your settings will be saved and will be available when you visit this site the next time.

Make sure you save this link and share it with your friends!

HTML Tidy is a project by HTML CSS JS .