Formatting and indenting a code is one of the features of a sublime text editor.

It can be done automatically or manually using the command.

For example, if you have HTML content like this

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div><div><h1></h1><p></p></div></div>

  </body>
  </html>

The result is indented HTML as below.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div>
      <div>
        <h1></h1>
        <p></p>
      </div>
    </div>

  </body>
  </html>

There are multiple ways we can format a code in sublime text.

Using inbuilt formatter reindent or use plugins such as tag, HTML-CSS-JS Prettify

How to format and indent HTML code in Sublime text

Let’s see how to format with an inbuilt reindent feature.

Here are steps to format and indent an HTML code.

  • Open an HTML file in sublime text
  • Select the file content using ctrl+A command, It selects all the content.
  • Go to Edit Menu - Select Line + Select Reindent.
  • This formats the HTML files