Here are some guidelines in composing HTML attributes:
id and class attributes always come in this sequence and second to the last.
<html lang="en" id="start" class="view">
The rationale for this is that id and class attributes are commonly used as markers and hooks for CSS and JS while other attributes—such as lang is inherent to the element—which is the basis for priority.
Always have a data-name attribute for all elements.
<div id="wild-card" class="wild-card" data-name="Wild Card">
data-name identifies the element’s formal name in the Information Architecture of the system.
All Constructor and Component elements must have a Container as indicated by a class name suffix of ---cr.
<div id="entity" class="entity" data-name="Entity"> <div class="entity---cr">
In using the word “navigation” as attribute names, use “nav”. Same goes for “information,” use “info”.
<div id="go-content-nav" class="go-content-nav nav cp" data-name="Go to Content Navigation">
When pertaining to a text as an element, use a class name suffix of ---txt.
<span class="go-content-navi---txt">Go to Content</span>
Navigation is a component. Navigation Items is an object.
A Heading component is composed of:
* Name
* Description
* Logo
If an object has a nested <a>, then the <a> holds the title attribute. Otherwise, the object itself will hold the title attribute.
<span class="entity-name name obj" data-name="Entity Name"> <a href="#" title="Entity Name" class="entity-name---a">
To label a text bit through a class name, simply spell-out the text and suffix it with -text.
<span class="entity-copyright---txt copyright-text">Copyright</span>
In cases of names that are not commonly displayed—such as that of navigation—there’s no need for label and text bits.
<h2 class="entity-primary-nav-name nav-name name obj">Primary Navigation</h2>
The formal name of the component is found in its data-name attribute value while the friendly name can be the same or anything the designer sees fit.
<nav role="navigation" id="entity-primary-nav" class="entity-primary-nav entity-nav nav cp" data-name="Entity Primary Navigation">
<div class="entity-primary-nav---cr">
<h2 class="entity-primary-nav-name nav-name name obj" data-name="Entity Primary Navigation Name">Primary Navigation</h2>
Notice in the example above that the formal name is Entity Primary Navigation while the friendly name is Primary Navigation as seen in the name object.