HtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on Hyperscript, and adds some Emmet-style syntactic sugar too., (*3)
Elements are rendered using the static HtmlElement::render method (which I recommend wrapping in a plain function for readability)., (*4)
## Support us
[<img src="https://github-ads.s3.eu-central-1.amazonaws.com/html-element.jpg?t=1" width="419px" />](https://spatie.be/github-ad-click/html-element)
We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
## Postcardware
You're free to use this package (it's [MIT-licensed](LICENSE.md)), but if it makes it to your production environment you are required to send us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
## Usage
I recommend adding an `el` function to your application to improve readability over the static method.
```php
function el(string $tag, $attributes = null, $content = null) : string
{
return \Spatie\HtmlElement\HtmlElement::render($tag, $attributes, $content);
}
Examples
An empty tag:, (*6)
el('div');
```html
, (*7)
A plain tag with text contents:
```php
el('p', 'Hello world!');
```html
, (*8)
Hello world!, (*9)
A tag with an attribute:
```php
el('p', ['style' => 'color: red;'], 'Hello world!');
```html
, (*10)
Hello world!, (*11)
A tag with an ID set emmet-style:
```php
el('p#introduction', 'Hello world!');
```html
, (*12)
Hello world!, (*13)
A tag with an emmet-style ID and class:
```php
el('p#introduction.red', 'Hello world!');
```html
, (*14)
Hello world!, (*15)
A tag with emmet-style attributes:
```php
el('a[href=#][title=Back to top]', 'Back to top');
## Arguments
The `el` function behaves differently depending on how many arguments are passed in.
#### `el(string $tag) : string`
When one argument is passed, only a tag will be rendered.
```php
el('p');
```html
, (*23)
, (*24)
---
#### `el(string $tag, string|array $contents) : string`
When two arguments are passed, they represent a tag and it's contents.
String example:
```php
el('p', 'Hello world!');
---
#### `el(string $tag, array $attributes, string|array $contents) : string`
When three arguments are passed, the first will be the tag name, the second an array of attributes, and the third a string or an array of contents.
```php
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
```html
, (*28)
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
$ composer test
Wallogit.com
, (*21)