Here are some guidelines in composing HTML attributes:
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
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
<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
<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:
If an object has a nested
<a>, then the
<a> holds the
title attribute. Otherwise, the object itself will hold the
<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
<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
<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