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.
Related
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).
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can a span be closed using <span />?
<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p>
<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>
http://jsfiddle.net/T7ByE/
The first line embeds a span with a regular closing tag, while the second uses a self-closing tag. The first line works properly, while the second has a bizarre result.
I'm just curious why there is such a difference in the handling of the element in each case. I'm aware that under non-strict xhtml, self-closing tags aren't very well supported. It appears the self-closing tag is being treated as just an open tag.
Is there a good reason modern browsers still don't support self-closing html tags? Am I expected to change the doctype or something to get this to work?
The irony is I actually started with an explicit closing tag, but ran it through the browser's xml parser and back to html, and the parser felt like collapsing the empty element into a self-closing tag, which promptly broke everything.
Is there a good reason modern browsers still don't support self-closing html tags?
Backwards compatibility.
Am I expected to change the doctype or something to get this to work?
You want to use XML, you need to send your document as XML (application/xhtml+xml, to be specific). This has mainly to do with the MIME type, not the doctype. Of course, there's no way to make it work in IE <9.
Web-browsers have DOM inspectors which show us the structure of the resulting DOM tree. For instance, in Firebug:
As you can see, Firefox doesn't recognize the self-closing tag, but treats it like a start-tag instead. Firefox will close that SPAN element automatically when it reaches the end of the paragraph, meaning that the SPAN will contain the remaining text of the paragraph.
Now, since you're inserting a DIV element into the SPAN element, the DIV will be laid out below the text-content of that SPAN element. This is because the DIV element is a block-level element. Block-level elements that appear after text-content, are laid out below that text-content.
When you self enclose a tag like span, as far as I can imagine***, you're not actually self enclosing it - those tags don't have that ability. What you're actually doing is leaving it open. And when you leave stuff open, the browser takes a liberty, and closes them itself, usually, at the end of their parent's closing tag.
So in your example, in case nº2, you get an inline-block that goes all the way until the end of the p element. Now, inside that inline-block you're appending a block level element. Well, this time and again... by putting a block inside an inline (inline-block) the browser takes another one of its liberties and (basically) puts all the content surrounding the block element in as many block level elements as it needs to (that's 1 or two - no more).
In your case you get one "anonymous" block around the text preceding the inserted div ("to see if I can embed an inline-block.").
Since blocks stack vertically, it's no surprise, then, the appearance you get on the second paragraph.
See a colored fiddle at: jsfiddle.net/T7ByE/1/ (not clickable) to see it better.
Relevant Links
display:block inside display:inline
***it kind'a seems that depending on your content type spans can actually be self enclosing*
So you've tried to center the <small> HTML element with the CSS property text-align: center (or right) and it doesn't work?
Well, that could be because your HTML/CSS looks something like this. There's an easy CSS solution...
If you set a small { display: block } property like this then it works like a charm:
Horay!
But you can probably tell something's not right... and why does it work anyway?
Well, <small> is basically an inline element and the text-align property is to be applied to block elements and passed down to child inline elements (or strings inside).
By making small into a block element we are allowing the text inside it to be styled.
Also, the W3 spec defines the <small> element to be used inside a phrasing context — similarly to elements like <strong>, <b>, <span>, <a>, and so on — which would do the same thing in this case.
W3 wiki examples suggest to put the <small> inside <p> tags and style that — I guess that's the more semantic solution, and here's the code if you need to see it.
Why is this a bit confusing?
Well, some 3rd party resources on the web don't mention it, or at least not explicitly. For example, the HTML5 Doctor's example uses the small element without a block element container around it.
Hope that clarifies things! As always, please let me know if I missed anything. (And I think I did.)
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
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