Coding Standards

1. HTML Structure

The HTML document must use the following structure. You can copy the HTML Starter Code. Anything less than this is a coding standard violation. Make sure all attributes are included, as are all elements, and comments.

The first line of all html document's is the doctype
The html opening tag needs to have the lang attribute set to "en"
The head must have a title element, and a meta element
The meta element must have the charset attribute set to "utf-8"
The body element must have a header, main, and footer element

Example: HTML Structure

Correct HTML Structure

<!DOCTYPE html>
<!--
  Author: firstName lastName
  Date: mm/dd/yyyy
-->

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Title goes here</title>
</head>

<body>

    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
</body>
</html>

2. Comments

Comments (name and date) on each HTML and CSS page are required

Example: HTML Comments

Correct HTML Structure

<!--
Author: firstName lastName
Date: mm/dd/yyyy
-->

Correct CSS Comments

/*
firstName lastName
mm/dd/yyyy
*/

3. Blank lines

Opening <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>,<div>, and <body> tags begin on a new line and with a blank line above them. This improves legibility.

Example: Blank lines in HTML

Correct - Blank lines above <header>, <main>, <footer>, and <body>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Title goes here</title>
</head>

<body>

    <header>
    </header>

    <main>

            <article>
            </article>

            <aside>
            </aside>
    </main>

    <footer>
    </footer>
</body>
</html>

Incorrect - Missing Blank lines above <header>, <main>, <footer>, and <body>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title goes here</title>
</head>
<body>
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
</body>
</html>

4. Indentation

Each nested element must be indented by four spaces. You can configure your text editor to have the tab key insert four spaces. This improves legibility.

The only exception is the <head> and <body> elements do not need to be indented within the <html> element.

VS Code: Setting set to indent by 4 spaces

5. Lowercase letters

Lower case letters must be used for all elements and attributes. Look at some of the correct and incorrect example below. Make sure you're evaluating the difference between an element, an attribute, and a selector (CSS).

Example: Case of HTML, HTML Attributes, & CSS

Correct - HTML tags all lowercase

<head></head>
<header></header>
<body></body>

Incorrect - HTML tags include uppercase letters

<Head></Head>
<HEADER></HEADER>
<bODy></bODy>

Correct - HTML attributes all lowercase

<html lang="en">
<body id="rightContent">
<p class="price">

Incorrect - HTML attributes include uppercase

<html Lang="en">
<body ID="rightContent">
<p cLaSS="price">

Correct - CSS selectors, properties, and values all lowercase

section {property: value}
body {property: value}
h1 {property: value}

Incorrect - CSS selectors, properties, and values include uppercase

Section {Property: Value}
BODY {property: value}
HI {property: value}

6. Two-sided elements

All two-side elements must be closed. All elements that contain content are considered two sided elements and must have an associated closing tag. For example, a paragraph has an opening tag, content in middle, and a closing tag. The correct syntax is: <element>content in the middle</element>

Note: If the HTML validator does not catch the missing closing tag, it is still a coding standard that needs to be followed.

Example: Closing Two-Sided Elements

Correct - Two-sided element properly closed

<p>This is a paragraph with content.</p>
<title>Web Page Title</title>
<li>My list item content</li>

Incorrect - Two-sided element properly not closed

<p>This is a paragraph with content.
<title>Web Page Title
<li>My list item content

7. Closing tag order

HTML tags must be closed in the correct order. All nested tags (child elements) need to be closed in the proper order. Make sure you start an element with the opening tag, create the opening tag of the nested element, close the nested element with a dosing tag, then close the parent element with a closing tag.

Example: Closing Tags

Correct - Tags closed in the correct order"

<div>
    <p>The <strong>best</strong> chocolates</p>
    <ul>
        <li>Dark</li>
        <li>Milk</li>
        <li>All chocolate from <em>cocoa beans</em> should be on this list</li>
    </ul>
</div>

Incorrect - Tags closed in the incorrect order" Notice the incorrect placement of the closing p/strong, li/em, and ul/div tags

<div>
    <p>The <strong>best</p> chocolates</strong>
    <ul>
        <li>Dark</li>
        <li>Milk</li>
        <li>All chocolate from <em>cocoa beans</li> should be on this list</em>
    </div>
</ul>

8. Attributes values in quotes

All attribute values must be enclosed in quotes. HTML attributes provide additional information about HTML elements and are placed in the opening tag of an HTML element. The attribute may have a value associated with it and must be encapsulated in quotes.

Example: Attribute values

Correct - Attribute values enclosed in quotes

<p id="levelOne">
<span class="price">
<img alt="Leaves blowing in the wind">

Incorrect - Attribute values not in quotes

<p id=levelOne>
<span class=price>
<img alt=Leaves blowing in the wind>

9. Paragraph use

Block-level elements must not be coded within <p> elements. Nesting block-level elements within paragraph elements disrupts the structural hierarchy and may lead to unpredictable rendering or styling issues in web browsers. It is okay to have inline-element within a paragraph element.

Example: Proper <p> use.

Correct - No block-level elements within a <p>

<article>
    <p>A paragraph inside of an <em>article</em> element. </p>
</article>
<div>
    <p>A paragraph inside of a <em>div</em> element.</p>
</div>
 <section>
    <p>A paragraph inside of a <em>section</em> element.</p>
</section>

