Skip to content

Latest commit

 

History

History
46 lines (40 loc) · 2 KB

html.md

File metadata and controls

46 lines (40 loc) · 2 KB

HTML Coding Conventions

  • Use semantic markup

  • Use classes for styling, IDs for Javascript hooks

  • If classes are used within Javascript prefix them with js-

  • BEM Naming convention is used to give meaning and relations to css classes. Use in the following manner:

  • Attribute order: HTML attributes should follow this order for easier reading and avoiding duplicates:

    • class
    • id, name
    • data-*
    • src, for, type, href, value
    • title, alt
    • aria-*, role

  • Aria-roles should be used to improve accessibility. This is not only applicable to the structure of a page (e.g. Website structure with aria roles) but also to link elements which only share a visual bond e.g. a tooltip:

    <input id="password" type="text" aria-describedby="password-tip" required>
<div id="password-tip" role="tooltip">At least 8 characters long</div>

    Further reading: MDN on ARIA

  • Microdata: Make appropriate use of microdata e.g.

    <div itemscope itemtype="http://schema.org/Person">
  <a itemprop="url" href="http://www.interactive-pioneers.de">
    <div itemprop="name"><strong>John Doe</strong></div>
  </a>
  <div itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Interactive Pioneers</span>
  </div>
  <div itemprop="jobtitle">Developer</div>
</div>

    See schema.org and schema creator.

Linting

Use HTMLHint. Configuration file: .htmlhintrc

SublimeLinter-Plugin AtomLinter-Plugin