Question

What valid HTML5-tag do you suggest, to combine one or more elements into a group?

Example:

  <!-- Not valid, see below - just ignore -->
    <ul>
      <li>Test1<li>
      <group id="2"><li>Test 2</li></group>
      <li>Test2<li>
      <li>Test3<li>
    </ul>
 <!-- // -->

  <p>Test Text 1 <group id="3">Lorem ipsum dolor</group></p>

</body>
</html>

Javascript (with DOM-Utility):

console.log($('group#2'));

Answer 1

It depends on the context. Here is the spec for all grouping elements of block level (or I like this visualization). You want something that fits semantically. For example, if you have an article, you’ll want to use the <article> tag. If you are defining a section of the page, use a <section>. If you are grouping headers, use <hgroup>. If you are doing x, use x tag.

The list goes on and on and on. Find the appropriate element for the context. But do note, older browsers won’t know how to handle the elements, so you’ll need to be aware of that in how you style and how you use JavaScript to query the elements.