Does there exist an HTML tag solely for the purpose of nominally grouping its children together? e.g.:

<group id="example_template">
  <h3>Example</h3>
  <div>...</div>
</group>

Ideally, the <group> tag above would be css-exempt, or not affect its children, or at least have no default visual side-effects. The idea is to find the cleanest way to identify a group of contiguous nodes without introducing semantically misleading or junky markup.

An example use case is for a JavaScript HTML templating system. After rendering a template and adding it to the DOM, I'd like to keep track of that fact that the group of elements were rendered together, in case the group should be replaced later.

Open to other solutions as well.

Does there exist an HTML tag solely for the purpose of nominally grouping its children together? e.g.:

<group id="example_template">
  <h3>Example</h3>
  <div>...</div>
</group>

Ideally, the <group> tag above would be css-exempt, or not affect its children, or at least have no default visual side-effects. The idea is to find the cleanest way to identify a group of contiguous nodes without introducing semantically misleading or junky markup.

An example use case is for a JavaScript HTML templating system. After rendering a template and adding it to the DOM, I'd like to keep track of that fact that the group of elements were rendered together, in case the group should be replaced later.

Open to other solutions as well.

• javascript
• css
• html

Share Follow asked Dec 11, 2013 at 1:37 calebdscalebds 26.2k99 gold badges5151 silver badges7575 bronze badges 8

• ummm, i think ur looking 4 css classes... – Math chiller Commented Dec 11, 2013 at 1:40
• 6 div and span tags have no semantic value. Use the former for blocks and the latter for inline content. – Fabrício Matté Commented Dec 11, 2013 at 1:40
• @tryingToGetProgrammingStraight pretty much, but I'd have to programmatically add the class to every top-level node in the group – calebds Commented Dec 11, 2013 at 1:42
• 2 "An example use case is for a JavaScript HTML templating system." - that makes sense (I've done the same thing, i.e. tracking elements in the DOM). Wrap it in something semantically meaningful (section, fieldset) if it is warranted, or just a div. A class name works as a simple indicator, but if you need to store more elaborate information, data-* attributes work well. Your JavaScript will need to set these attribute(s). If you don't want to alter the markup, you could maintain a structure like an array with references to all the added nodes for later tracking. – Tim M. Commented Dec 11, 2013 at 1:45
• 1 I think @TimMedora 's ment is a good one. One could add 2 things: elements can have multiple classnames (separated by a space), so if you set an extra classname (say 'template_generated') you could get them by getElementsByClassName('class'). Should you create all new elements via the dom, you could even link them in an array and reference them via this array later-on. var tmp=arr_track.push(document.create('someElement'); tmp.property='blabla'; //etc – GitaarLAB Commented Dec 11, 2013 at 1:59

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 4

A div element with no CSS does not produce anything that is visible on the page. This means that unless you add CSS, either as a file or inline, that modifies the DIV, it is effectively invisible.

Update: As noted above, DIVs are for blocking content and SPANs are for inline content

No and Yes. sadly, even a div element will have some visual implications, like in sizing calculation and it's being styled as "display: block" in browsers.

but, there is a css property called display: contents; that might do the trick for you. https://css-tricks./get-ready-for-display-contents/

check support for this css in browsers relevant to you.

In CSS3/HTML5 you can create any type of block element you like as long as you define its properties in CSS.

For example, here is one I called 'thingy';

thingy {
    display: block;
    background-color: blue;
    color: white;
}

<thingy>
    Here is a random block I created
</thingy>

Even without defining it in CSS it seems to work. It kind of derives from new generic element names (such as <section> (link)) which you can learn more about here towards the bottom, but I found it works for all sorts of random names too, but it's best to stick to convention. Up to you really. They're ultimately a glorified <div>.

I've never used them professionally, but I have in personal projects etc - so I'm not sure how the unconventional element names cooperate with screenreaders etc.