What is the cleanest way to group elements scattered throughout your HTML page?

Question

What is the cleanest way to group elements that will be scattered throughout a page (i.e. they cannot all be contained within a single fieldset or other container)?

1) Use the class attribute ... (or limit using this for CSS classes?)

<div id="region1">
    <p class="primary">stuff</p>
    <div class="secondary">stuff</div>
</div>
stuff
<div id="region2">
    <div class="secondary">stuff</div>
    <div class="primary">stuff</div>
</div>

2) Use a "group" attribute ... (or avoid non-standard attributes on the elements?)

<div id="region1">
    <p group="primary">stuff</p>
    <div group="secondary">stuff</div>
</div>
stuff
<div id="region2">
    <div group="secondary">stuff</div>
    <div group="primary">stuff</div>
</div>

3) Some other way ???

Answer 1

Class attributes, this allows you to use the class selector, in CSS.

Answer 2

Personally I prefer class statement, which is standard.

Answer 3

As far as you are not using css class name as data containers, they are fine. If you need to store meta data within your elements do it with javascript.

Answer 4

Class. Three reasons:

1) There's no observable semantic difference between 'group' and 'class'.

2) All browsers that can handle CSS can handle class selectors--not all can handle [group=whatever].

3) Typing [group=whatever] takes both more thought and more typing than .whatever.