Difference between revisions of "HTML Guidelines"

Jump to: navigation, search
(Header)
Line 6: Line 6:
 
* <h2> is the top-level header of the page content/central column. There should be only one <h2> (except for front-page where multiple <h2> are allowed).
 
* <h2> is the top-level header of the page content/central column. There should be only one <h2> (except for front-page where multiple <h2> are allowed).
 
* Headers should not be used for notification. Notification classes should be used for notification.
 
* Headers should not be used for notification. Notification classes should be used for notification.
* We shouldn't even need the .main class, or any other additional classes used to alter the appearance of the header. The fact that the header is located in the central column/main content area, and is a header, should be enough. The only reason we need it is because we're recruiting headers for other purposes. Some cases, such as dimmed_text and other classes that are needed to allow for added functionality are an exception to this rule. The objective is to standardize the heading, without removing functionality for indicating an element won't be visible to students etc.
+
* For H1 and H2 elements, no additional classes should be added. For H3 and below, some classes that describe the purpose of that heading such as sectionname, and others that provide functionality, such as dimmed_text, may be needed. Blanket and vague classnames should be eliminated (main, header, title, mdl-align, etc).
 
* We shouldn't be wrapping a heading in a div just to allow it to be styled. This complicates the DOM, and defeats the purpose of any effort to standardize the appearance of headings across the page.
 
* We shouldn't be wrapping a heading in a div just to allow it to be styled. This complicates the DOM, and defeats the purpose of any effort to standardize the appearance of headings across the page.
  

Revision as of 06:43, 4 September 2013

Header

Header usage should be hierarchical within page views Reference link: Standardize classnames and layout to facilitate theming

  • Headers should be hierarchical, with two or more <h3> under each <h2> and so forth. However an exception applied to front-page where multiple <h2> are allowed for displaying the page's items (eg: list of courses, list of categories, etc).
  • <h2> is the top-level header of the page content/central column. There should be only one <h2> (except for front-page where multiple <h2> are allowed).
  • Headers should not be used for notification. Notification classes should be used for notification.
  • For H1 and H2 elements, no additional classes should be added. For H3 and below, some classes that describe the purpose of that heading such as sectionname, and others that provide functionality, such as dimmed_text, may be needed. Blanket and vague classnames should be eliminated (main, header, title, mdl-align, etc).
  • We shouldn't be wrapping a heading in a div just to allow it to be styled. This complicates the DOM, and defeats the purpose of any effort to standardize the appearance of headings across the page.


Not this:

  <h2 class="main">This is the top-level header</h2>
  <p>A paragraph of content.</p>
  <h2 class="main">These is your score on XX activity.</h2>
   <p>A paragraph of content.</p>
  <h2 class="main">You must make a selection to proceed.</h2>
  <input type="submit" value="Generic submit button">

This:

  <h2>This is the top-level header</h2>
  <p>This paragraph gives additional information and explains what's to come.</p>
  <h3>Content sub-header</h3>
  <p>More paragraph content content content</p>
  <h3>Content sub-header</h3>
  <p>More paragraph content content content</p>
  <div class="notifyproblem">You must make a selection to proceed.</div>