Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|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. –  user2534 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
add comment

closed as off-topic by dan Mar 5 at 3:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Pro Webmasters as they tend to attract opinionated answers and spam." – dan
If this question can be reworded to fit the rules in the help center, please edit the question.

8 Answers

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

share|improve this answer
add comment

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.
share|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
add comment
up vote 3 down vote accepted

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).

share|improve this answer
add comment

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.

share|improve this answer
add comment

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).

share|improve this answer
add comment

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.

share|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. –  dcc Mar 4 at 16:22
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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