问题
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.
回答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:
- 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>
- 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>
- 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.
回答2:
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
回答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, Expected,
回答4:
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!)
来源：https://stackoverflow.com/questions/44944936/indenting-html-tags-on-multiple-lines