CODEWITHSUNDEEP
htmlcoding-stylemultiline
williamcodes
williamcodes

Reputation: 7236

style guide for multiline html

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?

Upvotes: 22

Views: 5410

Answers (2)

The Oddler
The Oddler

Reputation: 6708

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>

Upvotes: 1

aross
aross

Reputation: 3606

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>

Upvotes: 4

Related Questions