{"id":11047,"library":"html-tag","title":"HTML Tag Generator","description":"The `html-tag` package provides a utility for generating HTML elements programmatically from JavaScript objects. It enables users to create HTML tags by specifying the tag name, an optional attributes object, and optional text content. The library correctly handles void (self-closing) elements and boolean attributes, simplifying basic HTML string construction. As of version 2.0.0, it offers a stable and lightweight solution for basic HTML generation, requiring Node.js 0.10.0 or higher. The package appears to be in maintenance mode, providing a focused API without frequent new feature releases. Its key differentiator is its straightforward, functional approach to HTML string creation, contrasting with more complex templating engines or JSX-based libraries, by focusing solely on direct string output for basic use cases. It does not provide advanced features like comprehensive HTML escaping (beyond basic attribute handling) or DOM manipulation, making it suitable for server-side HTML fragment generation.","status":"maintenance","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jonschlinkert/html-tag","tags":["javascript","attr","attribute","attributes","create","ele","element","elements","generate"],"install":[{"cmd":"npm install html-tag","lang":"bash","label":"npm"},{"cmd":"yarn add html-tag","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-tag","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package exports a single function as its default CommonJS export. This is the primary and most reliable way to use it in Node.js environments.","symbol":"tag","correct":"const tag = require('html-tag');"},{"note":"For modern Node.js environments configured for ESM, a default import might work, relying on Node.js's CJS-to-ESM interop. However, the package itself does not provide explicit ESM exports. Attempting to destructure a named import (e.g., `{ tag }`) will result in `undefined` because 'tag' is not a named export.","wrong":"import { tag } from 'html-tag';","symbol":"tag (ESM default)","correct":"import tag from 'html-tag';"},{"note":"This package does not ship with TypeScript definitions. If type safety is required, you would typically rely on community-provided `@types/html-tag` (if available) or declare module types manually. The example assumes a hypothetical type exists.","symbol":"Type Definition","correct":"import type { TagFunction } from 'html-tag';"}],"quickstart":{"code":"const tag = require('html-tag');\n\n// Generate a simple anchor tag with text and attributes\nconsole.log(tag('a', {href: 'https://example.com', target: '_blank'}, 'Visit Example'));\n// Expected: <a href=\"https://example.com\" target=\"_blank\">Visit Example</a>\n\n// Generate an image tag (a void element) with attributes\nconsole.log(tag('img', {src: 'path/to/image.jpg', alt: 'Descriptive alt text'}));\n// Expected: <img src=\"path/to/image.jpg\" alt=\"Descriptive alt text\">\n\n// Generate a div with text content\nconsole.log(tag('div', 'Hello, World!'));\n// Expected: <div>Hello, World!</div>\n\n// Generate a details tag with a boolean 'open' attribute\nconsole.log(tag('details', {open: true}));\n// Expected: <details open></details>\n\n// Force a tag not to render its closing tag (for XML compatibility)\nconsole.log(tag('p', 'Some text for XML...', false));\n// Expected: <p>Some text for XML...","lang":"javascript","description":"Demonstrates how to generate various HTML elements, including attributes, text content, void elements, and handling of boolean attributes using the `html-tag` function."},"warnings":[{"fix":"Always sanitize or escape user-provided text content before passing it to `html-tag` to prevent XSS attacks. Consider using a dedicated HTML escaping utility for text nodes.","message":"The `html-tag` package does not automatically escape special characters within the `text` argument. Passing unvalidated user input directly as text content can lead to Cross-Site Scripting (XSS) vulnerabilities.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure you pass a strict boolean `true` or `false` for attributes that should behave as boolean HTML attributes. For example, `tag('details', {open: false})` will omit the 'open' attribute, while `tag('details', {open: 'false'})` will produce `open=\"false\"`.","message":"Boolean attributes are handled strictly based on the boolean `true` or `false` values. Using a string like `'false'` will render the attribute with that string value (e.g., `open=\"false\"`), not remove the attribute.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"The most reliable way to use `html-tag` is via the CommonJS `require` syntax: `const tag = require('html-tag');`. If using ESM, ensure your build setup or Node.js version (>=12 with default interop) correctly handles CJS imports.","message":"The package primarily targets CommonJS environments. While modern Node.js may provide CJS-to-ESM interop, using `import tag from 'html-tag'` might behave unexpectedly or fail in some configurations, especially older ones or specific build tools.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid using the `false` argument unless you specifically need to generate XML-like output or are certain your HTML will tolerate unclosed tags. For standard HTML, allow the library to auto-close or recognize void elements.","message":"Passing `false` as the last argument to the `tag` function forces the tag to *not* render a closing tag (e.g., `tag('p', 'text', false)` results in `<p>text`). This behavior is intended for XML compatibility and can produce malformed HTML if not used carefully.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use a default import for ESM (`import tag from 'html-tag';`) or the CommonJS `require` syntax (`const tag = require('html-tag');`).","cause":"Attempting to import `tag` using incorrect ESM syntax (e.g., named import `import { tag } from 'html-tag';`) when the package provides a CommonJS default export.","error":"TypeError: tag is not a function"},{"fix":"Change your import statement to use `import tag from 'html-tag';` if your environment supports ESM. Alternatively, ensure your file is treated as a CommonJS module (e.g., by using a `.cjs` extension or setting `\"type\": \"commonjs\"` in `package.json`).","cause":"Using the CommonJS `require` function within an ECMAScript Module (ESM) file context in Node.js without proper compatibility setup.","error":"ReferenceError: require is not defined"},{"fix":"Use a direct default import `import tag from 'html-tag';` instead of destructuring `import { tag } from 'html-tag';` for this CommonJS package.","cause":"This error can occur if you're trying to destructure a CommonJS default export in an environment that strictly parses `{}` as object destructuring and does not correctly handle CJS-ESM interop for default exports.","error":"SyntaxError: Unexpected token '{'"}],"ecosystem":"npm"}