## Best Practices

### HTML Mechanics and Semantics

#### HTML Mechanics

- HTML5. Use HTML5
- "Check" HTML code with the Nu Html Checker. It should pass without errors. Warnings are acceptable unless otherwise stated.
- Lowercase. Use lowercase for elements and attributes
  Best:
  `<a href="http://extension.harvard.edu/">Harvard Extension School</a>`
  Avoid:
  `<A HREF="http://extension.harvard.edu">Harvard Extension School</A>`
- Quotes. Use quotes around attribute values (typically double quotes)
  Best:
  `<a href="http://extension.harvard.edu/">Harvard Extension School</a>`
  Avoid:
  `<a href=http://extension.harvard.edu/>Harvard Extension School</a>`
- End tags. Use end tags, even if they are optional. They will help with clarity.
  Best:

      <ul>
        <li>Tea</li>
        <li>Coffee</li>
        <li>Water</li>
      </ul>

  Avoid:

      <ul>
        <li>Tea
        <li>Coffee
        <li>Water
      </ul>

- Beautify and Prettify. Indent nested block-level tags to help with readability.
  Let your editor do this for you -- for example, the Brackets "Beautify" extension by Drew Hamlett works quite well for this.
  - An exception to this rule is for production code where you might choose to minify. But for assignments, please "beautify" and "prettify"!
- Comment. `<!-- Comment your code -->` Not excessively, but enough so that the person who reads your code will be able to understand the what and why -- you might be that person! We will be that person as we grade.

#### HTML Semantics

- Use `h1`, `h2`, etc for headings
- Use appropriate elements for grouping content to define page structure and content structure. See MDN: Document and website structure:
  - Page Structure:
    - Use `main` and `header` and `footer` as appropriate
    - Use `nav` for navigation sections on your page
  - Content Structure
    - Use `article` and/or `section` if appropriate
- Use `ul` and `li` for lists
- Use `label` for form input elements
- Use `method="get"` or `method="post"` appropriately for forms
- Don't over-use`div` and `span` elements. Same goes for `class` and `id` attributes. Use, but don't over-use!

#### Avoid "div"-itis and "class"-itis and "id"-itis

Instead of...

    <div class="header">Our Solar System</div>

or even

    <div class="header"><h1>Our Solar System</h1></div>

why not...

    <h1>Our Solar System</h1>

Instead of...

    <div class="basketball">
    <ul>
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>John Calipari</li>
    ...

why not...

    <ul class="basketball">
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>John Calipari</li>
    ...

### CSS

#### CSS - Use semantic "class" and "id" values

You can choose `class` and `id` values when authoring your CSS and HTML. A good rule is to create "logical" `class` and `id` values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names | Poor Class Names
--- | ---
pageheader pagefooter globalnav gallery aside callout warn info error | blueborder rightcolumn rightnav thinborder redbold center

### "Sites"

#### Accessibility

- Meet Web Content Accessibility Guidelines (WCAG 2.1)
  - Use WAVE Web Accessibility Evaluation Tool to help identify accessibility issues.

#### File Structure and Organization

- Use folders or directories to help organize files. Recommendation is to adopt folder names of `styles` (for CSS files), `scripts` (for JavaScript files, and `images` (for images).
- Use `index.html` filename as appropriate
- Prefer filenames that only have lowercase, numeric, underscore or dashes (e.g. avoid spaces, and other things like !@#$%^&*(){}\|?/>