Indenting HTML tags on multiple lines

Question

I can't find a guideline on how to indent HTML tags on multiple line, and the solution I am currently using doesn't really satisfy me.

Imagine we have an extremely long div declaration, such as:

<div data-something data-something-else data-is-html="true" class="html-class another-html-class yet-another-html-class a-class-that-makes-this-declaration-extremely-long" id="just-a-regular-id">

In order to avoid scrolling horizontally when I find these huge lines, I usually indent them in the following way:

<div 
    data-something 
    data-something-else 
    data-is-html="true" 
    class="html-class another-html-class yet-another-html-class a-class-that-makes-
    this-declaration-extremely-long" 
    id="just-a-regular-id"
>
    <p>Some element inside the DIV</p>
</div>

Which I think works pretty well in terms of readability, but I have some concern.

• Is this way considered a good practice?
• Would you find more readable to leave the closing > in the opening HTML Tag inline with the last element, or on a new line as I did in the example above?
• Do you have any other preferred way to deal with extremely long HTML declaration?

Feel free to share if you know some good resource about style guidelines for HTML that cover this special case, because I didn't find anything specific online.

Answer 1

The Google HTML/CSS Style Guide suggests wrapping long lines when it significantly improves readability, and offers three techniques, each of which include the closing > with the last line of attributes:

1. Break long lines into multiple lines of acceptable length:

<div class="my-class" id="my-id" data-a="my value for data attribute a"
    data-b="my value for data attribute b" data-c="my value for data attribute c">
    The content of my div.
</div>

2. Break long lines by placing each attribute on its own indented line:

<div
    class="my-class"
    id="my-id"
    data-a="my value for data attribute a"
    data-b="my value for data attribute b"
    data-c="my value for data attribute c">
    The content of my div.
</div>

3. Similar to #2 except the first attribute is on the initial line, and subsequent attributes are indented to match the first attribute:

<element-with-long-name class="my-class"
                        id="my-id"
                        data-a="my value for data attribute a"
                        data-b="my value for data attribute b"
                        data-c="my value for data attribute c">
</element-with-long-name>

In my opinion, #3 would not improve readability when the element contains content.

Answer 2

The following, is my preferred method:

<div
  class="my-class"
  id="my-id"
  data-a="my value for data attribute a"
  data-b="my value for data attribute b"
  data-c="my value for data attribute c"
  >The content of my div.
</div>

The crucial detail here is the lack of space between the closing > and the actual content.

All the following examples can be checked online:

€<span itemprop="price">13.50</span>

results in €13.50

€<span 
   itemprop="price"

     Arbitrary carriage returns and spaces here 
     BUT before closing the tag

                                   >13.50
 </span>

also results in €13.50

However

€<span 
   itemprop="price">   <!-- Carriage return + spaces in this line -->
   13.50
 </span>

or

€          <!-- Carriage return + spaces in this line -->
<span 
  itemprop="price">      <!-- Carriage return + spaces in this line -->
  13.50
</span>

Both result in € 13.50 (Mind the gap!)