DEV Community

Olaniyi Olabode
Olaniyi Olabode

Posted on

Level Up Your HTML Game with html-tags-utils

Image descriptionAs web developers, we deal with HTML every day. It’s the backbone of everything we build on the web. Yet, how often do we wish we had a more efficient way to manage HTML tags, validate them, or get detailed metadata about their attributes? That’s exactly why I created html-tags-utils a package that takes working with HTML tags to a whole new level.

If you’re looking for a tool that combines comprehensive utilities, detailed metadata, and advanced features for HTML tags, you’re in the right place.


Why html-tags-utils?

Let’s be honest, writing or managing HTML tags isn’t the most exciting part of web development. That’s where tools like the html-tags package come in, giving us a simple list of all valid HTML tags. But I needed more.

I wanted a tool that could answer questions like:

  • Is this tag valid in HTML?
  • Is this a self-closing (void) tag?
  • Which tags have a specific attribute, like href or src?
  • How can I group, filter, or sort tags more efficiently?

So, I built html-tags-utils to fill that gap. It extends the functionality of html-tags by offering detailed metadata, validation tools, and filtering utilities to make working with HTML smarter and faster.


Features You’ll Love

Here’s what makes html-tags-utils stand out:

🚀 All HTML Tags

Get a complete list of all standard HTML tags at your fingertips.

🌀 Void Tags

Easily identify self-closing tags like <img> and <br>.

📚 Detailed Metadata

Access detailed information about each tag, including:

  • Descriptions
  • Supported attributes
  • Categories (e.g., Inline, Block, Interactive)

🛠️ Utilities

Supercharge your workflow with utilities that allow you to:

  • Filter tags by prefix
  • Sort tags alphabetically (ascending or descending)
  • Group tags by length
  • Search for tags by supported attributes

Validation

Quickly check if a tag is valid or if it’s a void/self-closing tag.


Installation

Getting started is simple. Install the package via npm:

npm install html-tags-utils
Enter fullscreen mode Exit fullscreen mode

How It Works

Here’s a sneak peek into what html-tags-utils can do for you.

1. Get All HTML Tags

import { htmlTags } from "html-tags-utils";

console.log(htmlTags);
//=> ['a', 'abbr', 'address', 'article', …]
Enter fullscreen mode Exit fullscreen mode

2. Identify Void Tags

import { voidHtmlTags } from "html-tags-utils";

console.log(voidHtmlTags);
//=> ['area', 'base', 'br', 'col', 'embed', 'img', …]
Enter fullscreen mode Exit fullscreen mode

3. Check if a Tag is Valid

import { isHtmlTag } from "html-tags-utils";

console.log(isHtmlTag("div")); //=> true
console.log(isHtmlTag("custom-tag")); //=> false
Enter fullscreen mode Exit fullscreen mode

4. Filter Tags by Prefix

import { filterTags } from "html-tags-utils";

console.log(filterTags("d"));
//=> ['data', 'datalist', 'dd', 'del', 'details', 'dialog', 'div', 'dl', 'dt']
Enter fullscreen mode Exit fullscreen mode

5. Get Tags by Supported Attribute

import { getTagsByAttribute } from "html-tags-utils";

console.log(getTagsByAttribute("href"));
//=> ['a', 'area', 'link', 'base']
Enter fullscreen mode Exit fullscreen mode

How It Compares to html-tags

If you’re familiar with the html-tags package, you’ll appreciate how html-tags-utils takes things further. Here’s a quick comparison:

Feature html-tags html-tags-utils
List of HTML Tags
Void Tags
Detailed Tag Metadata
Tag Validation
Filter Tags by Prefix
Sort Tags Alphabetically
Group Tags by Length
Search by Attribute

Use Cases You’ll Actually Need

  1. Debugging HTML
    When debugging, you can quickly validate if a tag is correct or check if it’s self-closing.

  2. Dynamic Tag Management
    Need to create a list of valid tags dynamically? Use the filtering and grouping utilities to generate exactly what you need.

  3. Web Development Tools
    Build smarter components or tools by integrating metadata about HTML tags, like descriptions and attributes.


Contributing

I’d love to have your input! Feel free to open issues or submit pull requests on GitHub. Let’s make html-tags-utils even better together.

GitHub Repository


Wrapping It Up

Whether you’re a seasoned developer or just getting started, html-tags-utils is here to make your work with HTML tags easier, faster, and smarter. It’s built for developers who want more functionality and flexibility than what existing tools offer.

Try it out, and let me know what you think!

If you ❤️ the package, consider starring it on GitHub or sharing it with your developer community. 🚀

Got feedback? Let’s connect on Twitter or GitHub.


Check it out and take your HTML game to the next level!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay