Is there any logical container tag in HTMl that I can use for grouping?

问题

I need something not visible in page, something that don't have any borders and something that doesn't affect page rendering at all. I need this for a mass hiding or showing things inside, like document.getElementById("asd").innerHTML = "blah bla blah and some buttons and etc";

I want it's tag borders to not be shown on the page or changed the rendering at all.

For example, I want the rendered result to be same for:

<div>
    asd
    <input type = "button" value = "dsa" />
    <table>
        <tr>
            <td>zxc</td>
        </tr>
    </table>
    qwe
</div>

and:

<div>
    asd
    <something id = "asd">
        <input type = "button" value = "dsa" />
        <table>
            <tr>
                <td>zxc</td>
            </tr>
        </table>
    </something>
    qwe
</div>

The div is bad, because it have a borders and renders from new line in html page.

<html>
    <head>
        <title>asd</title>

    </head>
    <body>
        asd<div id = "test_div" style = "display: none;">dsa</div>
    </body>
</html>

dsa also became invisible

回答1:

My interpretation of the question: You would like to use an HTML element, inside the body element, so that it can include various elements, including block elements like tables, so that the page is rendered as if the element’s start and end tag were not there. That is, as if the element were replaced by its content. In particular, it should not cause any line break.

There is no such element in HTML. What come closest are ins and del. They might come close enough, as their only default effect on rendering is that text content is underlined or overstruck, respectively (browsers implement this inconsistently for text inside block elements), and these effects are easily cancelled out, with the usual CSS caveats:

ins, del { text-decoration: none; }

The reason why this works (and is valid HTML) is that these elements have “transparent content model”. E.g., an ins element may contain anything that would be allowed in the context where the element appears.

Whether it is logical to use such elements is debatable, but in fact, ins (for inserted content) might even be regarded as logical to use, depending on what you are doing.

Beware that some user agents or assistive software may (at least in future) implement these elements in a manner that reflects their defined meaning. For example, a speech browser might speak “inserted text” and “end of inserted text” before and after an ins element.

To some extent, the a element (without any attributes) could be used largely the same way (it, too, has transparent content model in browser practice and in HTML5 CR), but it has some restrictions that make that approach questionable. In particular, by the syntax rules, an a element must not contain another a element or other “interactive content” like input.

回答2:

Check out <data> or <span> tags

EDIT: Alternatively, though it won't constitute valid html, you could come up with your own tags like <my group> that you can use to group your elements without any automatic formatting by the browser.

来源：https://stackoverflow.com/questions/21086901/is-there-any-logical-container-tag-in-html-that-i-can-use-for-grouping

标签

html

containers