Web Standards

Headers

Heading Code

Level one heading

 <h1>Level one heading</h1>

Level two heading

 <h2>Level two heading</h2>

Level three heading

 <h3>Level three heading</h3>

Level four heading

 <h4>Level four heading</h4>
Level five heading
 <h5>Level five heading</h5>
Level six heading
 <h6>Level six heading</h6>

Headers

  • H1-H6 used appropriately
      • Example: An H4 should be a subheading of H3 which should be a subheading of H2 contextually.

Bold, Italics

  • <b></b> and <i></i> are not to be used
  • Use <strong></strong> and <em></em> instead
      • Only use inline
      • If a block element requires bold or italics, use CSS instead

Links ("a" Tag)

  • Link text needs to be meaningful when isolated (No "click here" links)
  • PDF's open in a new window using the attribute target="_blank" and should have title="Open PDF in New Window"
  • Title attribute is read by screen readers and also appears as tool tip text and should be used for supplemental information
  • Aria-label should be used with caution (you must test) - sometimes this will cause the link text to appear as "link" or "group" inside of the rotor menu
  • Avoid lists of links using line breaks, instead use unordered lists

Div's

  • No semantic meaning
  • Use for block
  • When possible, avoid div's whose only child is another div
      • <div>
          • <div>
              • (additional code)
          • </div>
      • </div>

Span's

  • No semantic meaning
  • Use for inline
  • Use with font-awesome icons

Phone Numbers

  • Should be wrapped in a span with the class "dialPhone"
  • Text of phone numbers should be in either of these formats:
      • xxx-xxx-xxxx
      • (xxx)xxx-xxxx
  • Extensions should go outside of the span

Lists

  • Unordered Lists (UL) should be used to group like elements
      • Ex. multiple links appearing consecutively, information about the preceding header, etc.
  • Ordered Lists (OL) should be used when order is required
      • Ex. step by step directions
  • Definition Lists (DL) should be used when there is a pairing of words and definitions