diff --git a/html/Readme.md b/html/Readme.md new file mode 100644 index 0000000..ed9c10b --- /dev/null +++ b/html/Readme.md @@ -0,0 +1,232 @@ +This document outlines the way Customer Success team is expected to write their HTML markup. Following this document ensures that everyone is writing markup is doing so with good practices and accessibility in mind. + +This document borrows ideas and rules from Google's HTML Style Guide and Github's Markup & Template Styleguide. + +## HTML Formatting + +### Doctype + +All our HTML documents should be using the HTML5 doctype + +```html + +``` + +Do we have a preference for uppercase vs, e.g. ``? + +### General Formatting + +Use a new line for every block, list or table element and indent every such child element. + +```html +
+

Space, the final frontier.

+
+ + +``` + +### Indentation Spaces + +Indent your markup with 4 spaces, not tabs. + +```html + +
+

This is indented with four spaces

+
+ + +
+

This is indented with two spaces

+
+ + +
+

This is indented with an tab

+
+``` + +### Table Format + +If the content being marked up is tabular data (key-value or multidimensional data), use a table. Make use of the caption, ``, ``, `` and `` tags when necessary. In general, all `` elements should always have a scope attribute associating them with a row or column, for accessibility reasons. + +```html + + + + + + + + + + + + + + + + + + + + +
Income and Taxes for 2014
IncomeTaxes
$ 5.00$ 4.50
Table Data 1Table Data 2
+``` + +If data is grouped, tables may have more than one ``. Columns may also have more than one ``, representing a hierarchy of column labels, with the topmost `` elements able to span several secondary headers using the `colspan` attribute. The same is true of table rows, using multiple `` and the `rowspan` attribute. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Results for growth variables of mountain birches subjected to fertilization-shade (FS) treatment (two year) and previous-season manual defoliation, D (50% of leaf area).
Growth variablesMSFdfP
Long-shoot lengthFS1.2426.453,120.075
D1.234214.86, 80.005
FS × D1.344518.62, 30.455
Leaf AreaFS0.7455.452,120.435
D2.7612.17,770.234
FS × D23.33513.01,101.865
+``` + +### Close All HTML Tags + +Even though HTML5 can automatically close tags, we prefer to close them ourselves. + +```html + +

Lorem ipsum dolor sit amet. +

+ + +

Lorem ipsum dolor sit amet.

+ +``` + +Self-contained elements (e.g. ``) should not have a trailing slash at the end. + +### Attribute Values + +When writing attribute values, always quote their value, even when writing HTML5. Use double quotation marks `"` rather than single quotation marks `'`. + +```html + + + + + + + +``` + +### Attribute Order + +> _Do we want to do something like this? See https://github.com/necolas/idiomatic-html_ + +> HTML attributes should be listed in an order that puts the most commonly-used attributes first: +> +> 1. class +> 2. id +> 3. data-* +> 4. Mandatory attributes (e.g. `type` on ) +> 5. Everything else + +### Entity Reference + +There is no need to use entity references like `—`, `”`, `☺`, assuming the same encoding is used for all files and editors. + +The exception to this is for characters with special meaning in HTML (like `<` and `&`) as well as control or "invisible" characters (like no-break spaces). + +```html + +The currency symbol for the Euro is “&eur;”. + + +The currency symbol for the Euro is “€”. +``` + +### Omit `[type]` on `` and ` + + + +```