January 2016

HTML

and Related Conventions

comic about semantics

Why Semantic HTML?

Common Flaws

  • Replacing <div> with <section>
  • Missing Close Tags That Require Closing (<body>)
  • In-Line Styling/Javascript
  • No Comments
  • Styling Via HTML (Overuse of <br>)
  • Missing 'alt' Attributes For Images

Tips

  • Paragraphs Of Text Should Be Inside <p>
  • Items In A List Should Be Inside A <ul>, <ol>, or <dl>
  • Every form input that has text attached should utilize a <label> tag. Especially radio or checkbox elements.
  • For Consistency Use" (double quotes), not ' (single quotes)
  • Avoid trailing slashes in self-closing elements. such as <br>, <hr>, <img>, <meta> and <input>

Sectioning

HTML5 Sectioning Flowchart

Lean MarkUp

Avoid unnecessarily wrapping elements in a parent element when possible. This creates extra bloat and over-specificity in the CSS.


            
            <div class="headline--bad">
              <h1>Headline</h1>
            </div>

            
            <h1 class="h1 headline--good">Headline</h1>
        

IDs vs Classes

Using IDs offers no benefit over classes and tends to cause specificity issues and having to write non-modular, non-reusable CSS. Always use classes for CSS styling hooks.
IDs can still be used for other functionality (labels).

Javascript HTML Hooks

Always use a new class with a js- prefix when adding a hook in your html for javascript.
Never use the js- hook as a styling hook in your CSS

          <div class="button button--primary js-menu-button">
              ...
          </div>

          <select class="input input--select js-date-picker">
              <option>option</option>
              <option>option</option>
          </select>
        

Class Naming Conventions

  • Separate words in a class name with a single - (hyphen)
  • Never use a single _ (underscore) to separate words in a class name
  • Never use camel-casing in class names
  • Always be descriptive when choosing your class name class="button"
  • Never abbreviate common names like button, header, footer, etc. Bad: btn, hdr, ftr
  • Always use a is- prefix for state rules that are shared between CSS and JS

          .menu {
              ...
          }

          .menu.is-open {
              ...
          }
        

BEM Naming Convention

BEM, or Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

          
            .form {}
            .form--signup {}
            .form__input {}
            .form__input--select {}
            .form__submit {}
          
        
Learn BEM

Dev Tools

A FEDs Best Friend

chrome dev tools

Resources