HTML Styleguide

!! IN PROGRESS !!

Basic Rules

• 2 spaces per indentation. No tabs.

Demonstration Code

Child Elements on New Line

Avoid nesting child elements on the same line as their parent. This reduces legibility of the code.

Alphabetize Attributes

For consistency, attributes should be displayed alphabetically to aid in readability.

avoid

<foo 
  disabled 
  something="else" 
  attr="blah">
  ...
</foo>

recommend

<foo 
  attr="blah"
  disabled 
  something="else">
  ...
</foo>

Attributes on their own line

• When there are 2 or more attributes, each attribute should be defined on its own line below the opening <tag-name definition.
• The closing > or /> should be on the same line as the final attribute.

avoid

<!-- attributes should be defined on separate lines -->
<foo disabled something="else" attr="blah">
  ...
</foo>

<!-- Closing ">" should be on same line as final attribute -->
<foo
  attr="blah"
  disabled
  something="else"
>
  ...
</foo>

recommend

<foo
  attr="blah"
  disabled
  something="else">
  ...
</foo>

Form Control IDs

To prevent a potential ID collision between heading anchors and control IDs, please prefix name form controls using Hungarian Notation prefixes shown below.

prefix	controls
btn	Button
chk	Checkbox
col	Color Picker
date	Date Picker
num	Number Input
rad	Radio
rng	Range Slider
sel	Dropdown Select
tel	Telephone Input
time	Time Picker
txt	Text Input (single or multi-line), Email Input
url	URL Input

example:

<form>
  <p>
    <label for="txtFullName">Full Name:</label>
    <input 
      id="txtFullName" 
      name="fullName" 
      type="text" />
  </p>
  <fieldset>
    <legend>Do you like bacon?</legend>
    <p>
     <label for="radBaconYes">Yes</label>
     <input 
       id="radBaconYes" 
       name="likesBacon" 
       selected
       type="radio" 
       value="yes" />
    </p>
    <p>
     <label for="radBaconNo">No</label>
     <input 
       disabled
       id="radBaconNo" 
       name="likesBacon" 
       type="radio" 
       value="no" />
    </p>
  </fieldset>
  <p>
    <button 
      id="btnSubmitFeedback"
      type="submit">
      Submit Feedback
    </button>
    <button 
      id="btnClearFeedback"
      type="clear">
      clear
    </button>
  </p>
</form>

Other

TBD