Create a Tag Cloud with some Simple CSS and even Simpler JavaScript

Building a Tag Cloud with CSS and JavaScript

Tag clouds remain a simple, effective way to visualize content popularity. The idea is straightforward: tags with more articles appear larger. Building one requires only a bit of markup, a fetch call, and some flexbox CSS.

The HTML Structure

We start with an empty list that JavaScript will populate:

The source data is a JSON feed of tags, each with an associated array of articles. Our script will fetch this data, then for each tag create a list item containing a link. The link's font-size will be proportional to the number of articles that tag holds—so animation with 13 articles renders larger than background-color with one.

Each list item will display the tag name, with the article count in parentheses, all wrapped in a hyperlink pointing to the tag's page. If your tags already exist in HTML, you can adapt the JavaScript to only handle the font sizing as a progressive enhancement.

The JavaScript Logic

The script uses the Fetch API to retrieve the JSON. Once received, it determines the tag with the most articles, which serves as the baseline for our font scale. We then iterate through the results, building a document fragment to minimize DOM manipulation—a performance win for larger sets of tags.

For each result, we create a list item with a class of .tag and set its innerHTML to a link. The crucial piece is an inline style that calculates the font size based on the article count relative to the highest count. Initially, this formula might look like:

However, a simple division yields unreadable results: a tag with 1 article out of 25 would get a font size of 0.24em, and the ratio worsens with larger datasets. To keep everything legible, we add a sanity check—if the calculated size drops below 1em, we clamp it to 1em. This keeps all tags within a readable 1em to 6em range, with the maximum size adjustable via a simple variable.

By extracting a few variables before the loop, the code becomes cleaner and more maintainable, even allowing the article count to be reused in multiple places.

Styling with Flexbox

Flexbox is the natural choice for layout here, as tag widths vary. The container centers its children and removes list styling. Each individual tag also uses flexbox to vertically center its content, since font sizes differ.

Links get a bit of padding around their text, extending the clickable area—useful for touch interfaces. The default underline is removed, as it's safe to assume all items in the cloud are links.

For visual hierarchy, a simple repeating color scheme is applied: every fourth tag starting from the first is yellow, the second is red, the third is purple, and the fourth is blue. This pattern is drawn from a familiar blogroll design, using longhand color properties rather than CSS custom variables to maintain IE 11 compatibility.

Hover and focus states swap the link color to black and apply a box-shadow effect. The shadow's size is defined in em units, allowing it to scale proportionately with the text it highlights—a subtle effect that's more polished than a plain underline.

That's all there is to it. A handful of variables for font scaling, a bit of fetch logic, and some flexbox styling produce a clean, functional tag cloud.