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-usediv 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

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

or even

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

<h1>Our Solar System</h1>

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

<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.

"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 !@#$%^&*(){}\|?/>