Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

XHTML: Difference between revisions

From MoodleDocs
(New page: ==XHTML Strict 1.0== Moodle output must be compliant with XHTML Strict 1.0. This means: * No tables for pure layout. * No frames * etc ==Styling== * Make sure you provide enough CSS...)
 
Line 1: Line 1:
==XHTML Strict 1.0==
==XHTML Strict 1.0==


Moodle output must be compliant with XHTML Strict 1.0. This means:
Moodle output must be compliant with XHTML Strict 1.0. This means it must be:


* No tables for pure layout.
===Well-formed XML===
* No frames
 
* etc
In a well-formed XML document, every opening tag has a matching close tag; tags are properly nested attributes are properly quoted, and the file contains no syntax errors. See [http://www.w3.org/TR/xml/#sec-well-formed the XML specification for a formal definition].
 
While developing, you should have the option Administration ► Server ► Debugging ► XML strict headers turned on. With this option on, your web browser will refuse to display any page that is not well-formed. This makes such problems easy to find and fix.
 
===Valid XHTML Strict===
 
This means that the XML of your page follows the particular rules from the [http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict XHTML-1.0-Strict DTD]. <nowiki>For example, the first tag in the file must be <html>, a <form> tag must have an action="" attribute, an <li> can only appear inside an <ol> or <ul>, you cannot use <frame> tags, and so on.</nowiki> and so on.
 
You can check whether the HTML you output is valid by using a HTML validator, for example the [https://addons.mozilla.org/en-US/firefox/addon/249 Html Validator] add-on for Firefox.
 
===Semantic markup===
 
That is, HTML tags should be used only to mark up the appropriate types of content. For example:
* tables should not be used for page layout, just to display tabular information,
* if something is a heading, it should be marked up using <h''n''> tags, for an appropriate ''n'',
* if something is a list, it should marked up using <ol>, <ul> or <dl>,
* and so on.


==Styling==
==Styling==

Revision as of 06:14, 9 June 2009

XHTML Strict 1.0

Moodle output must be compliant with XHTML Strict 1.0. This means it must be:

Well-formed XML

In a well-formed XML document, every opening tag has a matching close tag; tags are properly nested attributes are properly quoted, and the file contains no syntax errors. See the XML specification for a formal definition.

While developing, you should have the option Administration ► Server ► Debugging ► XML strict headers turned on. With this option on, your web browser will refuse to display any page that is not well-formed. This makes such problems easy to find and fix.

Valid XHTML Strict

This means that the XML of your page follows the particular rules from the XHTML-1.0-Strict DTD. For example, the first tag in the file must be <html>, a <form> tag must have an action="" attribute, an <li> can only appear inside an <ol> or <ul>, you cannot use <frame> tags, and so on. and so on.

You can check whether the HTML you output is valid by using a HTML validator, for example the Html Validator add-on for Firefox.

Semantic markup

That is, HTML tags should be used only to mark up the appropriate types of content. For example:

  • tables should not be used for page layout, just to display tabular information,
  • if something is a heading, it should be marked up using <hn> tags, for an appropriate n,
  • if something is a list, it should marked up using
      ,
      or
      ,
    • and so on.

    Styling

    • Make sure you provide enough CSS ids and classes to enable a designer to modify everything with CSS.
    • Never use inline styles
    • If you need to make basic style definitions for a module, put them in a file called styles.php in that module. This will be included into every theme.

    Moodle API

    • Use the functions in lib/weblib to do as much as possible (print_header(), print_box() etc)
    • This API will change a lot in Moodle 2.0. See: Navigation_2.0