3

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.

calebds
  • 25,670
  • 9
  • 46
  • 74
  • ummm, i think ur looking 4 css classes... – Math chiller Dec 11 '13 at 01:40
  • 6
    `div` and `span` tags have no semantic value. Use the former for blocks and the latter for inline content. – Fabrício Matté Dec 11 '13 at 01:40
  • @tryingToGetProgrammingStraight pretty much, but I'd have to programmatically add the class to every top-level node in the group – calebds Dec 11 '13 at 01:42
  • `
    ` but IE 8 and before have issues producing CSS.
     – StackSlave Dec 11 '13 at 01:42
  • @Fabricio and @jasonscript are correct. But there are a few other elements you could use, too: in HTML5, `section` could work. For groups of fields, `fieldset`. As long as your CSS removes any default margin, border and padding, they won't have any visual effect. Combined with an ID or class name, you can identify the ones that were injected into your document. – Val Dec 11 '13 at 01:45
  • 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. Dec 11 '13 at 01:45
  • @Val I believe `section` had some kind of semantic value (sectioning content?), while `div`/`span` are pretty much specific to styling/behavior hooks. – Fabrício Matté Dec 11 '13 at 01:51
  • 1
    I think @TimMedora 's comment 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 Dec 11 '13 at 01:59

3 Answers3

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

jasonscript
  • 6,039
  • 3
  • 28
  • 43
  • A div acts as a block level element introducing a line break at the end though doesn't it. I would use a span if you didn't want a block level element. – Matthew Lock Dec 11 '13 at 01:42
  • @MatthewLock content could be either blocking or inline -- what are side-effects of wrapping block level content in a ? – calebds Dec 11 '13 at 01:46
  • @paislee Blocking content just means that it gets a new line after the element. Even this can be eliminated by setting the display property: `display:inline` – jasonscript Dec 11 '13 at 01:52
  • @paislee The effects are that you have invalid HTML then. – Fabrício Matté Dec 11 '13 at 01:52
  • 1
    inline elements can only contain inline elements, no blocklevel elements. yet blocklevel elements can contain both block and inline elements. – GitaarLAB Dec 11 '13 at 01:55
  • So essentially the answer is "no", because `div` and `span` each have visual implications (block and inline, respectively).. there is no tag that won't interfere with layout or HTML validity when wrapped around arbitrary content? – calebds Dec 13 '13 at 19:27
  • I think a `div` is as close as you're going to get. You might be able to use `float` and `z-index` css properties as well. HTML is about presenting content so elements are designed to appear and interact with each other – jasonscript Dec 16 '13 at 01:31
4

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.com/get-ready-for-display-contents/

check support for this css in browsers relevant to you.

Moby Disk
  • 3,761
  • 1
  • 19
  • 38
Adi Zarfaty
  • 63
  • 7
-1

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.

Dexterians
  • 1,011
  • 1
  • 5
  • 12
  • HTML requires custom elements to have a dash in their name, second the OP was asking for an element that would not have any implication on layout. With custom elements, you must still decide a property for display. The `display:contents` might be a solution, see https://stackoverflow.com/questions/32543378/is-there-a-completely-layout-neutral-html-container-element – Antoine Weber Jun 19 '23 at 20:52