Structural Classes are classes that denote hierarchy in HTML tags particularly in div tags.
Example: Structure of a Component
[html]
<div class="comp">
<div class="cr">
<h class="accessible-name"></h>
<div class="ct">
Content
</div>
</div>
</div>
[/html]
Please note that h denotes a heading tag that varies from 1 to 6 depending on the HTML 4 outline.
The Structural Classes in this example are the following:
comp(component)cr(container)accessible-name(heading or official name)ct(content).
Maximum Number of Classes
While building the structure, we will put generic and specific class names into each area. The suggested maximum number of classes to add into a single div is two (2).
The first class to be added is the generic class – which is basically, what the component is. The second class – if available – is the category it belongs to – which will become the specific class – this is usually inherited from its parent.
Example of Generic Class
In this example, we’ll use the Author Component.
The Author Component is part of an article byline wherein the name of the author is indicated (along with the date the article was published).
Name of component (generic class): Author
Category of component (specific class): Article Entry
Using this information, we can plot the classes into the structure.
[html]
<div class="comp author_comp article-entry-author_comp">
<div class="cr author_cr article-entry-author_cr">
<h class="accessible-name"></h>
<div class="ct author_ct article-entry-author_ct">
Content
</div>
</div>
</div><!– article-entry-author_comp –>
[/html]
This structure now features the following:
- a generic class (author_comp) which will be used in any instance of author in the HTML document
- specific class (article-entry-author_comp) which could be used to directly select the component (e.g., for use in CSS)
Other Guidelines
The objects inside ct (content) could simply have their generic classes – just like with the heading tag which only has accessible-name as its class.
