• View
• Edit
• History
• Attach
• Print
• Backlinks

HTML5Extensions

Questions answered by this recipe

How can I use new HTML5 elements?

Description

Various HTML5 extension recipes.

List of Recipes

• HTML5Audio - Play HTML5 Audio
• HTML5Video - Show HTML5 Video
• FormsPlus - Form extensions adding new HTML5 input types

HTML5 Markup extensions

For a start some code snippets to add new markup rules.
Add to config.php:

Some new semantic block-level elements

(:article:), (:section:), (:header:), (:footer:), (:nav:), (:aside:), (:canvas:), (:address:)
All closing with (:<tagname>end:)

(:article:) and (:section:) can be nested using numerals prepended, same as used in div markup
Attributes are passed on. First name without a key= is used as id=<name>.

Markup('html5', '>table',
  '/^\\(:((article\\d*|section\\d*|header|footer|nav|aside|canvas|address)(?:end)?)(\\s.*?)?:\\)/ie',
  "HTML5Block('$1',PSS('$3'))");

function HTML5Block($name,$attr) {
  global $MarkupFrame; 
  $attr = preg_replace("/^\\s*([\\w]+)\\s?/","id='$1'",$attr);
  $attr = PQA($attr);
  $name = strtolower($name);
  $key = preg_replace('/end$/', '', $name);
  $out = '<:block>'.MarkupClose($key);
  if (substr($name, -3) == 'end') return $out;
  $cf = & $MarkupFrame[0]['closeall'];
  $el = preg_replace("/\\d+/",'',$key);
  $out .= "\n<$el $attr>";
  $cf[$key] = '
</'.$el.'><!-- '.$key.' end -->';
  return $out;
} 

Usage

Notes

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Contributors

• HansB

Comments

See discussion at HTML5Extensions-Talk