HTML Style Guide
Clone or download
Latest commit c07df9c Oct 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md Oct 19, 2018

README.md

< Turing HTML Style Guide >

A primarily decent approach to HTML

Style Guides

other style guides

Table of Contents

Formatting

  • Use soft tabs (2 spaces) for indentation
  • Each nested element should be indented once(including the head and body tags)

Bad

<html>
<head>
head content goes here
</head>
<body>
body content goes here
<section>
    <h1>
    heading content goes here
    </h1>
</section>
</body>
</html>

Good

<html>
  <head>
    head content goes here
  </head>
  <body>
    body content goes here
    <section>
      <h1>
        heading content goes here
      </h1>
    </section>
  </body>
</html>

back to top

Whitespace

  • There should be no empty lines in an html file

Bad

<html>
  <head>


    head content goes here
  </head>


  <body>
    body content goes here

    <section>
      <h1>


        heading content goes here
      </h1>

    </section>
  </body>
</html>

Good

<html>
  <head>
    head content goes here
  </head>
  <body>
    body content goes here
    <section>
      <h1>heading content goes here</h1>
    </section>    
  </body>
</html>

back to top

Classes and Ids

  • Class and Id names should be surrounded by double quotes

Bad

<section   class=' section ' id=' section1'>
  section content here
</section>

Good

<section class="section" id="section1">
  section content goes here
</section>    

back to top

Keeping Elements on One Line

  • Elements that are 80 characters or less including their content can be kept on one line.
<section>
  This element is longer than 80 characters in length and should be broken
  onto multiple lines.
</section>
  • Pro Tip: The 'Column' number in the bottom left corner of Sublime will tell you how many characters in the cursor is at any given time.

back to top

</>