CODEWITHSUNDEEP
javascriptcsshtml
calebds
calebds

Reputation: 26228

Is there a non-visual HTML tag?

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.

Upvotes: 3

Views: 3151

Answers (3)

Dexterians
Dexterians

Reputation: 1021

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.

Upvotes: -1

Adi Zarfaty
Adi Zarfaty

Reputation: 63

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.

Upvotes: 4

jasonscript
jasonscript

Reputation: 6170

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

Upvotes: 4

Related Questions