Cut the Fat
<a rel="nofollow noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug" class="dpsp-network-btn dpsp-facebook dpsp-no-label dpsp-first" ><span class="dpsp-network-icon"></span><span class="dpsp-network-label-wrapper"></span></a>
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:
<a href=https://www.facebook.com/sharer/>Share on Facebook</a>
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:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug">Share on Facebook</a>
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 —,
noreferrer are not needed. Only
nofollow remains. Reluctantly.
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug" rel=nofollow>Share on Facebook</a>
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.
Why Less Code?
Why all of this, why this focus on so little code? What’s the purpose of this all, does that not make our work more difficult than it already is?
Here’s my thinking! Less code:
- is less code to write
- is… or can be easier to understand
- is usually faster (at least the payload is smaller)
- is often easier to maintain
- is more beautiful
The first reason is obviously correct, because it’s tautological.
Understandability and maintainability depend on a few factors, particularly whether one inadvertently drifts into writing magic code. I believe that’s not an actual danger with HTML: Assuming the code is still valid, understandability and maintainability don’t seem to suffer when, for example, leaving out optional code—or would you suggest that
<p>Hi is harder to understand than
Less code (meaning a smaller payload, which leads to improved performance) seems to reflect solid reasoning. I’d argue that exceptions prove this rule, and that we enter the realm of micro-optimization when we reject them.
That less code is more beautiful—this is certainly individual, subjective, personal. Yet personally, subjectively, individually, I cherish and promote minimal HTML, like the smallest valid document:
<!DOCTYPE html> <title>␣</title>