PHPackages spatie/html-element - 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. [Utility & Helpers](/categories/utility)
4. /
5. spatie/html-element
ActiveLibrary[Utility & Helpers](/categories/utility)
spatie/html-element
===================
Html rendering in php inspired by hyperscript
1.1.4(4y ago)191108.9k↑42%243MITPHPPHP ^7.3|^8.0CI passing
Since Mar 2Pushed 3mo ago12 watchersCompare
[ Source](https://github.com/spatie/html-element)[ Packagist](https://packagist.org/packages/spatie/html-element)[ Docs](https://github.com/spatie/html-element)[ GitHub Sponsors](https://github.com/spatie)[ RSS](/packages/spatie-html-element/feed)WikiDiscussions main Synced 1mo ago
READMEChangelog (6)Dependencies (3)Versions (12)Used By (3)
HtmlElement
===========
[](#htmlelement)
[](https://packagist.org/packages/spatie/html-element)[](https://github.com/spatie/html-element/actions/workflows/run-tests.yml)[](https://github.com/spatie/html-element/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amaster)[](https://packagist.org/packages/spatie/html-element)
HtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on [Hyperscript](https://github.com/dominictarr/hyperscript), and adds some [Emmet](http://emmet.io/)-style syntactic sugar too.
Elements are rendered using the static `HtmlElement::render` method (which I recommend wrapping in a plain function for readability).
```
el('div.container > div.row > div.col-md-6',
el('a', ['href' => '#'], 'Hello world!')
);
```
```
Hello world!
```
Support us
----------
[](#support-us)
[](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
------------
[](#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
-----
[](#usage)
I recommend adding an `el` function to your application to improve readability over the static method.
```
function el(string $tag, $attributes = null, $content = null) : string
{
return \Spatie\HtmlElement\HtmlElement::render($tag, $attributes, $content);
}
```
Examples
--------
[](#examples)
An empty tag:
```
el('div');
```
```
```
A plain tag with text contents:
```
el('p', 'Hello world!');
```
```
Hello world!
```
A tag with an attribute:
```
el('p', ['style' => 'color: red;'], 'Hello world!');
```
```
Hello world!
```
A tag with an ID set emmet-style:
```
el('p#introduction', 'Hello world!');
```
```
Hello world!
```
A tag with an emmet-style ID and class:
```
el('p#introduction.red', 'Hello world!');
```
```
Hello world!
```
A tag with emmet-style attributes:
```
el('a[href=#][title=Back to top]', 'Back to top');
```
```
Back to top
```
A more complex emmet-style abbreviation:
```
el('div.container > div.row > div.col-md-6', 'Hello world!');
```
```
Hello world!
```
Limited support of [implicit tag names](https://docs.emmet.io/abbreviations/implicit-names/) (`div`s only):
```
el('.container > .row > .col-md-6', 'Hello world!');
```
```
Hello world!
```
Manually nested tags:
```
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
```
```
...
```
Multiple children:
```
el('ul', [el('li'), el('li')]);
```
```
```
Self-closing tags:
```
el('img[src=/background.jpg]');
```
```
```
```
el('img', ['src' => '/background.jpg'], '');
```
```
```
Arguments
---------
[](#arguments)
The `el` function behaves differently depending on how many arguments are passed in.
#### `el(string $tag) : string`
[](#elstring-tag--string)
When one argument is passed, only a tag will be rendered.
```
el('p');
```
```
```
---
#### `el(string $tag, string|array $contents) : string`
[](#elstring-tag-stringarray-contents--string)
When two arguments are passed, they represent a tag and it's contents.
String example:
```
el('p', 'Hello world!');
```
```
Hello world!
```
Array example:
```
el('ul', [el('li'), el('li')]);
```
```
```
---
#### `el(string $tag, array $attributes, string|array $contents) : string`
[](#elstring-tag-array-attributes-stringarray-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.
```
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
```
```
...
```
Changelog
---------
[](#changelog)
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
Testing
-------
[](#testing)
```
$ composer test
```
Contributing
------------
[](#contributing)
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
Security
--------
[](#security)
If you've found a bug regarding security please mail instead of using the issue tracker.
Credits
-------
[](#credits)
- [Sebastian De Deyne](https://github.com/sebastiandedeyne)
- [All Contributors](../../contributors)
About Spatie
------------
[](#about-spatie)
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
License
-------
[](#license)
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
### Health Score
55
—
FairBetter than 98% of packages
Maintenance54
Moderate activity, may be stable
Popularity49
Moderate usage in the ecosystem
Community30
Small or concentrated contributor base
Maturity75
Established project with proven stability
Bus Factor1
Top contributor holds 54.1% 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 ~214 days
Recently: every ~441 days
Total
11
Last Release
1589d ago
Major Versions
0.5.0 → 1.0.02016-03-11
PHP version history (2 changes)0.1.0PHP ^7.0
1.1.2PHP ^7.3|^8.0
### Community
Maintainers
[Spatie](/maintainers/spatie)[@spatie](https://github.com/spatie)
---
Top Contributors
[](https://github.com/sebastiandedeyne "sebastiandedeyne (53 commits)")[](https://github.com/freekmurze "freekmurze (19 commits)")[](https://github.com/AdrianMrn "AdrianMrn (9 commits)")[](https://github.com/osbre "osbre (5 commits)")[](https://github.com/AlexVanderbist "AlexVanderbist (2 commits)")[](https://github.com/patinthehat "patinthehat (2 commits)")[](https://github.com/nook-ru "nook-ru (1 commits)")[](https://github.com/carusogabriel "carusogabriel (1 commits)")[](https://github.com/peter279k "peter279k (1 commits)")[](https://github.com/tbreuss "tbreuss (1 commits)")[](https://github.com/Tjoosten "Tjoosten (1 commits)")[](https://github.com/devsrv "devsrv (1 commits)")[](https://github.com/yutv "yutv (1 commits)")[](https://github.com/mradhi "mradhi (1 commits)")
---
Tags
htmlphpspatiehtml-element
### Code Quality
TestsPHPUnit
Static AnalysisPsalm
Type Coverage Yes
### Embed Badge
```
[](https://phpackages.com/packages/spatie-html-element)
```
### Alternatives
[spatie/laravel-package-tools
Tools for creating Laravel packages
935125.5M7.0k](/packages/spatie-laravel-package-tools)[spatie/laravel-data
Create unified resources and data transfer objects
1.7k28.9M627](/packages/spatie-laravel-data)[spatie/laravel-analytics
A Laravel package to retrieve Google Analytics data.
3.2k5.7M57](/packages/spatie-laravel-analytics)[spatie/macroable
A trait to dynamically add methods to a class
72659.6M64](/packages/spatie-macroable)[spatie/regex
A sane interface for php's built in preg\_\* functions
1.1k17.1M59](/packages/spatie-regex)[spatie/enum
PHP Enums
84429.1M68](/packages/spatie-enum)
PHPackages © 2026
[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)