Cut the Fat

The first edition of Upgrade Your HTML had two chapters on writing HTML in general (“Think Through Your Markup” and “Question Your Frontend Code”). This edition and future ones will stress the importance of monitoring your overall markup, too.

The sample code above uses too much code. To illustrate that it’s better not to look at the code itself but its purpose: Allow the user to share the respective page on Facebook.

When you hear that, the first response should not be three rel values, four classes, two child elements with one class each, but: one link. Something like this:

It behooves, then, to check whether this code is enough.

If it doesn’t, it’s useful to check each piece of code whether it’s absolutely necessary. (That’s the school of Minimal Web Development.)

It’s hard and sometimes impossible to reproduce and relate to all decisions made by other developers—especially when we don’t know them and their projects. In this case we can infer a few things, starting with that they will have liked to share a particular page; and we’ll assume that should include a few parameters for their site analytics. In other words, we’ll keep the link they’ve already used:

Given how specific the use of rel was, we can assume that their rel values were also intended and needed. However, as the link would not be opened in a new tab or window—which in most cases, it shouldn’t —, noopener and noreferrer are not needed, and only nofollow remains. Reluctantly.

The rest is speculative and gives reason for concern: One, two, maybe three of the classes may be necessary, but it’s impossible to tell which ones; the span elements seem quite unnecessary, though that assumption is still speculative; yet what’s entirely been missing was some cue for users as well as search engines what the element was about at all—text content, which “Share on Facebook” now covers.

For all we know, that last snippet is the minimum we need. Less code, and more content.