[imp] Adds further details

Author: nternetinspired

manual/en-US/coding-standards/chapters/html.md

@@ -1,12 +1,12 @@
-## General html formatting
+## html
 
-These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely:
+These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, and include items from:
 
 1. [Google's html styleguide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml)
 
 ### Protocol
 
-Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols.
+Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless they are not available over both protocols.
 
 This prevents mixed content issues and results in minor file size savings.
 
@@ -17,29 +17,28 @@ This prevents mixed content issues and results in minor file size savings.
 <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
 ```
 
-### Capitalisation
-All html shoudl be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).
-
-
+### Type attributes
+Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).
 ```html
 <!-- Good -->
-<img src="joomla.png" alt="Joomla">
+<link rel="stylesheet" href="//joomla.org/css/main.css">
+
 <!-- Bad -->
-<A HREF="/">Home</A>
+<link rel="stylesheet" href="//joomla.org/css/main.css"
+  type="text/css">
 ```
 
-### Mark todos
-Highlight todos by using the keyword TODO, eg:
+### Capitalisation
+All html should be lowercase; element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).
 
 ```html
-<!-- TODO: add active item class -->
-<ul>
-  <li>Home</li>
-  <li>Blog</li>
-</ul>
+<!-- Good -->
+<img src="joomla.png" alt="Joomla">
+<!-- Bad -->
+<A HREF="/">Home</A>
 ```
 
-## Html formatting
+### Formatting
 Use a new line for every block, list, or table element, and indent every such child element.
 
 ```html
@@ -56,4 +55,27 @@ Use a new line for every block, list, or table element, and indent every such ch
   <li>Home</li>
   <li>Blog</li>
 </ul></div>
+```
+
+### Semantics
+Use HTML according to its purpose. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc.
+
+Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.
+```html
+<!-- Good -->
+<a href="subscriptions/">View subscriptions</a>
+
+<!-- Bad - ul is a block element -->
+<div onclick="goToSubscriptions();">View subscriptions</div>
+```
+
+### Mark todos
+Highlight todos by using the keyword TODO, eg:
+
+```html
+<!-- TODO: add active item class -->
+<ul>
+  <li>Home</li>
+  <li>Blog</li>
+</ul>
 ```