||<tablestyle="float:right; font-size: 0.9em; width:40%; background:#F1F1ED; margin: 0 0 1em 1em;" style="padding:0.5em;"><<TableOfContents>>||

== Rationale ==

In HTML and CSS, just as in Python, consistent style makes code more maintainable and easier to develop.

== Quick checklist for template code ==
 * Template code should be indented with two spaces.

||'''Don’t use this'''   ||'''Use this instead''' ||
||`<b>`                  ||`<th>`, `<dt><dfn>`, `<strong>` ||
||`<br>`                 ||`<li>`, `<div>`...`</div>` ||
||`metal:fill-slot="pageheading"`||`metal:fill-slot="main"`||
||`<h3>` ''(unless `<h2>` is used earlier in the page)'' ||`<h2>`, `<div>` ||
||`<hr>`                 ||''nothing'', `<table class="listing">` ||
||`<i>`                  ||''nothing'', `<em>`, `<var>` ||
||`onclick=`             ||''Mochi``Kit to attach event handlers to elements (and to create the elements too, if they do nothing without Java``Script).<<BR>>See the [[JavaScriptReviewNotes|JavaScriptStyleGuide]] for more information.''||
||`style=` ''(unless this style is used nowhere else)'' ||''HTML elements, classes'' ||
||`<ul><li tal:repeat="bar bars"`...||`<ul tal:condition="bars"><li tal:repeat="bar bars"`...||
||`<div tal:replace=`...<<BR>>`<span tal:replace=`...||`<tal:one-word-summary replace=`... <<BR>> `<tal:one-word-summary replace=`... <<BR>> ''(functionally identical, but more informative for those reading the code later)''||
||'     ''(ASCII single quote used for an apostrophe)'', &apos; || &``#8217; ''or'' &#x2019; ''or'' &rsquo; ||
||"foo" ''(ASCII double quotes)'', &quot;                       || &#x201C; ''and'' &#x201D; ''or'' &ldquo; ''and'' &rdquo; ||
||'foo' ''(ASCII single quotes)''                               || &#x2018; ''and'' &#x2019; ''or'' &lsquo; ''and'' &rsquo; ||

== Indentation ==

 * Indent each nesting level by two spaces. To make diffs and merges sensible, don't change indentation of otherwise-unchanged code; put a blank line between sections that are indented correctly and sections that are not.
 * Indent the closing tag of a container at the same level as the opening tag, unless the contents and closing tag can all fit on the same line as the `>` of the opening tag.
 * Indent the `>` or `/>` of a multi-line opening tag at the same level as the `<`.

== TAL precedence ==

When an element has multiple statements, they are executed in this order:

 1. define
 2. condition
 3. repeat
 4. content or replace
 5. attributes
 6. omit-tag

== HTML guidelines ==

=== Comments ===

Don't give away implementation details in `<!-- HTML comments -->`. Instead, use code like this. {{{
<tal:comment condition="nothing">
  Comment here.
</tal:comment>}}}

=== Tables ===

 * Use `<table>` with rows of `<th>` and `<td>` to produce a table of name-value data.
 * Use `<table class="listing">` to get the standard Launchpad data table appearance (a light border between rows, and a light background for headers and footers).
 * Inside `<table class="listing">`, use `<thead>` around the one or more rows (`<tr>`s) that represent the table heading. If you don't, the cells will be crooked.

=== Lists ===

 * See the "Various custom list formats" section of `icing/style.css` for icons you can use in your list elements -- for example, `<li class="add">Add something</li>`. If every item in a list should have the same icon, attach the `class=` to the `<ul>` instead of every `<li>`.

=== Text and code to avoid ===

''See'' UserInterfaceWording.

=== Defining a local macro that can be used in a page template ===

Use `metal:define-macro` like this:

{{{
<metal:define metal:define-macro="my-macro">
  <ul tal:condition="foobies">
    <li tal:repeat="foo foobies" tal:content="foo.name" />
  </ul>
</metal:define>
}}}

`define-macro` by itself defines the macro, but leaves the output untouched -- in other words, when processing the code snippet above the TAL engine generates an unordered list as output. You may also use names inside the macro as long as they are defined all in the contexts it is used, including its definition.

You can then access the macro from the `template/macros` namespace:

{{{
  <metal:use metal:use-macro="template/macros/my-macro" />
}}}


=== Reserved form parameter names ===

There are certain names for form controls that are reserved; for details see ReservedQueryParameters.

== Unresolved issues ==

 * The reference to Mochi``Kit needs to be changed to the YUI equivalent.