17

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.

Improve this question

4 Answers 4

Reset to default
15

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>
  1. 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>
  1. 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Personally I find it to be a good practice and I find it more readable using multiple lines. I use the same convention for websites that I make. In my college we are taught the same convention and it clearly states:

Avoid Long Code Lines

When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code. Try to avoid code lines longer than 80 characters.

The rest of the convention can be found here: https://www.w3schools.com/html/html5_syntax.asp

Improve this answer

Comments

3

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?

I think leaving the closing > is more readable but when use vscode it can't fold properly.

Unexpected, enter image description here Expected, enter image description here

Improve this answer

Comments

1

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!)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.