How to Reformat HTML in Sublime Text 2

By the end of this page, you will understand how HTML formatting works in Sublime Text 2, why automatic formatting usually comes from plugins rather than the editor itself, and how to use indentation and prettifying tools to make messy HTML easier to read and maintain.

HTML reformatting means adjusting whitespace, indentation, and line breaks so the structure of the markup is easier for humans to read.

In editors like Sublime Text 2, this is often called formatting, pretty printing, or prettifying.

Why formatting matters

Well-formatted HTML helps you:

• see nested elements more clearly
• spot missing closing tags more easily
• maintain templates faster
• reduce mistakes when editing large files
• work better with teammates

Sublime Text 2 and formatting

Sublime Text 2 is a text editor, not a full HTML formatter by itself. It can help with:

• indentation
• selecting matching tags
• syntax highlighting

But automatic full-document HTML reformatting is usually handled by a plugin or package, not by the built-in editor alone.

That means the real concept behind this question is:

• understanding the difference between basic indentation tools and automatic code formatters
• knowing when to use built-in editor commands versus installing a package

Built-in vs plugin-based formatting

A built-in indentation command can re-indent lines based on structure, but it may not fully prettify messy HTML. A formatter plugin can often:

• fix nesting indentation
• wrap attributes consistently
• normalize spacing
• format an entire document at once

So in practice, if you want HTML to "look better" automatically in Sublime Text 2, you usually use a package such as an HTML prettifier plugin.

Think of HTML formatting like organizing a messy stack of folders in a cabinet.

• HTML tags are the folders.
• Nested tags are folders inside other folders.
• Indentation is the visual spacing that shows which folder belongs inside another.

If everything is dumped into one pile, the content may still exist, but it is hard to follow. A formatter acts like an assistant who puts each folder into the right place and lines them up neatly so you can understand the structure at a glance.

Basic idea

Messy HTML:

<div><h1>Title</h1><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>

Formatted HTML:

<div>
    <h1>Title</h1>
    <p>Hello</p>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</div>

What Sublime Text 2 can do directly

Consider this HTML:

<div><p>Hello</p><p>World</p></div>

If you run a formatting or prettify command, the editor or plugin typically works like this:

1. It reads the HTML tokens.
2. It detects that <div> opens a block.
3. It sees that the two <p> elements are inside the <div>.
4. It inserts line breaks between major elements.
5. It indents the <p> tags one level deeper than the <div>.
6. It places </div> back at the outer level.

Result:

<div>
    <p>Hello</p>
    <p>World</p>
</div>

Small trace

When developers reformat HTML

Cleaning copied markup

You paste HTML from a CMS, email template, browser inspector, or generated output, and it is all on one line.

Working with legacy code

Older projects often contain inconsistent indentation and spacing. Reformatting makes the code safer to edit.

Debugging layout issues

When tags are nested incorrectly, formatted HTML makes the problem easier to spot.

Reviewing code changes

Neatly formatted HTML makes pull requests and diffs easier to read.

Editing templates

Whether you use plain HTML or template files that include HTML, clear formatting reduces mistakes.

Examples

• product page markup in an e-commerce site
• email template HTML
• server-rendered page templates
• static website files
• generated HTML snippets from scripts or APIs

In real projects, developers usually do not reformat HTML manually every time. Instead, they use repeatable tools and conventions.

Common patterns

Format before committing

Teams often format files before saving or before committing code so the codebase stays consistent.

Use shared indentation rules

Projects usually choose:

• tabs or spaces
• indentation width such as 2 or 4 spaces
• line wrapping preferences

Rely on formatter packages

In Sublime Text, developers often install packages to handle formatting rather than depending on manual cleanup.

Combine formatting with validation

Formatting improves readability, but validation checks correctness. Both are useful.

Example workflow

1. Open an HTML file
2. Run the formatter plugin
3. Check that nesting still matches the intended structure
4. Save the file
5. Commit only meaningful changes if possible

Important note

A formatter improves presentation, but it does not guarantee that your HTML is logically correct. If tags are broken or malformed, formatting may not fully fix the file.

1. Expecting built-in formatting to fully prettify HTML

Many beginners assume Sublime Text 2 has a full HTML auto-formatter built in. Usually, you need a plugin.

2. Formatting invalid HTML

Broken HTML can lead to confusing formatting results.

Broken example:

<div>
    <p>Hello
</div>

The <p> tag is not closed properly, so a formatter may produce unexpected indentation.

3. Mixing tabs and spaces

If one part of a file uses tabs and another uses spaces, the result can look inconsistent.

4. Reformatting generated code without checking output

Sometimes generated HTML or template syntax does not format cleanly. Always review the result.

5. Assuming formatting changes behavior

Formatting usually changes readability, not functionality.

These two are normally equivalent in behavior:

<div><span>Text</span></div>

<>
    Text

Built-in reindent vs HTML prettifier plugin

Manual formatting vs automatic formatting

Formatting vs validation

Quick reference

• Goal: make HTML easier to read through indentation and line breaks
• In Sublime Text 2: full HTML auto-formatting usually requires a package
• Built-in help: reindentation, indentation settings, syntax highlighting
• Common package: HTML-CSS-JS Prettify

Typical workflow

1. Install Package Control
2. Install an HTML prettifier package
3. Open the HTML file
4. Run the formatting command
5. Review the result

What formatting changes

• indentation
• spacing
• line breaks
• sometimes attribute layout

What formatting does not guarantee

• valid HTML
• correct logic
• correct nesting if the source is badly broken

Good habits

• keep indentation consistent
• choose tabs or spaces and stick to it
• validate malformed HTML if formatting looks wrong
• use formatting before major edits to improve readability

Does Sublime Text 2 have a built-in HTML formatter?

Not a full prettifier in the way many developers expect. It has indentation tools, but full HTML formatting is commonly done with a package.

What package is commonly used to format HTML in Sublime Text 2?

A well-known choice is HTML-CSS-JS Prettify. It is commonly used to prettify HTML, CSS, and JavaScript.

Can formatting fix broken HTML?

Not reliably. Formatting improves readability, but invalid or malformed HTML may still need manual correction.

Will formatting change how the page works?

Usually no. Formatting mostly changes whitespace and layout in the source code, not the behavior.

Why does my formatted file still look wrong?

Possible reasons include invalid HTML, mixed tabs and spaces, template syntax, or formatter settings that do not match your project style.

Should I format entire files in team projects?

Only when appropriate. Formatting a whole file can create large diffs, so many teams format carefully and consistently.

Is reindent the same as prettify?

No. Reindent mainly fixes indentation. Prettify tools usually do more, such as adding line breaks and restructuring layout for readability.

• HTML indentation — directly related because reformatting mainly changes indentation levels.
• Code formatting — the broader concept of automatically making source code consistent and readable.
• Package Control in Sublime Text — useful because formatting features often come from installed packages.
• HTML validation — important because invalid markup can cause poor formatting results.
• Tabs vs spaces — relevant because indentation style affects how formatted HTML appears.
• Syntax highlighting — helps visualize HTML structure while editing.
• Editor shortcuts and command palette — useful for running formatting commands efficiently.