<div>
<p><a class="largelink" href="https://example.com/ACME/" lang="en" dir="auto" translate="no">A Company Making Everything (ACME)</a></p>
<p>Strategies, standards, and supporting resources to make the World great again.</p>
</div>(Links and text would have given it all away, so I “neutralized” the sample.)
This code is from a technical organization. It’s talkative but doesn’t say much: some sort of section with two paragraphs, one of which includes a link (one that’s styled prominently), another which contains a one-liner. We learn that the link is “large” and written in English (like the rest of the page), that text directionality is “automatic,” and that the contents should not be translated.
The problem with this is that some code portrays no meaning, and that not all meaning that is there is conveyed.
The container, a semantically meaningless div element, should be swapped with a slightly more appropriate, slightly more meaningful section element. (Only slightly—section doesn’t mean much, either, but one would need to review the respective site to determine what other sectioning or flow element was most appropriate.)
The first paragraph, and largelink alludes to what we can see on the live page, serves more of a heading. Marking this part up as a heading would be preferable because it carries more meaning.
largelink is a terrible name because you don’t want to edit tons of HTML templates and documents once that large link has been redesigned to be small.
The language throughout the document is English and, on closer inspection, needs no additional specifying on anchors buried deep in the page (as nothing here is about blaming, I ask to take that as a given).
Likewise, we don’t need to define directionality here, especially not as auto.
translate=no is interesting: In many use cases translate is of no interest to the user, and may rather slow a page down for it increases overall payload. In some cases, however, as with tool-based translation, translate=no is important, as it makes sure the respective content is not being translated. [As earlier versions of this booklet removed translate=no from the optimized sample, that’s still the case, but one can therefore make the case that it should be kept.]
The way to approach markup—per the school I’ve been taught and that I’ve been teaching—is to write the most minimal meaningful markup possible, and to be selective about anything that’s not strictly necessary.
That leads us to the concluding minimal sample suggestion:
<section>
<h1><a href=/ACME/>A Company Making Everything (ACME)</a></h1>
<p>Strategies, standards, and supporting resources to make the World great again.
</section>If it meets the organization’s needs then this code looks gentler, doesn’t it? We’ve upgraded this HTML.