style guide for multiline html

Question

I have some lengthy HTML which is over the 80 character limit for my project. We have a style guide which restricts the number of characters per line, which is good because right now the line runs so long that you can't see it all without scrolling right.

<div id="email-signup-container">
  <div id="mc_embed_signup">
    <div class="interested">
      <div class="container">

        <div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <h3>Help New York residents keep the heat on this winter.</h3>
          <a href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" class="donate-btn btn-interest">DONATE</a>
        </div>

        <div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <h3>Without heat? Visit our resources page.</h3>
          <a class="btn-interest" href="resources">RESOURCES</a>
        </div>

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

Unfortunately, I can't find any style guides that cover multilining HTML. I worked on one project where we newlined things by attribute, but it was controversial:

          <a
             href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
             class="donate-btn btn-interest">DONATE</a>

Some people wanted the closing carot on a new line like this:

          <a
             href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
             class="donate-btn btn-interest"
          >DONATE</a>

Other people wanted the closing tag at the same level as the opening tag:

          <a
             href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
             class="donate-btn btn-interest"
          >
            DONATE
          </a>

I kind of hate all of them. Can anyone point to any published style guides that cover this so we can just adopt one and move on?

score 4 · Answer 1 · answered Feb 08 '16 at 15:26

I've been wondering this as well. The only thing I could find was the guide from GoCardless, which says:

<!-- Try using line-breaks for multiple attributes, keeping the first attribute
on the tag's opening line -->

Good:

<div custom-attribute 
class="something" 
role="something-else"></div> 
<!-- The closing tag    ^^^    can stay on the same line for empty elements-->

<div custom-attribute 
class="something" 
role="something-else">
··Foo <!-- Otherwise nest plz -->
</div>

The Oddler · Answer 2 · 2017-11-23T15:19:06.067

0

Not a definite answer, but I would like to add another suggestion: indenting the attributes twice, and the content only once.

An example:

<a
        href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
        class="donate-btn btn-interest">
    DONATE
</a>

For an a tag this kind of looks weird, but for longer tag-names, as are common in Angular, it looks fine:

<my-component
        attribute1="val"
        attribute2="val2"
        attribute3="etc">
    <span>Hello :)</span>
</my-component>

edited Nov 23 '17 at 15:19

answered Nov 21 '17 at 15:44

The Oddler

6,314
7
51
94

You just gave an example without explaining what you're doing. Also no reasoning – aross Nov 23 '17 at 14:57
@aross You're right. I added a small explanation of what my example is about. Is it clear enough like that? – The Oddler Nov 23 '17 at 15:19
@TheOddler What's the benefit to indent twice on attributes? – AJ H Jan 24 '18 at 07:44
@AJHsu Just to easily see where the attributes end and the content starts. If you would only indent once the content and attributes would be on the same level, which makes it hard to see where one ends an the other begins. – The Oddler Jan 24 '18 at 10:20

style guide for multiline html

2 Answers2