Skip to content

Instantly share code, notes, and snippets.

@heiswayi

heiswayi/html-style-guide.md

Forked from ryansechrest/html-style-guide.md
Created September 23, 2015 05:39
Show Gist options
  • Save heiswayi/acb5b2922d937b6881cc to your computer and use it in GitHub Desktop.
Save heiswayi/acb5b2922d937b6881cc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 38 additions and 12 deletions.
    50 changes: 38 additions & 12 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -44,8 +44,9 @@ All rules and guidelines in this document apply to HTML files.
    1. [Structures, Styles and Scripts](#1-structures-styles-and-scripts)
    2. [Valid HTML](#2-valid-html)
    3. [Semantic HTML](#3-semantic-html)
    4. [Form Fields](#4-form-fields)
    5. [Entity References](#5-entity-references)
    4. [Form Field Labels](#4-form-field-labels)
    5. [Form Field Names](#5-form-field-names)
    6. [Entity References](#6-entity-references)

    <!-- ---------------------------------------------------------------------- -->

    @@ -460,7 +461,7 @@ This section addresses how to utilize elements and attributes.
    3. [**Attribute values**](#3-attribute-values) MUST be wrapped in double quotation marks
    * e.g. `<a href="" title="">Link</a>`
    4. [**Attribute booleans**](#4-attribute-booleans) SHOULD NOT include a value
    * e.g. `<input autofocus type="text">`
    * e.g. `<input type="text" name="" autofocus>`
    5. [**Type and language attribute**](#5-type-and-language-attribute) MUST be omitted on `script` tags
    * e.g. `<script src=""></script>`
    6. [**Type attribute**](#6-type-attribute) MUST be omitted on `link` and `style` tags
    @@ -578,7 +579,7 @@ Attribute booleans SHOULD NOT include a value.
    #### &#10004; Correct

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;first-name&quot; autofocus&gt;
    &lt;input type=&quot;text&quot; name=&quot;first_name&quot; autofocus&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)
    @@ -659,9 +660,11 @@ Protocol SHOULD be omitted.
    * i.e. yes `<ul><li></li></ul>`, no `<ul><p></p></ul>`
    3. [**Semantic HTML**](#3-semantic-html) MUST be written
    * i.e. yes `<a href="">View Options</a>`, no `<div class="click">View Options</div>`
    4. [**Form fields**](#4-form-fields) MUST have a corresponding `label`
    * e.g. `<label for=""></label><input id="" type="text">`
    5. [**Entity references**](#5-entity-references) MUST NOT be used
    4. [**Form field labels**](#4-form-field-labels) MUST be used
    * e.g. `<label for=""></label><input name="" type="text">`
    5. [**Form field names**](#5-form-field-names) MUST use underscores to separate words
    * e.g. `<input type="text" name="first_name">`
    6. [**Entity references**](#6-entity-references) MUST NOT be used
    * e.g. yes `—`, no `&mdash;`

    &#9650; [Table of Contents](#table-of-contents)
    @@ -676,7 +679,7 @@ Structures, styles and scripts MUST be separated from each other.

    <pre lang=html>
    &lt;div class=&quot;internships-module&quot;&gt;

    ...
    &lt;/div&gt;
    </pre>

    @@ -686,7 +689,7 @@ Structures, styles and scripts MUST be separated from each other.

    <pre lang=html>
    &lt;div class=&quot;module internships&quot; data-track=&quot;pageview event&quot;&gt;

    ...
    &lt;/div&gt;
    </pre>

    @@ -778,9 +781,9 @@ nulla.&lt;/p&gt;

    <!-- ------------------------------ -->

    ### 4. Form Fields
    ### 4. Form Field Labels

    Form fields MUST have a corresponding label.
    Form field labels MUST be used.

    #### &#10006; Incorrect

    @@ -802,7 +805,30 @@ Form fields MUST have a corresponding label.

    <!-- ------------------------------ -->

    ### 5. Entity References
    ### 5. Form Field Names

    Form field names MUST use underscores to separate words.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;emailaddress&quot;&gt;
    &lt;input type=&quot;text&quot; name=&quot;email-address&quot;&gt;
    </pre>

    &#8627; Incorrect because `emailaddress` and `email-address` are not using underscores between words.

    #### &#10004; Correct

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;email_address&quot;&gt;
    </pre>

    &#9650; [Best Practices](#6-best-practices)

    <!-- ------------------------------ -->

    ### 6. Entity References

    Entity references MUST NOT be used.

  2. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 15 additions and 17 deletions.
    32 changes: 15 additions & 17 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -98,6 +98,7 @@ This section showcases the main elements required in a complete HTML file.
    &lt;head&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    @@ -145,7 +146,7 @@ This is a comment
    &lt;!--This is a comment--&gt;
    </pre>

    &#8627; Incorrect because there is no space between `<!--` and `This`, and `comment` and `-->`.
    &#8627; Incorrect because there is no space before or after `This is a comment`.

    #### &#10004; Correct

    @@ -169,7 +170,7 @@ that spans multiple lines
    --&gt;
    </pre>

    &#8627; Incorrect because `<!--` and `This is a comment` is on one line.
    &#8627; Incorrect because `<!--` and `This is a comment` are on one line.

    <pre lang=html>
    &lt;!--
    @@ -178,7 +179,7 @@ that spans multiple lines
    --&gt;
    </pre>

    &#8627; Incorrect because text is indented.
    &#8627; Incorrect because `This is a comment` and `that spans multiple lines` are indented.

    #### &#10004; Correct

    @@ -201,15 +202,15 @@ Closing tag comments SHOULD include the class or ID symbol and name.

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot;&gt;
    ...
    ...
    &lt;/div&gt;&lt;!-- main-wrapper --&gt;
    </pre>

    &#8627; Incorrect because `#` prefix is missing.

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot;&gt;
    ...
    ...
    &lt;/div&gt;&lt;!-- .main-wrapper --&gt;
    </pre>

    @@ -219,7 +220,7 @@ Closing tag comments SHOULD include the class or ID symbol and name.

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot;&gt;
    ...
    ...
    &lt;/div&gt;&lt;!-- #main-wrapper --&gt;
    </pre>

    @@ -237,7 +238,7 @@ Sensitive information MUST NOT be placed in a comment.
    &lt;!-- Generated by some_php_function() --&gt;
    </pre>

    &#8627; Incorrect because comment reveals that markup came from `some_php_function()`.
    &#8627; Incorrect because comment reveals that markup comes from `some_php_function()`.

    &#9650; [Comments](#3-comments)

    @@ -250,7 +251,7 @@ This section outline various, general formatting rules related to whitespace and
    1. [**Line indentation**](#1-line-indentation) MUST be accomplished using tabs
    * i.e. `<ul>` `↵` `⇥` `<li>`
    2. [**Direct child elements**](#2-direct-child-elements) within `html`, `body`, `style` or `script` element MUST NOT be indented
    * i.e. `<head>` `↵` `⇥` `...` `</head>`, `<body><h1></h1></body>`
    * i.e. `<body>` `↵` `<h1></h1>` `↵` `</body>`, `<head>` `↵` `⇥` `...` `</head>`
    3. [**Block, list and table elements**](#3-block-list-and-table-elements) MUST start on a new line and their children MUST be indented
    * i.e. `<div>` `↵` `⇥` `<h1>`, `<table>` `↵` `⇥` `<th>`
    4. [**Trailing whitespace**](#4-trailing-whitespace) MUST NOT be present
    @@ -275,7 +276,7 @@ Line indentation MUST be accomplished using tabs.
    &lt;/ul&gt;
    </pre>

    &#8627; Incorrect because `<li>` was indented with spaces instead of tabs.
    &#8627; Incorrect because `<li>` is indented with spaces instead of tabs.

    #### &#10004; Correct

    @@ -322,8 +323,7 @@ Direct child elements within `html`, `body`, `style` or `script` element MUST NO
    &lt;/html&gt;
    </pre>

    &#8627; Incorrect because `<head>` and `<body>` within `<html>` are indented.<br />
    &#8627; Incorrect because `<div>` within `<body>` is indented.<br />
    &#8627; Incorrect because `<head>`, `<body>` and `<div>` are indented.<br />
    &#8627; Incorrect because contents within `<style>` and `<script>` are indented.

    #### &#10004; Correct
    @@ -435,7 +435,7 @@ Elements and attributes MUST be all lowercase.
    &lt;/div&gt;
    </pre>

    &#8627; Incorrect because `ID`, `mainWrapper`, `DESKTOP`, and `<P>` are not lowercase.
    &#8627; Incorrect because `ID`, `mainWrapper`, `DESKTOP` and `<P>` are not lowercase.

    #### &#10004; Correct

    @@ -545,7 +545,7 @@ Attribute values MUST be wrapped in double quotation marks.

    <pre lang=html>
    &lt;form action=processor.php class='application'&gt;

    ...
    &lt;/form&gt;
    </pre>

    @@ -555,7 +555,7 @@ Attribute values MUST be wrapped in double quotation marks.

    <pre lang=html>
    &lt;form action=&quot;processor.php&quot; class=&quot;application&quot;&gt;

    ...
    &lt;/form&gt;
    </pre>

    @@ -666,8 +666,6 @@ Protocol SHOULD be omitted.

    &#9650; [Table of Contents](#table-of-contents)

    `<strong>Get out!</strong>`, `<b>That compromised his system.</b>`

    <!-- ------------------------------ -->

    ### 1. Structures, Styles and Scripts
    @@ -677,7 +675,7 @@ Structures, styles and scripts MUST be separated from each other.
    #### &#10006; Incorrect

    <pre lang=html>
    &lt;div class=&quot;news-module&quot;&gt;
    &lt;div class=&quot;internships-module&quot;&gt;

    &lt;/div&gt;
    </pre>
  3. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -757,7 +757,7 @@ molestie nulla.&lt;/p&gt;
    &#8627; Incorrect because `Lorem ipsum` is to be bold, not strongly spoken by a screen reader.

    <pre lang=html>
    &lt;div class=&quot;textrea&quot;&gt;Write your text here.&lt;/div&gt;
    &lt;div class=&quot;textarea&quot;&gt;Write your text here.&lt;/div&gt;
    </pre>

    &#8627; Incorrect because `<div>` is not a natural element for user input.
  4. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -747,10 +747,11 @@ Semantic HTML MUST be written.
    &#8627; Incorrect because `<a>` is the elementing for clicking, not `<div>`.

    <pre lang=html>
    &lt;p&gt;&lt;strong&gt;Lorem ipsum:&lt;/strong&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt
    urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis.
    Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus
    non molestie nulla.&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;Lorem ipsum:&lt;/strong&gt; Dolor sit amet, consectetur
    adipiscing elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam,
    scelerisque et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla.
    Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus non
    molestie nulla.&lt;/p&gt;
    </pre>

    &#8627; Incorrect because `Lorem ipsum` is to be bold, not strongly spoken by a screen reader.
    @@ -766,10 +767,11 @@ non molestie nulla.&lt;/p&gt;
    <pre lang=html>
    &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Click Here&lt;/a&gt;

    &lt;p&gt;&lt;b&gt;Lorem ipsum:&lt;/b&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id
    dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis.
    Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus
    non molestie nulla.&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Lorem ipsum:&lt;/b&gt; Dolor sit amet, consectetur adipiscing
    elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque
    et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla. Sed interdum
    sagittis eros non vulputate. Donec sed interdum ante. Phasellus non molestie
    nulla.&lt;/p&gt;

    &lt;textarea name=&quot;comment&quot;&gt;Write your text here.&lt;/textarea&gt;
    </pre>
  5. @ryansechrest ryansechrest revised this gist Feb 5, 2014. No changes.
  6. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 9 additions and 3 deletions.
    12 changes: 9 additions & 3 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -747,7 +747,10 @@ Semantic HTML MUST be written.
    &#8627; Incorrect because `<a>` is the elementing for clicking, not `<div>`.

    <pre lang=html>
    &lt;p&gt;&lt;strong&gt;Lorem ipsum:&lt;/strong&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus non molestie nulla.&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;Lorem ipsum:&lt;/strong&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt
    urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis.
    Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus
    non molestie nulla.&lt;/p&gt;
    </pre>

    &#8627; Incorrect because `Lorem ipsum` is to be bold, not strongly spoken by a screen reader.
    @@ -756,14 +759,17 @@ Semantic HTML MUST be written.
    &lt;div class=&quot;textrea&quot;&gt;Write your text here.&lt;/div&gt;
    </pre>

    &#8627; Incorrect because `<div>` is not the natural element for user input.
    &#8627; Incorrect because `<div>` is not a natural element for user input.

    #### &#10004; Correct

    <pre lang=html>
    &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Click Here&lt;/a&gt;

    &lt;p&gt;&lt;b&gt;Lorem ipsum:&lt;/b&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus non molestie nulla.&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Lorem ipsum:&lt;/b&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id
    dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis.
    Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus
    non molestie nulla.&lt;/p&gt;

    &lt;textarea name=&quot;comment&quot;&gt;Write your text here.&lt;/textarea&gt;
    </pre>
  7. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 84 additions and 6 deletions.
    90 changes: 84 additions & 6 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -674,10 +674,22 @@ Protocol SHOULD be omitted.

    Structures, styles and scripts MUST be separated from each other.

    #### Example
    #### &#10006; Incorrect

    <pre lang=html>
    &lt;div class=&quot;news-module&quot;&gt;

    &lt;/div&gt;
    </pre>

    &#8627; Incorrect because structure, style and functionality are not decoupled.

    #### &#10004; Correct

    <pre lang=html>
    &lt;div class=&quot;module internships&quot; data-track=&quot;pageview event&quot;&gt;

    &lt;/div&gt;
    </pre>

    &#9650; [Best Practices](#6-best-practices)
    @@ -688,10 +700,34 @@ Structures, styles and scripts MUST be separated from each other.

    Valid HTML MUST be written.

    #### Example
    #### &#10006; Incorrect

    <pre lang=html>
    &lt;ul&gt;
    &lt;li&gt;Item one&lt;/li&gt;
    &lt;li&gt;Item two&lt;/li&gt;
    &lt;ul&gt;
    &lt;li&gt;Sub-item one&lt;/li&gt;
    &lt;li&gt;Sub-item two&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/ul&gt;
    </pre>

    &#8627; Incorrect because `<ul>` cannot be a child of a `<ul>`.

    #### &#10004; Correct

    <pre lang=html>
    &lt;ul&gt;
    &lt;li&gt;Item one&lt;/li&gt;
    &lt;li&gt;Item two&lt;/li&gt;
    &lt;li&gt;
    &lt;ul&gt;
    &lt;li&gt;Sub-item one&lt;/li&gt;
    &lt;li&gt;Sub-item two&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    </pre>

    &#9650; [Best Practices](#6-best-practices)
    @@ -702,10 +738,34 @@ Valid HTML MUST be written.

    Semantic HTML MUST be written.

    #### Example
    #### &#10006; Incorrect

    <pre lang=html>
    &lt;div class=&quot;button&quot;&gt;Click Here&lt;/div&gt;
    </pre>

    &#8627; Incorrect because `<a>` is the elementing for clicking, not `<div>`.

    <pre lang=html>
    &lt;p&gt;&lt;strong&gt;Lorem ipsum:&lt;/strong&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus non molestie nulla.&lt;/p&gt;
    </pre>

    &#8627; Incorrect because `Lorem ipsum` is to be bold, not strongly spoken by a screen reader.

    <pre lang=html>
    &lt;div class=&quot;textrea&quot;&gt;Write your text here.&lt;/div&gt;
    </pre>

    &#8627; Incorrect because `<div>` is not the natural element for user input.

    #### &#10004; Correct

    <pre lang=html>
    &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Click Here&lt;/a&gt;

    &lt;p&gt;&lt;b&gt;Lorem ipsum:&lt;/b&gt; Dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna id dui aliquet facilisis. Maecenas nulla diam, scelerisque et nisl congue, ornare fermentum turpis. Pellentesque eu lorem nulla. Sed interdum sagittis eros non vulputate. Donec sed interdum ante. Phasellus non molestie nulla.&lt;/p&gt;

    &lt;textarea name=&quot;comment&quot;&gt;Write your text here.&lt;/textarea&gt;
    </pre>

    &#9650; [Best Practices](#6-best-practices)
    @@ -716,10 +776,20 @@ Semantic HTML MUST be written.

    Form fields MUST have a corresponding label.

    #### Example
    #### &#10006; Incorrect

    <pre lang=html>
    &lt;input type=&quot;radio&quot; name=&quot;gender&quot; id=&quot;male&quot; value=&quot;male&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;gender&quot; id=&quot;female&quot; value=&quot;female&quot;&gt;
    </pre>

    &#8627; Incorrect because `<label>` is missing.

    #### &#10004; Correct

    <pre lang=html>
    &lt;input type=&quot;radio&quot; name=&quot;gender&quot; id=&quot;male&quot; value=&quot;male&quot;&gt; &lt;label for=&quot;male&quot;&gt;Male&lt;/label&gt;
    &lt;input type=&quot;radio&quot; name=&quot;gender&quot; id=&quot;female&quot; value=&quot;female&quot;&gt; &lt;label for=&quot;female&quot;&gt;Female&lt;/label&gt;
    </pre>

    &#9650; [Best Practices](#6-best-practices)
    @@ -730,10 +800,18 @@ Form fields MUST have a corresponding label.

    Entity references MUST NOT be used.

    #### Example
    #### &#10006; Incorrect

    <pre lang=html>
    <pre>
    &euro;
    </pre>

    &#8627; Incorrect because `&euro;` entity reference is used.

    #### &#10004; Correct

    <pre>
    €
    </pre>

    &#9650; [Best Practices](#6-best-practices)
  8. @ryansechrest ryansechrest revised this gist Feb 5, 2014. 1 changed file with 41 additions and 11 deletions.
    52 changes: 41 additions & 11 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -595,7 +595,7 @@ Type and language attribute MUST be omitted on `script` tags.
    &lt;script src=&quot;//script.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    </pre>

    &#8627; Incorrect because `type` is included.
    &#8627; Incorrect because `type` attribute is included.

    #### &#10004; Correct

    @@ -653,15 +653,15 @@ Protocol SHOULD be omitted.

    ## 6. Best Practices

    1. [**Structures, styles and scripts**](#1-structures-styles-and-scripts) SHOULD be separated from each other
    1. [**Structures, styles and scripts**](#1-structures-styles-and-scripts) MUST be separated from each other
    * e.g. `<a class="button" data-track="pageview">Read More</a>`
    2. [**Valid HTML**](#2-valid-html) SHOULD be written
    2. [**Valid HTML**](#2-valid-html) MUST be written
    * i.e. yes `<ul><li></li></ul>`, no `<ul><p></p></ul>`
    3. [**Semantic HTML**](#3-semantic-html) SHOULD be written
    3. [**Semantic HTML**](#3-semantic-html) MUST be written
    * i.e. yes `<a href="">View Options</a>`, no `<div class="click">View Options</div>`
    4. [**Form fields**](#4-form-fields) SHOULD have a corresponding `label`
    4. [**Form fields**](#4-form-fields) MUST have a corresponding `label`
    * e.g. `<label for=""></label><input id="" type="text">`
    5. [**Entity references**](#5-entity-references) SHOULD NOT be used
    5. [**Entity references**](#5-entity-references) MUST NOT be used
    * e.g. yes `—`, no `&mdash;`

    &#9650; [Table of Contents](#table-of-contents)
    @@ -672,39 +672,69 @@ Protocol SHOULD be omitted.

    ### 1. Structures, Styles and Scripts

    Structures, styles and scripts SHOULD be separated from each other.
    Structures, styles and scripts MUST be separated from each other.

    #### Example

    <pre lang=html>

    </pre>

    &#9650; [Best Practices](#6-best-practices)

    <!-- ------------------------------ -->

    ### 2. Valid HTML

    Valid HTML SHOULD be written.
    Valid HTML MUST be written.

    #### Example

    <pre lang=html>

    </pre>

    &#9650; [Best Practices](#6-best-practices)

    <!-- ------------------------------ -->

    ### 3. Semantic HTML

    Semantic HTML SHOULD be written.
    Semantic HTML MUST be written.

    #### Example

    <pre lang=html>

    </pre>

    &#9650; [Best Practices](#6-best-practices)

    <!-- ------------------------------ -->

    ### 4. Form Fields

    Form fields SHOULD have a corresponding label.
    Form fields MUST have a corresponding label.

    #### Example

    <pre lang=html>

    </pre>

    &#9650; [Best Practices](#6-best-practices)

    <!-- ------------------------------ -->

    ### 5. Entity References

    Entity references SHOULD NOT be used.
    Entity references MUST NOT be used.

    #### Example

    <pre lang=html>

    </pre>

    &#9650; [Best Practices](#6-best-practices)

  9. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -570,7 +570,7 @@ Attribute booleans SHOULD NOT include a value.
    #### ~ Acceptable

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;first-name&quot; autofocus=&quot;autofocus&quot;&gt;
    &lt;input type=&quot;text&quot; name=&quot;first_name&quot; autofocus=&quot;autofocus&quot;&gt;
    </pre>

    &#8627; Acceptable, but `autofocus` value is not required for `autofocus` attribute.
    @@ -600,7 +600,7 @@ Type and language attribute MUST be omitted on `script` tags.
    #### &#10004; Correct

    <pre lang=html>
    &lt;script src=&quot;//script.js&quot;&lt;/script&gt;
    &lt;script src=&quot;//script.js&quot;&gt;&lt;/script&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)
  10. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 13 additions and 4 deletions.
    17 changes: 13 additions & 4 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -116,7 +116,7 @@ This section describes how comments should be formatted and used.

    1. [**Single-line comments**](#1-single-line-comments) MUST be on one line and text inside MUST be surrounded by spaces
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line and text MUST NOT be indented
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD include the class or ID symbol and name
    * e.g. `</div><!-- #main-wrapper -->`
    @@ -129,7 +129,7 @@ This section describes how comments should be formatted and used.

    ### 1. Single-line Comments

    Single-line comments MUST be on one line and text inside MUST be surrounded by spaces
    Single-line comments MUST be on one line and text inside MUST be surrounded by spaces.

    #### &#10006; Incorrect

    @@ -145,7 +145,7 @@ This is a comment
    &lt;!--This is a comment--&gt;
    </pre>

    &#8627; Incorrect because there is not space between `<!--` and `This`, and `comment` and `-->`.
    &#8627; Incorrect because there is no space between `<!--` and `This`, and `comment` and `-->`.

    #### &#10004; Correct

    @@ -159,7 +159,7 @@ This is a comment

    ### 2. Multi-line Comments

    Multi-line comments MUST start and end on their own line.
    Multi-line comments MUST start and end on their own line and text MUST NOT be indented.

    #### &#10006; Incorrect

    @@ -171,6 +171,15 @@ that spans multiple lines

    &#8627; Incorrect because `<!--` and `This is a comment` is on one line.

    <pre lang=html>
    &lt;!--
    This is a comment
    that spans multiple lines
    --&gt;
    </pre>

    &#8627; Incorrect because text is indented.

    #### &#10004; Correct

    <pre lang=html>
  11. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,7 @@ This section describes how comments should be formatted and used.
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.` followed by the name
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD include the class or ID symbol and name
    * e.g. `</div><!-- #main-wrapper -->`
    4. [**Sensitive information**](#4-sensitive-information) MUST NOT be placed in a comment
    * e.g. `<!-- Sends email to [email protected] -->`
    @@ -186,7 +186,7 @@ that spans multiple lines

    ### 3. Closing Tag Comments

    Closing tag comments SHOULD be prefixed with either a `#` or `.` followed by the name.
    Closing tag comments SHOULD include the class or ID symbol and name.

    #### &#10006; Incorrect

  12. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,7 @@ This section describes how comments should be formatted and used.
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.`, and followed by the name
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.` followed by the name
    * e.g. `</div><!-- #main-wrapper -->`
    4. [**Sensitive information**](#4-sensitive-information) MUST NOT be placed in a comment
    * e.g. `<!-- Sends email to [email protected] -->`
    @@ -186,7 +186,7 @@ that spans multiple lines

    ### 3. Closing Tag Comments

    Closing tag comments SHOULD be prefixed with either a `#` or `.`, and followed by the name.
    Closing tag comments SHOULD be prefixed with either a `#` or `.` followed by the name.

    #### &#10006; Incorrect

  13. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,7 @@ This section describes how comments should be formatted and used.
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.`, followed by the name
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.`, and followed by the name
    * e.g. `</div><!-- #main-wrapper -->`
    4. [**Sensitive information**](#4-sensitive-information) MUST NOT be placed in a comment
    * e.g. `<!-- Sends email to [email protected] -->`
    @@ -186,7 +186,7 @@ that spans multiple lines

    ### 3. Closing Tag Comments

    Closing tag comments SHOULD be prefixed with either a `#` or `.`, followed by the name.
    Closing tag comments SHOULD be prefixed with either a `#` or `.`, and followed by the name.

    #### &#10006; Incorrect

  14. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -114,7 +114,7 @@ This section showcases the main elements required in a complete HTML file.

    This section describes how comments should be formatted and used.

    1. [**Single-line comments**](#1-single-line-comments) MUST be on one line and the comment surrounded by spaces
    1. [**Single-line comments**](#1-single-line-comments) MUST be on one line and text inside MUST be surrounded by spaces
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    @@ -129,7 +129,7 @@ This section describes how comments should be formatted and used.

    ### 1. Single-line Comments

    Single-line comments MUST be on one line and the comment surrounded by spaces.
    Single-line comments MUST be on one line and text inside MUST be surrounded by spaces

    #### &#10006; Incorrect

  15. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -73,7 +73,7 @@ This section describes the format and naming convention of HTML files.

    ## 2. Document

    This section showcases the main elements required in a full HTML file.
    This section showcases the main elements required in a complete HTML file.

    1. **Doctype** MUST be specified and SHOULD be HTML5
    * e.g. `<!DOCTYPE html>`
  16. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -63,9 +63,9 @@ This section describes the format and naming convention of HTML files.
    #### Filename

    1. **Letters** MUST be all lowercase
    * e.g. `sidebar.html`, `index.php`
    * e.g. `sidebar.html`, `sidebar.php`
    2. **Words** MUST be separated with a hyphen
    * e.g. `social-media.html`, `contact-widget.php`
    * e.g. `social-media-widget.html`, `social-media-widget.php`

    &#9650; [Table of Contents](#table-of-contents)

  17. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ All rules and guidelines in this document apply to HTML files.
    2. Language
    3. Character Encoding
    4. Viewport
    5. Head And Body
    5. Head and Body
    3. [**Comments**](#3-comments)
    1. [Single-line Comments](#1-single-line-comments)
    2. [Multi-line Comments](#2-multi-line-comments)
  18. @ryansechrest ryansechrest revised this gist Feb 4, 2014. 1 changed file with 198 additions and 30 deletions.
    228 changes: 198 additions & 30 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,16 +32,14 @@ All rules and guidelines in this document apply to HTML files.
    3. [Block, List and Table Elements](#3-block-list-and-table-elements)
    4. [Trailing Whitespace](#4-trailing-whitespace)
    5. [Elements and Attributes](#5-elements-and-attributes)
    6. [Word Separator](#6-word-separator)
    5. [**Elements and Attributes**](#5-elements-and-attributes)
    1. [Self-closing Elements](#1-self-closing-elements)
    2. [Optional Open/Close Tags](#2-optional-openclose-tags)
    3. [Attribute Order](#3-attribute-order)
    4. [Attribute Values](#4-attribute-values)
    5. [Attribute Booleans](#5-attribute-booleans)
    6. [Type and Language Attribute](#6-type-and-language-attribute)
    7. [Type Attribute](#7-type-attribute)
    8. [Protocol](#8-protocol)
    3. [Attribute Values](#3-attribute-values)
    4. [Attribute Booleans](#4-attribute-booleans)
    5. [Type and Language Attribute](#5-type-and-language-attribute)
    6. [Type Attribute](#6-type-attribute)
    7. [Protocol](#7-protocol)
    6. [**Best Practices**](#6-best-practices)
    1. [Structures, Styles and Scripts](#1-structures-styles-and-scripts)
    2. [Valid HTML](#2-valid-html)
    @@ -250,8 +248,6 @@ This section outline various, general formatting rules related to whitespace and
    * i.e. no `<p></p>` `·` `·` `↵`
    5. [**Elements and attributes**](#5-elements-and-attributes) MUST be all lowercase
    * e.g. `<a href="" title="">`, `<link rel="stylesheet" href="">`
    6. [**Word separator**](#6-word-separator) MUST be a hyphen for user-defined attributes
    * e.g. `<div data-user-name="">`

    &#9650; [Table of Contents](#table-of-contents)

    @@ -357,6 +353,41 @@ Direct child elements within `html`, `body`, `style` or `script` element MUST NO

    Block, list and table elements MUST start on a new line and their children MUST be indented.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;div&gt;&lt;p&gt;This is a paragraph.&lt;/p&gt;&lt;/div&gt;

    &lt;ul&gt;&lt;li&gt;Item one&lt;/li&gt;&lt;li&gt;Item two&lt;/li&gt;&lt;/ul&gt;

    &lt;table&gt;&lt;tr&gt;&lt;th&gt;Header&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Content&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
    </pre>

    &#8627; Incorrect because `<div>`, `<ul>`, `<table>` and`<tr>` are not on their own line.<br />
    &#8627; Incorrect because `<p>`, `<li>`, `<tr>` and `<td>`are not indented.

    #### &#10004; Correct

    <pre lang=html>
    &lt;div&gt;
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/div&gt;

    &lt;ul&gt;
    &lt;li&gt;Item one&lt;/li&gt;
    &lt;li&gt;Item two&lt;/li&gt;
    &lt;/ul&gt;

    &lt;table&gt;
    &lt;tr&gt;
    &lt;th&gt;Header&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;Content&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    </pre>

    &#9650; [Formatting](#4-formatting)

    <!-- ------------------------------ -->
    @@ -365,6 +396,20 @@ Block, list and table elements MUST start on a new line and their children MUST

    Trailing whitespace MUST NOT be present.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
    </pre>

    &#8627; Incorrect because there are spaces after `</p>`.

    #### &#10004; Correct

    <pre lang=html>
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
    </pre>

    &#9650; [Formatting](#4-formatting)

    <!-- ------------------------------ -->
    @@ -373,13 +418,23 @@ Trailing whitespace MUST NOT be present.

    Elements and attributes MUST be all lowercase.

    &#9650; [Formatting](#4-formatting)
    #### &#10006; Incorrect

    <!-- ------------------------------ -->
    <pre lang=html>
    &lt;div ID=&quot;mainWrapper&quot; class=&quot;DESKTOP&quot;&gt;
    &lt;P&gt;This is a paragraph&lt;/P&gt;
    &lt;/div&gt;
    </pre>

    ### 6. Word Separator
    &#8627; Incorrect because `ID`, `mainWrapper`, `DESKTOP`, and `<P>` are not lowercase.

    Word separator MUST be a hyphen for user-defined attributes.
    #### &#10004; Correct

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot; class=&quot;desktop&quot;&gt;
    &lt;p&gt;This is a paragraph&lt;/p&gt;
    &lt;/div&gt;
    </pre>

    &#9650; [Formatting](#4-formatting)

    @@ -393,17 +448,15 @@ This section addresses how to utilize elements and attributes.
    * e.g. `<br>`, `<link rel="stylesheet" href="">`
    2. [**Optional open/close tags**](#2-optional-openclose-tags) MUST be included
    * e.g. `<ul><li></li></ul>`
    3. [**Attribute order**](#3-attribute-order) MUST be alphabetical and lead with required attributes
    * e.g. `<input class="" id="" placeholder="" type="text" value="">`
    4. [**Attribute values**](#4-attribute-values) MUST be wrapped in double quotation marks
    3. [**Attribute values**](#3-attribute-values) MUST be wrapped in double quotation marks
    * e.g. `<a href="" title="">Link</a>`
    5. [**Attribute booleans**](#5-attribute-booleans) SHOULD NOT include a value
    4. [**Attribute booleans**](#4-attribute-booleans) SHOULD NOT include a value
    * e.g. `<input autofocus type="text">`
    6. [**Type and language attribute**](#6-type-and-language-attribute) MUST be omitted on `script` tags
    5. [**Type and language attribute**](#5-type-and-language-attribute) MUST be omitted on `script` tags
    * e.g. `<script src=""></script>`
    7. [**Type attribute**](#7-type-attribute) MUST be omitted on `link` and `style` tags
    6. [**Type attribute**](#6-type-attribute) MUST be omitted on `link` and `style` tags
    * e.g. `<style src=""></script>`
    8. [**Protocol**](#8-protocol) SHOULD be omitted
    7. [**Protocol**](#7-protocol) SHOULD be omitted
    * e.g. `<link href="//style.css" rel="stylesheet">`

    &#9650; [Table of Contents](#table-of-contents)
    @@ -414,6 +467,24 @@ This section addresses how to utilize elements and attributes.

    Self-closing elements MUST NOT be closed.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;link href=&quot;theme.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;br /&gt;
    </pre>

    &#8627; Incorrect because `<link>` and `<br>` have a `/` at the end.

    #### &#10004; Correct

    <pre lang=html>
    &lt;link href=&quot;theme.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;br&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->
    @@ -422,54 +493,151 @@ Self-closing elements MUST NOT be closed.

    Optional open/close tags MUST be included.

    &#9650; [Elements and Attributes](#5-elements-and-attributes)
    #### &#10006; Incorrect

    <!-- ------------------------------ -->
    <pre lang=html>
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.
    &lt;/div&gt;
    &lt;/html&gt;
    </pre>

    ### 3. Attribute Order
    &#8627; Incorrect because `<head></head>`, `<body></body>` and `</p>` are missing.

    Attribute order MUST be alphabetical and lead with required attributes.
    #### &#10004; Correct

    <pre lang=html>
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.&lt;/p&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->

    ### 4. Attribute Values
    ### 3. Attribute Values

    Attribute values MUST be wrapped in double quotation marks.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;form action=processor.php class='application'&gt;

    &lt;/form&gt;
    </pre>

    Attribute values MUST be wrapped in double quotation marks .
    &#8627; Incorrect because `processor.php` and `application` are not wrapped in double quotes.

    #### &#10004; Correct

    <pre lang=html>
    &lt;form action=&quot;processor.php&quot; class=&quot;application&quot;&gt;

    &lt;/form&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->

    ### 5. Attribute Booleans
    ### 4. Attribute Booleans

    Attribute booleans SHOULD NOT include a value.

    #### ~ Acceptable

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;first-name&quot; autofocus=&quot;autofocus&quot;&gt;
    </pre>

    &#8627; Acceptable, but `autofocus` value is not required for `autofocus` attribute.

    #### &#10004; Correct

    <pre lang=html>
    &lt;input type=&quot;text&quot; name=&quot;first-name&quot; autofocus&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->

    ### 6. Type and Language Attribute
    ### 5. Type and Language Attribute

    Type and language attribute MUST be omitted on `script` tags.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;script src=&quot;//script.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    </pre>

    &#8627; Incorrect because `type` is included.

    #### &#10004; Correct

    <pre lang=html>
    &lt;script src=&quot;//script.js&quot;&lt;/script&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->

    ### 7. Type Attribute
    ### 6. Type Attribute

    Type attribute MUST be omitted on `link` and `style` tags.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;link rel=&quot;stylesheet&quot; href=&quot;//style.css&quot; type=&quot;text/css&quot;&gt;
    </pre>

    &#8627; Incorrect because `type` attribute is included.

    #### &#10004; Correct

    <pre lang=html>
    &lt;link rel=&quot;stylesheet&quot; href=&quot;//style.css&quot;&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ------------------------------ -->

    ### 8. Protocol
    ### 7. Protocol

    Protocol SHOULD be omitted.

    #### ~ Acceptable

    <pre lang=html>
    &lt;link rel=&quot;stylesheet&quot; href=&quot;http://domain.com/style.css&quot;&gt;
    </pre>

    &#8627; Acceptable, but `http://domain.com` could be replaced with `//`.

    #### &#10004; Correct

    <pre lang=html>
    &lt;link rel=&quot;stylesheet&quot; href=&quot;//style.css&quot;&gt;
    </pre>

    &#9650; [Elements and Attributes](#5-elements-and-attributes)

    <!-- ---------------------------------------------------------------------- -->
  19. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -341,12 +341,10 @@ Direct child elements within `html`, `body`, `style` or `script` element MUST NO
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.&lt;/p&gt;
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
  20. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -102,11 +102,8 @@ This section showcases the main elements required in a full HTML file.
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;h1&gt;Welcome&lt;/h1&gt;

    &lt;p&gt;This is a skeleton document.&lt;/p&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
    @@ -312,12 +309,10 @@ Direct child elements within `html`, `body`, `style` or `script` element MUST NO
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.&lt;/p&gt;
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
  21. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -245,7 +245,7 @@ This section outline various, general formatting rules related to whitespace and

    1. [**Line indentation**](#1-line-indentation) MUST be accomplished using tabs
    * i.e. `<ul>` `↵` `⇥` `<li>`
    2. [**Direct child elements**](#2-direct-child-elements) within `html`, `body`, `script` or `style` element MUST NOT be indented
    2. [**Direct child elements**](#2-direct-child-elements) within `html`, `body`, `style` or `script` element MUST NOT be indented
    * i.e. `<head>` `↵` `⇥` `...` `</head>`, `<body><h1></h1></body>`
    3. [**Block, list and table elements**](#3-block-list-and-table-elements) MUST start on a new line and their children MUST be indented
    * i.e. `<div>` `↵` `⇥` `<h1>`, `<table>` `↵` `⇥` `<th>`
    @@ -290,7 +290,7 @@ Line indentation MUST be accomplished using tabs.

    ### 2. Direct Child Elements

    Direct child elements within `html`, `body`, `script` or `style` element MUST NOT be indented.
    Direct child elements within `html`, `body`, `style` or `script` element MUST NOT be indented.

    #### &#10006; Incorrect

  22. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -322,8 +322,8 @@ Direct child elements within `html`, `body`, `script` or `style` element MUST NO
    &lt;/html&gt;
    </pre>

    &#8627; Incorrect because `<head>` and `<body>` within `<html>` are indented.
    &#8627; Incorrect because `<div>` within `<body>` is indented.
    &#8627; Incorrect because `<head>` and `<body>` within `<html>` are indented.<br />
    &#8627; Incorrect because `<div>` within `<body>` is indented.<br />
    &#8627; Incorrect because contents within `<style>` and `<script>` are indented.

    #### &#10004; Correct
  23. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -322,7 +322,9 @@ Direct child elements within `html`, `body`, `script` or `style` element MUST NO
    &lt;/html&gt;
    </pre>

    &#8627; Incorrect because `<head>` and `<body>`, `<div>`, and the contents within `<style>` and `<script>` are indented.
    &#8627; Incorrect because `<head>` and `<body>` within `<html>` are indented.
    &#8627; Incorrect because `<div>` within `<body>` is indented.
    &#8627; Incorrect because contents within `<style>` and `<script>` are indented.

    #### &#10004; Correct

  24. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 86 additions and 4 deletions.
    90 changes: 86 additions & 4 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -144,13 +144,13 @@ This is a comment
    --&gt;
    </pre>

    &#8627; Incorrect because the one-line comment is not on one line.
    &#8627; Incorrect because `<!--`, `This is a comment` and `-->` should be one line.

    <pre lang=html>
    &lt;!--This is a comment--&gt;
    </pre>

    &#8627; Incorrect because the comment is not surrounded by spaces.
    &#8627; Incorrect because there is not space between `<!--` and `This`, and `comment` and `-->`.

    #### &#10004; Correct

    @@ -174,7 +174,7 @@ that spans multiple lines
    --&gt;
    </pre>

    &#8627; Incorrect because comment doesn't start and end on its own line.
    &#8627; Incorrect because `<!--` and `This is a comment` is on one line.

    #### &#10004; Correct

    @@ -233,7 +233,7 @@ Sensitive information MUST NOT be placed in a comment.
    &lt;!-- Generated by some_php_function() --&gt;
    </pre>

    &#8627; Incorrect because comment reveals server-side process.
    &#8627; Incorrect because comment reveals that markup came from `some_php_function()`.

    &#9650; [Comments](#3-comments)

    @@ -264,6 +264,26 @@ This section outline various, general formatting rules related to whitespace and

    Line indentation MUST be accomplished using tabs.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;ul&gt;
    &lt;li&gt;Item number one&lt;/li&gt;
    &lt;li&gt;Item number two&lt;/li&gt;
    &lt;/ul&gt;
    </pre>

    &#8627; Incorrect because `<li>` was indented with spaces instead of tabs.

    #### &#10004; Correct

    <pre lang=html>
    &lt;ul&gt;
    &lt;li&gt;Item number one&lt;/li&gt;
    &lt;li&gt;Item number two&lt;/li&gt;
    &lt;/ul&gt;
    </pre>

    &#9650; [Formatting](#4-formatting)

    <!-- ------------------------------ -->
    @@ -272,6 +292,68 @@ Line indentation MUST be accomplished using tabs.

    Direct child elements within `html`, `body`, `script` or `style` element MUST NOT be indented.

    #### &#10006; Incorrect

    <pre lang=html>
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;style&gt;
    #main-wrapper {
    width: 960px;
    }
    &lt;/style&gt;
    &lt;script&gt;
    function show_alert() {

    }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.&lt;/p&gt;
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    </pre>

    &#8627; Incorrect because `<head>` and `<body>`, `<div>`, and the contents within `<style>` and `<script>` are indented.

    #### &#10004; Correct

    <pre lang=html>
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;style&gt;
    #main-wrapper {
    width: 960px;
    }
    &lt;/style&gt;
    &lt;script&gt;
    function show_alert() {

    }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id=&quot;main-wrapper&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a skeleton document.&lt;/p&gt;
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    </pre>

    &#9650; [Formatting](#4-formatting)

    <!-- ------------------------------ -->
  25. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -122,7 +122,7 @@ This section describes how comments should be formatted and used.
    1. [**Single-line comments**](#1-single-line-comments) MUST be on one line and the comment surrounded by spaces
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->`
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.`, followed by the name
    * e.g. `</div><!-- #main-wrapper -->`
    4. [**Sensitive information**](#4-sensitive-information) MUST NOT be placed in a comment
  26. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -123,7 +123,7 @@ This section describes how comments should be formatted and used.
    * e.g. `<!-- This is a comment -->`
    2. [**Multi-line comments**](#2-multi-line-comments) MUST start and end on their own line
    * i.e. `<!--` `↵` `Line number one` `↵` `Line number two` `↵` `-->
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.` followed by the name
    3. [**Closing tag comments**](#3-closing-tag-comments) SHOULD be prefixed with a `#` or `.`, followed by the name
    * e.g. `</div><!-- #main-wrapper -->`
    4. [**Sensitive information**](#4-sensitive-information) MUST NOT be placed in a comment
    * e.g. `<!-- Sends email to [email protected] -->`
    @@ -191,7 +191,7 @@ that spans multiple lines

    ### 3. Closing Tag Comments

    Closing tag comments SHOULD be prefixed with either a `#` or `.` followed by the name.
    Closing tag comments SHOULD be prefixed with either a `#` or `.`, followed by the name.

    #### &#10006; Incorrect

  27. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -233,7 +233,7 @@ Sensitive information MUST NOT be placed in a comment.
    &lt;!-- Generated by some_php_function() --&gt;
    </pre>

    &#8627; Incorrect because comment reveals server-side processes.
    &#8627; Incorrect because comment reveals server-side process.

    &#9650; [Comments](#3-comments)

  28. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -233,7 +233,7 @@ Sensitive information MUST NOT be placed in a comment.
    &lt;!-- Generated by some_php_function() --&gt;
    </pre>

    &#8627; Incorrect because comments reveals server-side processes.
    &#8627; Incorrect because comment reveals server-side processes.

    &#9650; [Comments](#3-comments)

  29. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -201,15 +201,15 @@ Closing tag comments SHOULD be prefixed with either a `#` or `.` followed by the
    &lt;/div&gt;&lt;!-- main-wrapper --&gt;
    </pre>

    &#8627; Incorrect because the `#` prefix is missing.
    &#8627; Incorrect because `#` prefix is missing.

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot;&gt;
    ...
    &lt;/div&gt;&lt;!-- .main-wrapper --&gt;
    </pre>

    &#8627; Incorrect because `main-wrapper` is prefixed with a `.` when it should be `#`.
    &#8627; Incorrect because `main-wrapper` is prefixed with `.` instead of `#`.

    #### &#10004; Correct

    @@ -233,7 +233,7 @@ Sensitive information MUST NOT be placed in a comment.
    &lt;!-- Generated by some_php_function() --&gt;
    </pre>

    &#8627; Incorrect because comment doesn't start and end on its own line.
    &#8627; Incorrect because comments reveals server-side processes.

    &#9650; [Comments](#3-comments)

  30. @ryansechrest ryansechrest revised this gist Jan 30, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions html-style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -201,15 +201,15 @@ Closing tag comments SHOULD be prefixed with either a `#` or `.` followed by the
    &lt;/div&gt;&lt;!-- main-wrapper --&gt;
    </pre>

    &#8627; Incorrect because either the `#` prefix is missing.
    &#8627; Incorrect because the `#` prefix is missing.

    <pre lang=html>
    &lt;div id=&quot;main-wrapper&quot;&gt;
    ...
    &lt;/div&gt;&lt;!-- .main-wrapper --&gt;
    </pre>

    &#8627; Incorrect because `main-wrapper` prefixed with a `.` when it should be `#`.
    &#8627; Incorrect because `main-wrapper` is prefixed with a `.` when it should be `#`.

    #### &#10004; Correct