Note:

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

XHTML

From MoodleDocs

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