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)191113.6k—2.6%243MITPHPPHP ^7.3|^8.0CI passing
Since Mar 2Pushed 1mo 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 today
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
57
—
FairBetter than 98% of packages
Maintenance61
Regular maintenance activity
Popularity49
Moderate usage in the ecosystem
Community30
Small or concentrated contributor base
Maturity75
Established project with proven stability
Bus Factor1
Top contributor holds 53.5% 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
1635d 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 (20 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
949146.1M9.2k](/packages/spatie-laravel-package-tools)[spatie/laravel-data
Create unified resources and data transfer objects
1.8k35.2M927](/packages/spatie-laravel-data)[spatie/laravel-analytics
A Laravel package to retrieve Google Analytics data.
3.3k6.1M67](/packages/spatie-laravel-analytics)[spatie/macroable
A trait to dynamically add methods to a class
72964.4M75](/packages/spatie-macroable)[spatie/schema-org
A fluent builder Schema.org types and ld+json generator
1.5k11.4M112](/packages/spatie-schema-org)[spatie/regex
A sane interface for php's built in preg\_\* functions
1.1k19.8M69](/packages/spatie-regex)
PHPackages © 2026
[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)