Created: October 31st 2024
Last updated: November 28th 2024
Categories: Common Web Development
Author: Tim Fürer

HTML: How to Format

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

When coding anything, high readability and clean formatting is of utmost importance. Good readability allows you and others to more quickly understand the code. Clever formatting makes it easier to extend or change it. Both are aspects that'll increase you and your team's efficiency and reduce potential frustration.

In this article, I'll show you how I format my HTML. Do keep in mind that this is a highly subjective topic.

Basic Style

All HTML-related words are to be written in lowercase. This includes tag names (such as "div") and attributes (such as "class").
Use double-quotes (") rather than single-quotes (') for defining attribute values.

Here's an example following these rules:

<div class="foo"></div>

Lines and Indentation

Lines are individual, numbered horizontal stretches containing text. The topmost line is the first, lines that follow are placed below the prior.

By pressing "ENTER" on the keyboard, we can end and start a new line. By pressing "SHIFT" and "DELETE" (sometimes labelled "DEL"), we can remove a line.

This is a line
This is, too
And so is this

Indentation is the horizontal shift we apply to individual lines before their text begins. Since HTML is a language represented by a tree of nodes, indentation is the perfect tool to visually highlight the depth of each node.

By pressing "TAB" on the keyboard when at the start of a line, we can increase its indentation. By pressing "SHIFT" and "TAB" together, we can decrease the indentation.

No indentation
    Level 1
        Level 2

My base rules for lines are:

For every opening and closing tag (for example: <div> or </div>), start a new line after.
Exception: If there's no content between an opening and closing tag (for example: <div> </div>), a rather rare occurrence, keep them on the same line.
In-between a closing and an opening tag (for example: </div> <div>), place an additional, empty line as a buffer. Do the same in-between closing tags and text (for example: </div> text) and text and opening tags (for example: text <div>).

My base rules for indentation are:

For every opening tag (for example: <div>), increase the indentation by one level for following lines.
For every closing tag (for example: </div>), decrease the indentation by one level for following lines.

Clarifications:

Following these rules, self-closing tags (for example: <img />) are to be interpreted as closing tags.
In some cases, it's impossible to follow some of these formatting rules (for example, when working with <pre> or <textarea> tags), and it's okay to ignore them under such circumstances.

Here's an example showcasing all the aforementioned rules:

<div>
    text

    <div>
        <div>
            text
        </div>
    </div>

    <div>
        <div></div>

        text
    </div>
</div>

Attributes

Formatting attributes can be a topic in itself, thus I'm giving it its own chapter here.

If a tag only includes one attribute, keep it all on one line. Otherwise, follow these rules:

Start a new line after the tag name (for example: div) and increase the indentation by one level for following lines.
For every attribute, start a new line after.
After the final attribute, decrease the indentation by one level for following lines.

Here's an example showcasing all these rules:

<div class="foo">
   text 
</div>

<button
    id="text-button"
    class="button"
>
    text
</button>

Stacking attributes like this yields the following benefits:

It avoids crowding lots of attributes into a single line.
It gives individual attributes more horizontal space to consume (like often needed by the "class" attribute).
It allows us to quickly append more attributes if necessary.

November 12th 2024

Categories

Money money money...

HTML: How to Format

Basic Style

Lines and Indentation

Attributes