Formatting & Indenting Your HTML. One amazing text in 2021

Why indent your code?

Let’s look at some examples of coding techniques to make it clear why you should indenting your HTML.

Wrong method 1: Everything on one line

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Problems:

  • Hard to figure out where code ends & text/content begins
  • Hard to see where the </p> is, even with wrapping turned on

Wrong method 2: 3 lines, but no indentation

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

OR

<p> 
	<a href="https://pennedweb.com">The best site))</a> 
</p>

Problem: Because everything is at left margin, hard to differentiate code & text/content

Best method: indent text/content

<p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p>

Advantages:

  • Start (<p>) & end (</p>) are at the same level, so it’s easy to see that you’ve closed code & also see where code starts & ends. Indenting your HTML
  • Easy to differentiate between code & text/content

Examples of code indentation

Here are some examples of how WebSanity likes to indent our code.

Block-level elements

<p> 
    Lorem ipsum. 
</p>
<p> 
    Lorem ipsum 
    <br />Dolor sit amet 
 </p>
<blockquote> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. 
    </p> 
</blockquote>

Note: Notice how text/content is indented inside <p>, and then <p> is indented inside <blockquote>. This is called nesting. See how easy it is to tell what’s a child of what?

<table> 
    <tr> 
        <td> 
            Lorem ipsum dolor sit amet 
        </td> 
        <td> 
            Consectetur adipisicing 
        </td> 
    </tr> 
    <tr> 
        <td> 
            Lorem ipsum dolor sit amet 
        </td> 
        <td> 
            Consectetur adipisicing 
        </td> 
    </tr> 
</table>

Note: Again with the multiple levels of indenting—but it should be obvious how much it helps reading that code!

Exceptions

<h1>Title of the page</h1>

Note: We don’t indent <h1> & other headers because they’re short, but if you want to indent <h#>, that would be fine.

<head>
    …
    <title>Document title</title>
</head>

Note: Again, we don’t indent <title> & most other items inside <head> because they’re short.

<ul> 
    <li>Lorem</li> 
    <li>Ipsum</li> 
    <li>Dolor</li> 
</ul>

Note: We don’t indent <li> because most of the time the contents are short, because we’re more concerned about the <ul> & </ul>, & because it can really lengthen the overall code. That said, if you want to indent <li>, feel free.

Inline elements

You never indent inline elements. Treat them like text/content. Examples:

<p> 
    Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, 
    sed do <em>eiusmod tempor</em> incididunt ut labore et <code>dolore 
    magna aliqua</code>. Ut enim ad minim veniam, <font size="5">quis 
    nostrud</font> exercitation ullamco <a href="https://pennedweb.com">laboris
    nisi ut aliquip</a> ex ea commodo consequat. 
</p>
<blockquote> 
    <p> 
        Lorem ipsum dolor sit amet, <a href="https://pennedweb.com">consectetur 
        adipisicing elit</a>, sed do <strong>eiusmod tempor</strong> incididunt
        ut labore et <em>dolore</em> magna aliqua. 
    </p> 
</blockquote>

What about the basic structure of a webpage?

Look at the following code. You’d think that <head> & <body> would be indented inside <html>—after all, they’re children of <head>, so shouldn’t they be indented? Indenting your HTML.

<html>
<head>
    <title>Document title</title>
</head>
<body>
    <h1>Page title</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    </p>
</body>
</html>
Indenting Your HTML
Indenting Your HTML

So why aren’t <head> & <body> indented? A couple of reasons:

  • You know that <head> & <body> are the children of <html>; in fact, they’re always the only children of <html>, so there’s no need to remind yourself of this via nesting. Indenting your HTML.
  • You save yourself one level on indentation; when you start nesting HTML inside HTML inside HTML, this can add up

Your text editor should make it easy to indent your code

You could press tab or the space bar every single time you want to indent your code, but you shouldn’t have to do that. Indenting your HTML. Fortunately, good text editors help you out when it comes to indenting.

Auto-indent

BBEdit, for instance, has a setting in its Preferences for “Auto-indent”, which it defines as follows: “When this option is selected, pressing the Return key in new windows automatically inserts spaces or tabs to indent the new line to the same level as the previous line.”

Any good text editor should have a setting like this somewhere. The trick is finding it in the editor’s Preferences or Options.

Spaces or tabs? (Spaces!)

Should you use spaces or tabs for indenting? A debate has raged on this topic for decades, with different developers insisting that theirs is the right choice. Indenting your HTML. WebSanity uses spaces, for various reasons, so that is the right choice, clearly.

Your text editor should let you choose what gets inserted when you press the TAB key: a tab or spaces. Indenting your HTML. Different text editors call that setting different things. Here are a few examples:

  • BBEdit: Preferences > Editor Defaults > Auto-expand tabs
  • Komodo Edit: Options/Preferences > Editor > Indentation > Prefer Tab characters over spaces
  • Notepad++: Preferences > Language Menu/Tab Settings > Replace by space

Note: If anyone knows of any others that I should add, let me know.

How many spaces?

The next question is, how many spaces get inserted when you press TAB? Basically, people either choose 2, 4, or 8 spaces. Indenting your HTML. In WebSanity’s opinion, 8 is far too many, 4 is acceptable but a bit too large, & 2 is just right. With 2, you can see the indentation, but lots of nesting doesn’t push your code out to ridiculous lengths, as you can see in the following:

Your text editor should let you choose how many spaces get inserted when you press TAB. Indenting your HTML. Different text editors set that in different ways. Here are some examples:

  • BBEdit: Preferences > Editor Defaults > Tab width
  • Komodo Edit: Options/Preferences > Editor > Indentation > Number of spaces per indent
  • Notepad++: Preferences > Language Menu/Tab Settings > Tab size

Note: Again, if anyone knows of any others that I should add, let me know.

Indenting several lines at once

What if you want to indent more than one line of code? Like 5? Or 25? Indenting your HTML. You could manually move the cursor to the start of each line and press TAB the requisite number of times, but that would quickly grow tedious.

Fortunately, every good text editor lets you select all the lines you wish to indent and then indent them all as a group. Indenting your HTML. This is a fantastic time saver!

Here’s how various text editors enable you to indent lines at a group:

  • BBEdit: Highlight the lines & press TAB. To backdent the lines, press Shift-TAB.
  • Komodo Edit: Highlight the lines & press TAB. To backdent the lines, press Shift-TAB.
  • Notepad++: Highlight the lines & press TAB. To backdent the lines, press Shift-TAB. Some tips for making your HTML as clean, readable, &amp; pretty as possible.

Leave a Reply