PHPackages canteen/html5 - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [PDF & Document Generation](/categories/documents) 4. / 5. canteen/html5 AbandonedArchivedLibrary[PDF & Document Generation](/categories/documents) canteen/html5 ============= Create dynamic, valid HTML5 markup with a simple an intuitive PHP API 1.1.4(11y ago)518.3k22MITPHPPHP >=5.3.0 Since Oct 12Pushed 11y ago1 watchersCompare [ Source](https://github.com/Canteen/CanteenHTML5)[ Packagist](https://packagist.org/packages/canteen/html5)[ Docs](http://github.com/Canteen/CanteenHTML5)[ RSS](/packages/canteen-html5/feed)WikiDiscussions master Synced 3d ago READMEChangelog (5)DependenciesVersions (8)Used By (2) \#Canteen HTML5 Create dynamic, well-formatted HTML5 markup with a simple an intuitive PHP API. This is a fork/rewrite of the [Gagawa](https://code.google.com/p/gagawa/) project. CanteenHTML5 is a concise, flexible and easy to remember API which makes it possible to create simple markup (such as a link) or more complex structures (such a table, document or nested list). All tags and attribute names are validated against the current HTML5 specification. For documentation of the codebase, please see [Canteen HTML5 docs](http://canteen.github.io/CanteenHTML5/). \##Requirements This library requires a webserver running PHP 5.3+. Also, the root namespace for the library is `Canteen\HTML5`. \##Installation Install is available using [Composer](http://getcomposer.org). ``` composer require canteen/html5 dev-master ``` Including using the Composer autoloader. ``` require 'vendor/autoload.php'; ``` \##Usage \###Basic To create an HTML node, simply call global `html` method, passing in the tag name and then any attributes. ``` // Enable the global use of html() Canteen\HTML5\HTML5::useGlobal(); // Turn on autoloading if not using composer's autoloading Canteen\HTML5\HTML5::autoload(); echo html('img src=home.jpg'); echo html('img', 'src=home.jpg'); echo html('img', array('src'=>'home.jpg')); ``` All of these examples would output: ``` ``` \###Adding Attributes There are dfferent ways to add attributes for HTML container nodes such as ``, ``, or in the example below, ``. 1. Part of the tag ``` echo html('nav title="Navigation" class=main', 'Welcome'); ``` 2. As an associative array ``` echo html('nav', 'Welcome', array('title'=>'Navigation', 'class'=>'main')); ``` 3. As a shorthand string ``` echo html('nav', 'Welcome', 'title="Navigation" class=main'); ``` 4. As an property methods ``` $nav = html('nav', 'Welcome'); $nav->class = 'main'; $nav->title = 'Navigation'; echo $nav; ``` All of these examples output the same markup: ``` Welcome ``` \###Adding Nested Elements Any HTML5 container tags (such as ``, ``, or ``) can have child elements. These elements can be strings or other HTML5 element objects. ``` $label = html('span', 'Website!'); $link = html('a', $label); $link->href = 'http://example.com'; echo $link; ``` Alternatively, use the `addChild` method for any container tag. ``` $link = html('a'); $link->href = 'http://example.com'; $link->addChild(html('span', 'Website!')); echo $link; ``` Or `appendTo` to target a container to be added to: ``` $link = html('a'); $link->href = 'http://example.com'; html('span', 'Website!')->appendTo($link); echo $link; ``` All examples would output: ``` Website! ``` \###CSS Selectors Tag names can optionally have CSS-style class and id selectors: ``` echo html('a#example'); // echo html('span.small'); // echo html('span.small.label'); // echo html('span#example.small.label'); // ``` \##API Documentation \####For self-closing elements (e.g. ``, ``) ``` html($tag, $attributes=null); ``` - `$tag` **{string}** The name of the valid HTML5 element which can contain CSS selectors or short-hand attribute string. - `$attributes` **{array | string}** (optional) Collection of element attributes Returns a `Canteen\HTML5\Node` object. \####Node Methods - `setAttribute($name, $value)` Set an attribute by name and value. - `setAttributes($values)` Set an associative array of name/value pairs. - `setData($name, $value)` Set data-\* fields on the HTML5 element. - `getData($name)` Get the data-\* field on the HTML5 element. - `appendTo(NodeContainer $container)` Add the element to the end of a container element. - `prependTo(NodeContainer $container)` Add the element to the beginning of a container element. \####For container HTML elements (e.g. ``, ``) ``` html($tag, $contents=null, $attributes=null); ``` - `$tag` **{string}** The name of the valid HTML5 element which can contain CSS selectors or short-hand attribute string. - `$contents` **{string | Node | NodeContainer}** (optional) The string of the contents of the tag, or another element created by `html()` - `$attributes` **{array | string}** (optional) Collection of element attributes Returns a `Canteen\HTML5\NodeContainer` object. \####NodeContainer Methods (extends `Node`) - `addChild($node)` Add a `Node` object to the bottom of the collection of nodes - `addChildAt($node, $index)` Add a `Node` object at a specific zero-based index - `removeChild($node)` Remove a particular node from the container - `removeChildAt($index)` Remove a node by zero-based index - `removeChildren()` Remove all children from the container - `getChildren()` Get the collection of all `Node` objects - `getChildAt($index)` Get a `Node` object at a specific index \###Additional Components \####Document The `Document` object is used for creating a bare-bones HTML5 document. ``` Canteen\HTML5\Document($title='', $charset='utf-8', $beautify=false); ``` - `$title` **{string}** (optional) The title of the document - `$charset` **{string}** (optional) The HTML character set to use - `$beautify` **{boolean}** (optional) If the output should be an indented work of art. Properties - `head` **{NodeContainer}** The document's `` element - `body` **{NodeContainer}** The document's `` element - `title` **{NodeContainer}** The document's `` element ``` use Canteen\HTML5\Document; $doc = new Document('Untitled'); $doc->head->addChild(html('script src=main.js')); $doc->body->addChild(html('div#frame')); echo $doc; ``` \####SimpleList The `SimpleList` for conveniently creating `` and `` elements. ``` Canteen\HTML5\SimpleList($elements, $attributes=null, $type="ul"); ``` - `$elements` **{array}** The collection of strings or other HTML elements - `$attributes` **{array | string}** (optional) Collection of element attributes - `$type` **{string}** (optional) A value of either "ul" or "ol" \####Table The `Table` object is used for creating `` elements. ``` Canteen\HTML5\Table($data, $headers=null, $checkbox=null); ``` - `$data` **{array}** The collection of associative-arrays with key/value pairs - `$headers` **{array}** (optional) The names of the header labels - `$checkbox` **{string}** (optional) The name of the key name in the data to replace with a checkbox, for instance "id" ``` // Create a sample table with some rows of dummy data $table = new Table( array( array('id'=>1, 'first'=>'James', 'last'=>'Smith'), array('id'=>2, 'first'=>'Mary', 'last'=>'Denver'), array('id'=>3, 'first'=>'Charlie', 'last'=>'Rose') ), array('ID', 'First Name', 'Last Name') ); ``` \###Rebuild Documentation This library is auto-documented using [YUIDoc](http://yui.github.io/yuidoc/). To install YUIDoc, run `sudo npm install yuidocjs`. Also, this requires the project [CanteenTheme](http://github.com/Canteen/CanteenTheme) be checked-out along-side this repository. To rebuild the docs, run the ant task from the command-line. ``` ant docs ``` \##License## Copyright (c) 2013 [Matt Karl](http://github.com/bigtimebuddy) Released under the MIT License. ### Health Score 35 — LowBetter than 79% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity28 Limited adoption so far Community15 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 80% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~64 days Recently: every ~0 days Total 7 Last Release 4214d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a8c8b26b4bef66000886f554f9498714eddf11bdc41673d33a0f6365a82f293b?d=identicon)[bigtimebuddy](/maintainers/bigtimebuddy) --- Top Contributors [![JustBlackBird](https://avatars.githubusercontent.com/u/1167086?v=4)](https://github.com/JustBlackBird "JustBlackBird (4 commits)")[![bigtimebuddy](https://avatars.githubusercontent.com/u/864393?v=4)](https://github.com/bigtimebuddy "bigtimebuddy (1 commits)") --- Tags htmlHTML5tagsmarkupdocument ### Embed Badge ![Health badge](/badges/canteen-html5/health.svg) ``` [![Health](https://phpackages.com/badges/canteen-html5/health.svg)](https://phpackages.com/packages/canteen-html5) ``` ### Alternatives [netcarver/textile Textile markup language parser 2311.5M16](/packages/netcarver-textile)[faisalman/simple-excel-php Easily parse / convert / write between Microsoft Excel XML / CSV / TSV / HTML / JSON / etc formats 582599.4k1](/packages/faisalman-simple-excel-php)[scannerjs/scanner.js ScannerJS: JavaScript web scan JPG PDF images from TWAIN WIA scanners in browser (Chrome, Edge, Firefox or IE) 5914.3k](/packages/scannerjs-scannerjs)[stolz/laravel-html-tidy HTML Tidy middleware for Laravel 268.7k](/packages/stolz-laravel-html-tidy) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)