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

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

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;
}

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.

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.

<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

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.

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

Related

Blank HTML tags

Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that

Inner difference Between Span & Div Tags [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?
I'd like to know the difference between using <span> and <div> when writing a one line text other than the div is a block styling container while a span doesn't leave a space after it.
Is there something related to text-overflow that we should use span for it ?
I'm searching for other differences but I can't find.
From a styling perspective, <span> defaults to display: inline and <div> defaults to display: block. There are no other CSS differences.
(They have different rules for what elements may be contained by them, and what elements may contain them, but that is unrelated to CSS).
Per Wikipedia:
There is one difference between div and span. In standard HTML, a div
is a block-level element whereas a span is an inline element. The div
block visually isolates a section of a document on the page, in the
same way as a paragraph. The span element contains a piece of
information inline with the surrounding text. In practice, even this
feature can be changed by the use of Cascading Style Sheets (CSS).
Sorry to burst your bubble looking for something more special.
Well, the block level vs. inline level property of these elements is the major difference between the two.
What you should consider is what else besides text is going to be in each. It's perfectly valid to put inline elements as well as other block elements in a block element, however it is only valid to put other inline elements in inline elements.
More reading here: http://www.w3resource.com/html/HTML-block-level-and-inline-elements.php
As far as which to use for writing a "one line text", I would probably use neither. A paragraph, or <p>, tag seems best suited for that. Semantically, a paragraph tag is used to display a paragraph of text, whereas a <div> is semantically used to display a block of something... paragraphs, lists, images, forms, etc. Meanwhile, a <span> is semantically used to display something that doesn't quite fit into another element. Maybe you have a paragraph and want to apply some special formatting to just one part of a sentence, for example... a <span> would be a good way to do that.
<span> has no block properties, thus there is no line break at the end, whereas a unmodified(default block element) <div> tag is a block element and will include a line break at the end of the div tag.
http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/tags/tag_span.asp

Difference between div and span

What is the difference between div with the property display:inline-block and span with display:inline-block?
There is two differences between div and span elements:
The div has display:block as default, while span has display:inline as default.
The div is a block element, and can contain block elements and inline elements, while span is an inline element and can only contain other inline elements.
Once you have applied the display:inline-block they behave the same.
When the HTML code is parsed, the style is not considered. While you can change the display style to make the elements behave the same, you still have to follow the rules in the HTML code.
This for example is valid:
<div>
<div>
<span></span>
</div>
<span></span>
</div>
This for example is invalid:
<span>
<div>
<span></span>
</div>
<div></div>
</span>
The browser will try to rearrange the elements in the invalid code, which usually means that it moves the div elements outside the span elements. As the HTML specification (prior to version 5) only told how correct code should be handled, each browser has its own way of dealing with incorrect code.
Just wanted to add some historical context to how there came to be span vs div
History of span:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text
container tag for applying styles to certain blocks of text.
The rendering is neutral except if used in conjunction of a
stylesheet. There is a debate around versus about
readability, meaning. Bert Bos is mentioning the extensibility nature
of the element through the class attribute (with values such as
city, person, date, etc.). Paul Prescod is worried that both elements
will be abused. He is opposed to text mentioning that "any new
element should be on an old one" and adding "If we create a tag with
no semantics it can be used anywhere without ever being wrong. We
must force authors to properly tag the semantics of their document. We
must force editor vendors to make that choice explicit in their
interfaces."
- Source (w3 wiki)
From the RFC draft that introduces span:
First, a generic
container is needed to carry the LANG and BIDI attributes in
cases where no other element is appropriate; the SPAN
element is introduced for that purpose.
- Source (IETF Draft)
History of div:
CENTER was introduced by Netscape before they added support for the
HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its
widespread deployment.
HTML 3.2 Spec
In a nutshell, both elements arose out of a need for a more generic container that didn't have attached semantics. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
The difference between < div > and < span > si that < span > doesn't have any default styling, where < div > has a paragraph break.
Hence both tags are extremely similar, applying the css property display:inline-block will have a similar effect, but combined with the vertical-align can have a different effect.
Have a look at this link: http://www.brunildo.org/test/inline-block.html

HTML: What exactly is <span>'s purpose?

I've read many explanations of what the actual purpose of the < span > tag is, and I've tried to incorperate those explanations into real applications but have failed every time.
One person told me that it was to apply classes to sub-tags below it, which does kind of work, except it doesn't apply dimensions to elements, unless you mess around with the display and/or inline settings, which can totally screw up a layout.
Then someone else told me that it's use as a substitute for the < div > tag, which doesn't work because floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
Then someone else told me that it's used as a text container, which doesn't work because the "text-align" attribute doesn't work, again, unless contained inside certain types of elements. A default-attribute-cleared < p > tag is much more suited, in my experience.
So what exactly is the point of them? Why are so many people using them when < div > seems to do everything that they're apparently capable of and more?
From Official Docs:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to
documents. These elements define content to be inline (SPAN) or
block-level (DIV) but impose no other presentational idioms on the
content. Thus, authors may use these elements in conjunction with
style sheets, the lang attribute, etc., to tailor HTML to their own
needs and tastes.
As it says, you can use <span> tag to structure (inline) the sections of page along with styling which you may optionally pass via id, class or stylesheets.
Characteristics of <span> tag:
It's display is inline by default which means:
you can not apply width to it
you can not apply height to it
you can make it block-level too by using display:block (div serves the same purpose)
The <div> tag is opposite to that and you can apply above rules to it.
It is an inline element with no attached semantics that can be used to wrap some inline content for
the application of JavaScript (e.g. event handlers or moving about the DOM)
the application of CSS
use with the lang attribute
processing by custom tools
… when no element with more appropriate semantics exists.
floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
They work (or otherwise) based mostly on the display value, not the element type.
Why are so many people using them when <div> seems to do everything that they're apparently capable of and more?
A div is identical to a span except it:
Can contain block elements
Cannot (error recovery not withstanding) be contained by an inline element (or any other element that can contain only inline content, such as a <p>)
Is display: block by default (instead of inline)
When the text is in a <span> element you can add styles to the content, or manipulate the content.

HTML 'container' tags - proper usage?

For some time I've been making websites, but have never really seen discussion of the proper usage of the container tags. I've seen any number of different types of content in the collection tags, but it usually seems that the page creator just picks a style they like and sticks with it.
The main discrepancy in my mind is that between
<p>
<div>
but I'd also like opinions regarding
<span>
and any others I may be forgetting.
HTML was originally created to put the content of documents into some sort of structure understandable to computers. With that in mind, the p tag is supposed to hold anything that would be structured as a paragraph if the content of the page were to be turned into a printed document. The div and span elements are reserved as general-use containers to facilitate formating and grouping of related elements to provide additional levels of structure, perhaps correlating to pages in a text document.
In some cases, p tags should contain other elements, such as anchor (a), image (img) and other in-line elements, because they relate directly to the content of the rest of the paragraph and it makes sense to group them that way, or the text of the rest of the paragraph provides a more in-depth description.
If there is not additional description of those elements, however, it does not make sense to place them in a paragraph simply as a convenient container; a div would be more appropriate. In general, a paragraph is supposed to contain one paragraph of text and any directly related or described elements. Nothing else makes much sense in a paragraph.
UPDATE: HTML5 also adds a number of other semantic "container" elements, including article, nav, header, section, and aside.
I think, the meaning of the tags is something like this:
<p>Paragraph, usually just text</p>
<div>A block, containing anything</div>
<span>Just a simple non-blocking wrapper</span>
The difference between these three (and many other) tags is their semantic meaning. The HTML standard includes both tags with specific semantic meanings (<p> for paragraphs, <em> for emphasized text, etc.) and tags without semantic meaning.
The latter are <div> and <span>, which are used to identify block- or inline-level content which needs to be identified (using, say a class= or id= attribute), but for which a semantically-specific tag does not exist. For example, one may write <p>Hi, my name is <span class="name">John Doe</span>.</p> — indicating that it's a paragraph (which the browser already has an idea how to handle) and that part of it's content is a name (which means absolutely nothing to the browser unless CSS or JavaScript uses it).
These tags are therefore incredibly useful both in adding additional information to an HTML document which doesn't fit within the semantic tags supplied by the standard (see the hCard specification for an excellent example) and for applying visual (CSS) or functional (JavaScript) structure to a document without altering its semantics.
I think page creators should use semantic markup, meaning that the markup they create should communicate meaning (and not presentation). <div> and <p> have different meanings. The former is used to define a division (or section) of an HTML page, the latter to define a paragraph of text.
<p> is a block-level element that should contain a paragraph, comprised of text, inline elements that modify that text (<p>, <a>, <abbr>, etc.), and images.
<div> is a block-level element used to divide the page, almost always in conjunction with CSS styles.
<span>... well, I honestly don't use this tag that often. It's an inline element, and I use it usually when I'd like to apply styles to a portion of text that wouldn't benefit from using something with more meaning, like the <strong> and <em> tags.
I was tought to view <span> and <div> as the "tofu of webdeveloppement", since it has no real flavor but you can do virtually anything with it.
(X)HTML tags define what the text they're surrounding is. Is it and address, is it a link, is it a paragraph, and so on...
<div> and <span> are simply ways of getting to pieces of your site you normally can't get to. Like when you're trying to resize a | symbol. Fastest way I've ever found was to put a span around it, give it a class and then implement the CSS.
That's what they're good for, in my opinion. I'd be interested to hear more or even corrections on what I've written here.
It sounds like you need to read the HTML specification
The p element:
The p element represents a paragraph.
The div element:
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
The span element:
The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.
The major difference between div and span is that span is flow content, phrasing content, and palpable content, while a div is only flow content and palpable content.
Essentially this boils down to:
div elements are block-level elements, and typically may only be placed within other block-level elements, whereas span elements are inline elements, and may be placed within most other elements.
The HTML spec defines which elements are acceptable as descendents of each element.