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 isn’t, it’s useful to check each piece of code whether it’s necessary. (That’s the school of Minimal Web Development.)

It’s hard and sometimes impossible to reproduce and relate toalldecisions 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 aparticularpage. We’ll assume the reference to that page should include a few parameters for their site analytics. Therefore, 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 open in a new tab or window—which in most cases, it shouldn’t —, noopener and noreferrer are not needed. 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 unnecessary, though that assumption is still speculative. What’s entirely been missing is 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, more content.