<h1 id="firstHeading" class="firstHeading" lang="en">Main Page</h1>
This sample is another fairly short one, taken from a fairly popular, fairly huge information site. Now, you and I will and should assume good reasons and intentions, but on the surface, more than just one thing feels off: Is this a useful heading title? (Is it indeed the first-level heading?) Why does it need the language assigned when it is (and it is) on an all-English page? And what’s up with this duplication of class
and id
?
We won’t know the reasons and intentions without talking to the developers and stakeholders (and, unfortunately, we won’t talk to them). Still, I’ve picked this example to focus on the duplicate class and ID issue. This is something to be mindful of, for it suggests that one hadn’t been entirely clear about what role which attribute plays on the site.
Is the id
just for reference? For naming or identification? For styling? Or for scripting manipulation? Is the class
serving naming or identification, styling, or scripting? And this is the confusing piece—both attribute-value combinations overlap in what they can be used for. It’s conceivable that the id
was established for reference (to jump right to the heading) and naming, and the class
for styling; but even if the organization’s documentation and coding guidelines documented this, it’s conceivable that the duplication ends up being unnecessarily confusing.
Conceivable.
Avoiding such duplication saves code and can make markup more understandable, as the minimal markup scenario shows:
<h1>Main Page</h1>
Following our field’s class-rich “second paradigm,” consider this alternative:
<h1 class=firstHeading>Main Page</h1>