Incorrect - Block-level elements within a <p>

<p>
    <article>An <em>article</em> inside a paragraph element is not allowed.</article>
    <div>A <em>div</em> inside a paragraph element is not allowed.</div>
    <section>A <em>section</em> inside a paragraph element is not allowed.</section>
</p>

10. `alt` attribute

The alt attribute must be used and contain legible text in all image elements. The text within the alt attribute must fulfill the same function as the image. Not all web users are visual, some are blind, color-blind, or have other vision deficiencies. Therefore images must provide alternative text that describes the purpose of the image as a replacement to communicate the image's intent.

Example: alt attribute text

Correct - Image that conveys mood - alt attribute describes mood, which is the intent of image

<img alt="Colorful umbrellas suspended against a clear blue sky creating a cheerful and whimsical canopy" src="images/colorful_umbrellas.jpg">

Incorrect - Image that conveys mood - alt attribute does not convey intent of image

Colorful umbrellas suspended against a clear blue sky, interspersed with palm tree tops, creating a cheerful and tropical canopy

<img alt="Umbrellas" src="images/colorful_umbrellas.jpg" >

Correct - Image that informs - alt attribute conveys information, which is the intent of image

<img alt="An americano coffee is 1/3 espresso and 2/3 water" src="images/americano" >

Incorrect - Image that informs - alt does not convey the same information as the image

An americano coffee is 1/3 espresso and 2/3 water

<img alt="americano coffee graphic" src="images/americano.png" >

Correct - Image that performs an action - alt attribute describes action, which is the intent of image

<img alt="Add new user" src="images/add_user.png">

Incorrect - Image that performs an action - alt does not describe purpose of image

<img alt="head outline with a plus sign" src="images/add_user.png" >

11. Attribute equal sign

No spaces are allowed around the attribute equal sign. Attributes that contain a value need the value set in quotes after an equal sign. Do not add a space after the attribute or after the equal sign.

Example: No spaces around attribute equal sign

Correct - No spaces around attribute equal sign

<p id="levelOne">
<span class="price">
<img alt="An americano coffee is 1/3 espresso and 2/3 water">

Incorrect - Spaces around attribute equal sign

<p id ="levelOne">
<span class= "price">
<img alt = "An americano coffee is 1/3 espresso and 2/3 water">

12. Depreciated elements

Depreciated elements and attributes are not allowed. Full list of depreciated HTML elements and attributes.

Elements such as, <big>, <center>, <font> are depreciated and not allowed.
Attributes such as, align=, width=, height= are depreciated and not allowed.

13. Pathways

Only use relative paths. Site root pathways and drive letters are not allowed. The below pathways are not allowed:

Root path: A path starting with a forward slash (/).
Absolute or directory path: A path starting with a computer directory, i.e., C:\Users or Users/YourName.
Relative path staring with ./: A path that starts with ./ indicates the current directory and is not necessary and redundant.

Example: Pathways

Correct - Correct relative paths

<link rel="stylesheet" href="stylesheet/main.css">
<img src="../images/soup.png" alt="Steaming bowl of chicken noodle soup served with crackers and a spoon on a kitchen table">
<a href="index.html">Go Home</a>

Incorrect - Site root or absolute paths

<link rel=stylesheet href="/stylesheet/main.css">
<a href="Users/Nick/Desktop/Web Dev/Week 2/index.html">Go Home</a>

Incorrect - Releative path starting with ./

<img src="./images/addUser.png" alt="Add new user">

14. id attributes

An id attribute value must be unique in the same HTML document. The id attribute is a global attribute that can be used on any element in the body. However, each id attribute value must be unique for each HTML page and cannot be reused on that page.

Example: id attribute values

Correct - Unique id attribute values.

<p id="introduction">
<p id="aboutTheOwners">
<p id="conclusion">

Incorrect - Reused id attribute values

<p id="introduction">
<p id="introduction">

15. id, class, name attributes

The id, class, and name attribute values cannot contain spaces.

class Attribute: In the class attribute, spaces indicate a delimited list. Examine the following:

class="menuprices"
- class value with corresponding CSS selector .menuprice
class="menu prices"
- class values with corresponding CSS selectors .menu and .price

id Attribute: Elements can only have one id attribute. Spaces contained in the id attribute are treated by the browser as "non-conforming" since it considers a space as a part of the id's value.

name Attribute: The name attribute is often used in back-end processing and it can be problematic to refer to the name's value if there is a whitespace involved.

Example: id, class, and name attribute values

Correct - No spaces in attribute values.

<p id="introduction">
<span class="menuPrices">
<input name="lastName">

Incorrect - Spaces in attribute values

<p id=" introduction ">
<span class="menu Prices">
<input name="last Name">

16. Stylesheets

Only external stylesheets are allowed. No inline or embedded styles are allowed. CSS is placed in an external document with the extension .css and link in the HTML head element pointing to the correct file location. Do no ad the style element to the HTML document or use the style attribute on any HTML element.

Example: Stylesheets

Correct - External stylesheet is used.

<head>
    <link rel="stylesheet" href="stylesheets/main.css">
</head>

Incorrect - Embedded stylesheet is not allowed.

<head>
    <style>
        h1 {color: #092040;}
    </style>
</head>

Incorrect - Inline styles are not allowed.

<h1 style="color: #092040;">What Not To Do</h1>