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
Related
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.
I am making a website with personal articles. The body of my articles is a basic div containing paragraphs, but recently I found it useful to use some span's out of the paragraphs to manage my content as desired, hence in the div's.
As the web semantic becomes an important role and becomes more and more well constrained, I was curious of the downsides of such a practice.
I am not too familiar with the standards of HTML yet. However, I was thinking using span's in div's is semantically not clean.
Is the Googlebot going to soil the referencing on that?
There is nothing wrong with using a span element inside of a div element. It is absolutely valid. It will have no negative impact on search engine optimization.
div elements are block elements and span elements are inline elements. Inline elements can be placed inside of block elements. The opposite is what you want to avoid: Do not put div elements inside span elements.
It’s fine if no other text-level element is appropriate in your case.
You can check their purposes in the usage summary: Does it represent a hyperlink, stress emphasis, importance, a side comment, …? If the answer is no to all candidates, go with "Other", i.e., the span element.
div and span elements don’t represent anything, they are meaningless elements to be used in cases where no other element is appropriate. So adding/removing div/span elements would never change the semantics of the document (unless meaningful attributes, like lang, were used).
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.
Here is the story: I'm using SWFObject to insert a Flash object into my page. The embedding eats my span. So, I lose all my CSS for it. I was thinking of moving all of the CSS to the parent so I don't lose my CSS styles when the Flash appears.
I have tried using a span within a span, but I don't think it's working. Is there a reason for this? I don't understand why you could have div within a div but not a span within a span.
Does it have to do with spans being inline?
HTML4 specification states that:
Inline elements may contain only data and other inline elements
Span is an inline element, therefore having span inside span is valid.
There's a related question: Can <span> tags have any type of tags inside them? which makes it completely clear.
HTML5 specification (including the most current draft of HTML 5.3 dated November 16, 2017) changes terminology, but it's still perfectly valid to place span inside another span.
Yes. You can have a span within a span. Your problem stems from something else.
For an example
Is <h1>Heading</h1> valid in HTML5?
yes what you've written is valid in HTML5, but it's not all inline elements, I think it's just <a> 's it applies to..
Reference: “Block-level” links in HTML5
Tip: if using this set the <a> to display: block; or there may be unintended visual styling results : Source: Test Case
Update:
It is "disallowed" for other "block in inline" combinations where "default styles are likely to lead to confusion" - explanation is here:
Cases where the default styles are likely to lead to confusion
Certain elements have default styles
or behaviors that make certain
combinations likely to lead to
confusion. Where these have equivalent
alternatives without this problem, the
confusing combinations are disallowed.
For example, div elements are rendered
as block boxes, and span elements as
inline boxes. Putting a block box in
an inline box is unnecessarily
confusing; since either nesting just
div elements, or nesting just span
elements, or nesting span elements
inside div elements all serve the same
purpose as nesting a div element in
a span element, but only the latter
involves a block box in an inline box,
the latter combination is disallowed.