multiline HTML tags

multiline-html.md

multiline html tags, how do we write them?

Writing HTML in 2017 means writing markup with lots of data attributes, or writing vue templates or JSX, which means incorporating a LOT more HTML attributes to our tags than we once had to. Line lengths get crazy. How should our Code Guide suggest multilining HTML?

option A

First attribute same line as tag name, other attributes aligned

weird.

<div class="john paul ringo"
     id="beatles"
     data-band="beatles"
     data-city="liverpool">
  <span>child element</span>
</div>

option B

1 attribute per line, no dangling closing tag

nice and clean

<div
  class="john paul ringo"
  id="beatles"
  data-band="beatles"
  data-city="liverpool">
  <span>child element</span>
</div>

option C

1 attribute per line, dangling (indented) closing tag

weird, but is similar to the dangling-comma approach in Javascript in that it makes for cleaner diffs and is quicker to add new attributes

<div
  class="john paul ringo"
  id="beatles"
  data-band="beatles"
  data-city="liverpool"
  >
  <span>child element</span>
</div>

option D

1 attribute per line, dangling (unindented) closing tag

same as above with no indent on the closing tag. Might make tag hierarchy a little clearer?

<div
  class="john paul ringo"
  id="beatles"
  data-band="beatles"
  data-city="liverpool"
>
  <span>child element</span>
</div>