Emmie

Appearance

Indentation ​

The goal of indentation is to make the HTML easier to read and comprehend. The goal is to make it easy to read as possible to not tire out your senses.

  • Every HTML tag under a child should have exactly 4 spaces as indentation.
  • Between a closing and opening tag should be an empty line.
  • If a tag is on multiple lines, it should have spacing between same level tags.
  • Inline tags should be a single line with small content.

Single-line ​

html
<html>
    <head>
        <title>Example</title>
        <link href="some-css-file.css" />
    </head>

    <body>
        <nav>
            <div></div>
        </nav>
    
        <div class="content-wrapper">
            <div class="sidebar">
                <h3>A short inline tag.</h3>
                
                <p>
                    This is a sidebar which has too much text to stay on a single line.
                    Because of this the p tags are on a separate line as the content.
                </p>
            </div>
            
            <div class="content">
                
            </div>
        </div>
    </body>
</html>

Multi-line ​

Sometimes an HTML-tag has too many attributes, which causes it to get more than 120 characters on a line. When this happens every attribute should go to a new line with 4 spaces of indentation, and the > should go on the last line, with the same indentation as the start of the tag.

html
<div
    v-for="item in data"
    :key="item.id"
    class="has-too-many-characters-for-a-single-line"
    :class="{'is-disabled': item.disabled}"
>
    <span>Some content</span>
</div>