Question

I put together a jQuery plugin that changes the aspect of the text in an HTML container and gives it an LCD-like appearance. Each character converted by the plugin is constructed with several square blocks (“bricks” as I’ve called them), absolutely positioned in a parent container – one container for each character converted. The bricks are in fact <b> tags with a display: block rule applied to them.

I’ve used them instead of <div> in order to reduce the amount of markup, but I want to know if there are downsides to this approach that I’m not aware of.
You can see the plugin in action here: Digitize

Answer 1

It makes little difference, but perhaps a div or span would be more appropriate due to their lack of semantic meaning.

You aren’t saving much here as the markup is built dynamically, so the length difference between b and div or span isn’t significant in any way.

The HTML spec says:

The b element represents a span of text to which attention is being
drawn for utilitarian purposes without conveying any extra importance
and with no implication of an alternate voice or mood, such as key
words in a document abstract, product names in a review, actionable
words in interactive text-driven software, or an article lede.

The b element should be used as a last resort when no other element is
more appropriate. In particular, headings should use the h1 to h6
elements, stress emphasis should use the em element, importance should
be denoted with the strong element, and text marked or highlighted
should use the mark element.

But on the other hand, it really makes no difference when producing it using JS other than neatness. Twitter bootstrap horribly uses i for icons for instance!

The ‘correct’ way to do this by the way is to use the Shadow DOM – it’s pretty brandspanking new, but it allows you to hide away implementation details in the same way that a select tag does (i.e. html just has select and option elements, but behind the scenes there is more going on).

For a demo, check out http://adobe.github.com/web-platform/samples/css-regions/shadow-dom/ in a new browser. If you use Chrome, then turn on Developer Tools Experiments in chrome://flags/, then in the inspector menu turn on the View Shadow DOM option. This will let you see what’s happening here.

In short, you can make elements that are isolated from everything else and essentially invisible. You can style them as per usual, but can also isolate them from the rest of the CSS. They behave just like regular ones, except that they are not addressable in the normal way.

If I were making this plugin, I’d use Shadow Dom where I could, with a fallback to span or b or whatever, mainly just because cool stuff is cool!