Is there a completely "layout-neutral" HTML container element?

Question

Sometimes I want to put a wrapper element around several other HTML elements with the sole purpose of setting up a convenient CSS selector to refer to all the contained elements:

<TAG id="just-a-handy-wrapper">
    <abc ...>
        ...
    </abc>
    ...
    <pqr ...>
        ...
    </pqr>
</TAG>

...and in the CSS:

#just-a-handy wrapper * {
    ...
}

I find this easier to manage and maintain than the alternative of assigning a common class to all the items captured by the #just-a-handy wrapper * selector above.

In this example, I've used fictitious tags <abc>, ..., <pqr>, etc., for the contained elements to stress the fact that I'm looking for a solution that works irrespective of the nature of the specific tags among the contents.

I've also used the fictitious tag TAG as a placeholder for the desired "wrapper tag", because my question is precisely about the best HTML tag to use for this purpose. By "best" I mean most "universal" in the types of elements it can contain in valid HTML5, and "most layout-neutral".

IOW, the ideal HTML tag would the one where the page including the code above would always be rendered exactly the same as one where the <tag ...> and </tag> lines were removed, or commented out:

<!-- <tag id="just-a-handy-wrapper"> -->
    <div ...>
        ...
    </div>
    ...
    <div ...>
        ...
    </div>
<!-- </tag> -->

A div, for example, is not "layout-neutral" (the browser will generally have strong ideas about how to layout a div), therefore it would not do to set tag equal to div. Here's a simple example of this:

• original
• with <div> wrapper around two of the three blue rectangles

Answer 1

Yes, there is a CSS for that supported by major browsers

display: contents

E.g. <section class="container"><div>Parent is virtually not rendered</div></section>

.container {
   display: contents;
}

Answer 2

Sorry, I fear there is no such tag.

Imaginge a scenario where your <abc> or <pqr> tags are block-level tags, say <p> tags. In order to fullfill your requirement (the layout should be the same, if the tag is there or not), the container tag would need to be a blocklevel tag to be w3c conform, and it should not have any default stylings. As far as I know, a <div> is exaclty that.

Now imaginge a scenario where your<abc> or <pqr> are inline tags like <i> or <b>. In order to fullfill your requirement the container tag would need to be a inline tag itself, otherwise it would break the line.

Now the thing is it is not possible for a tag to be inline- and block-level at the same time.

And to answer your question about the most universal tags: Use div as a container for block-level contents and use span as a container for inline contents. These tags are made for this purpose.

Answer 3

From the w3c Visual Formatting Model document:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously

In your fiddles, the lack of layout neutrality is demonstrated by the text-align: center; rule on the .outer element no longer applying to the .inner elements, once there was a wrapper element layered between them.

I know that you'd prefer to speak in generalities to stress your point about a layout neutral tag, but since all HTML elements must have a formatting context, there will always be a side-effect to adding more tags to the markup. (In this case, your <div> tag is a block.)

Most often there's no visual issue, but insofar as your layout depends on formatting contexts, adding more elements will always run counter to you having a layout-neutral tag.

I would echo @Mario A's answer that where you need to wrap a tag with something layout neutral, wrap block tags with <div>s, and inline tags, with spans, so as not to introduce new formatting contexts that could disrupt your layout.

Answer 4

<span> is layout neutral but it depends on which types of elements go within in, for example it cannot contain block elements like <div>. Whether an element renders as a block depends on the element, but can be specifying, for example <div style="display:inline-block"> or <div style="display:table-cell"> display differently.

Since it's a CSS question, you can use IDs on your elements to add extra CSS rules, or apply several different classes to one ID. EG

<div id="mydiv" class="blacktext">helloo</div>
<div class="blacktext class2">hello</div> <!-- apply class blacktext and class2-->

CSS

.class2 { background-color: #FF0000;}

References

[1] the <span> tag

• The tag is used to group inline-elements in a document.
• The tag provides no visual change by itself.
• The tag provides a way to add a hook to a part of a text or a part of a document.

[2] span vs div

Answer on stackoverflow about inline-block, block and inline with <span> and ` compared

Answer 5

There isn't such a tag, and there very well should be one.

Some tags like fieldset have behavior that affect child elements, but also do not require having any rendering. fieldset, when disabled, will disable all children input elements and is incredibly useful. However, you cannot wrap it around a <tr> specifically because it needs to be rendered.

Answer 6

I think the slot tag can be a good candidate for your requirements.