15

I've already spent about 2 hours searching google and trying various tools but either they don't do indent tags per say or they aren't HTML5 compatible such as the famous HTML tidy which was last updated 3 years ago…

N.B. I don't want to apply this to the source of a page (like PHP or JS would do) but to the code in the editor so that a clear hierarchy appears between tags.

Ideally I'd like a Mac OS X tool but I'll take any online tool and in last resot a Wine compatible one.

P.S. at the moment I use Coda from Panic

Improve this question
  • 2
    Netbeans supports code-formatting via SHIFT+ALT+F, most editors have a similar function – check the manual of one you use. See also: groups.google.com/group/coda-users/browse_thread/thread/… – feeela Sep 16 '11 at 9:36
  • Netbeans does it (thx) but not Coda as your link shows. – WaterBearer Sep 16 '11 at 10:03
  • But there are two other programs mentioned in the linked discussion that do… – feeela Sep 16 '11 at 10:17
  • I imagine if you look you will find a Coda extension that adds support for HTML5 elements. – Moses Sep 16 '11 at 17:56
6

Aptana Studio 2 does what you want in the menu Edit > Format. I've used it and it formats html, css and javascript.

The WYSIWYG editor BlueGriffon also can also format html when you open a file.

Both solutions are free and open-source, but Aptana might be better. I'm not sure if BG keeps all the code unchanged, probably not.

Notes:

  1. Aptana 2 needs to be properly configured after you install it, but it's a great html5/css/javascript editor/IDE. The default config sucks a little.
  2. Aptana 3 might not do what you want. The version I've tried didn't do it.
Improve this answer
  • Personally, I dislike it for the Eclipsish IDE (I don't like Eclipse :P). – Alerty Oct 13 '11 at 1:11
  • Aptana is a great program for html/css/js, keeping track of opening and closing bracket or braces in javascript in really large functions is a pain in dreamweaver. – Anagio Mar 20 '12 at 14:05
  • Thank you this has just saved my life after moving my project files from another IDE to Aptana and the indentation getting messed up. I was manually re-indenting all my thousands upon thousands of lines. In Aptana 3 this is under the Source menu > Format. – bowlerae Jul 12 '19 at 3:19
6

There's now an HTML5 version of tidy, found here: https://github.com/w3c/tidy-html5.

Improve this answer
3

I was looking for an online tool and that's probably why I failed to find anything.
I was pointed to the Coda plugin PHP & Toolkit that does it. Also most HTML editors like Taco do it natively (but not Coda).

Improve this answer
1

I humbly suggest Espresso 2.

From their website:

The one and only CSSEdit 3 — CSSEdit's award-winning visual tools, now inside Espresso. With awesome CSS3 support for multi-browser gradients, shadows and more.

Web Preview with X-ray — See how your CSS affects web layouts, visualize margins and padding, and quickly find the relevant style rules for any page element.

Powerful and Efficient Coding — CodeSense, code folding, smart snippets, Zen coding and the drag-and-drop Navigator help you write better code in less time.

Live Styling and Overrides — Edit any website's CSS and see it update in real-time. No need to save, publish or reload. Experimenting and tweaking has never been this fun.

Effortless Sync and Publishing — With Quick Publish, Server Sync and Browse, you have the right tool for any server-based workflow. The new Vroom engine is super-fast.

A Workspace That Fits Into Your Workflow — The innovative Workspace gives you the flexibility of Tabs while integrating smoothly with your Project files.

Fantastic Find — Needle and haystack, meet Espresso. Project-wide Find and Replace, Quick Filter and colorized regex make searching through files or text a breeze.

Language Support — Improved HTML5, CSS3, JavaScript and PHP; all-new Ruby, Python, Apache and Markdown. Or extend Espresso with XML/JS Sugars.

You could read a review from Mac Appstorm to have an idea of the quality. They give it 10/10.

Improve this answer
1

Eclipse seems to do a decent job of indenting/formatting HTML5. You just use the usual format command (Ctrl-Shift-F) on an HTML file loaded in the HMTL editor and it will reformat it.

To adjust it, go to preferences --> web --> html files --> editor. You can also control validation here. (I'm using Eclipse v4.2.2.)

Note that the HTML editor requires that your Eclipse installation include the Web Tools Platform (see this answer for details).

Improve this answer
0

If you're looking for a Mac OS X tool that does the job, I'd say TextMate.

I usually do a lot of re-indenting and the best one that I've been able to find has been that one.

What I like is that it doesn't actually rearranges your code, but it re-indents it, in a form that checks the nesting and indents by level, not by tags.

The "Indent Selection" feature is specially useful.

Improve this answer
  • I use textmate, when did they introduce a good formatting action for HTML? Please share as all the ones I've found have been pretty bad. Though I am still using 1.5. – davidcondrey Mar 4 '14 at 16:22
0

JetBrains PhpStorm works great and intuitive with indents in HTML, CSS or PHP. Type of indent (tabs or spaces) you can change in PHPStorm settings.

Improve this answer
0

Dirtymarkup.com is my go to for quickly formatting HTML and JS.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.