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

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 ???

Answers


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.


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


Personally I prefer class statement, which is standard.


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.


Need Your Help

how to test for existing htm5shiv in source code using rspec?

ruby-on-rails-3 unit-testing rspec2

how can I test rails3 application for existing htm5shiv code using rspec?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.