HTML5 Tag Generator

0.3.0 · abandoned · verified Sun Apr 19

html5-tag is a lightweight JavaScript utility designed for programmatically generating HTML5 tags and handling their attributes. Its primary function is to create HTML strings, correctly managing void elements (e.g., `<br>`, `<input>`) by omitting their closing tags, and automatically escaping attribute values to prevent XSS vulnerabilities. The current stable version is 0.3.0, released in 2016, indicating a very slow release cadence and likely an abandoned status. Unlike full-fledged templating engines or JSX, html5-tag focuses solely on simple string concatenation for server-side HTML generation, making it suitable for scenarios where a minimal, dependency-free solution for basic HTML element creation is preferred. A key differentiator is its automatic handling of attribute escaping and void elements, abstracting away common HTML syntax pitfalls.

Common errors

```
TypeError: html5_tag_1.tag is not a function
```
cause Attempting to use a named import (`import { tag } from 'html5-tag';`) when the library only provides a default export.

fix Change the import statement to use a default import: `import tag from 'html5-tag';`.
```
TypeError: Cannot read properties of undefined (reading 'call')
```
cause This error can occur in CommonJS environments if `require('html5-tag')` is not assigned correctly, or if `exports.default` is accessed directly after `require()`, often when mixing ESM import syntax with CJS usage.

fix Ensure the CommonJS import is `const tag = require('html5-tag');` to correctly capture the default exported function.

Warnings

gotcha The html5-tag package appears to be unmaintained. The last release (v0.3.0) was in 2016. It may lack updates for modern web standards, security patches, or compatibility with newer JavaScript ecosystems.
Fix: Consider more actively maintained alternatives for generating HTML, especially in new projects.
breaking Starting with version 0.3.0, the `tag` function defaults to generating a `div` element if the tag name is not explicitly provided as the first argument.
Fix: Ensure you always provide the desired tag name as the first argument, or explicitly rely on the 'div' default if that is the intended behavior. For example, `tag({ class: 'my-class' }, 'Content')` now yields `<div>` instead of potentially throwing an error or having different behavior in older versions.

Install

npm install html5-tag npm
yarn add html5-tag yarn
pnpm add html5-tag pnpm

Imports

tag
wrong:
```
import { tag } from 'html5-tag'
```
correct:
```
import tag from 'html5-tag'
```
The library exports a default function for tag generation. Named imports will not work.
tag (CommonJS)
```
const tag = require('html5-tag');
```
For CommonJS environments, the default export is directly assigned to the require call.

Quickstart

Demonstrates how to import and use the `tag` function to create various HTML elements, including void elements, attribute escaping, and the default 'div' behavior.

import tag from 'html5-tag';

// Basic usage: tag name, attributes object, and child content
const link = tag('a', { href: 'https://example.com', target: '_blank' }, 'Visit Example');
console.log(link);
// Expected: <a href="https://example.com" target="_blank">Visit Example</a>

// Void elements do not receive a closing tag
const linebreak = tag('br');
console.log(linebreak);
// Expected: <br>

// Attributes are automatically escaped
const divWithTitle = tag('div', { title: 'It\'s "a" test & <more>' }, 'Escaped Title');
console.log(divWithTitle);
// Expected: <div title="It&#39;&quot;a&quot; test &amp; &lt;more&gt;">Escaped Title</div>

// If tag is omitted, it defaults to 'div' (since v0.3.0)
const defaultDiv = tag({ class: 'container' }, 'Content goes here');
console.log(defaultDiv);
// Expected: <div class="container">Content goes here</div>

view raw JSON →