H2 inside SPAN - browser-compatible?

Question

First of all, I've seen this question IE Compatibility issue, but I have a slightly different issue:

I have a span with display: block and I want to put a H2 tag inside it. Will this look good in every (major) browser?

The answer on the previously stated link, was to make the H2 display:inline, which I don't want, and also I don't want to replace the span with a div, because I would have to change a lot of CSS.

PS. I don't want my HTML to validate (using the validator), I just want it to work.

When you stray from standards there's no guarantees about what results you'll get — John Conde, Apr 26 '12 at 11:31
why you love `span` that much :o ctrl+find all `your loving span`replace with `our lovely div` — Jack, Apr 26 '12 at 11:39

score 5 · Answer 1 · answered Apr 26 '12 at 11:36

When you say "I don't want my HTML to validate (using the validator), I just want it to work." You're making a very big mistake. If HTML doesn't validate, there's no telling what might happen. The standards are there for a reason.

Replace the span with a div, you don't need display block on the div as it has this by default. A span is an inline level element, whereas an H2 is block level. An inline element cannot contain a block level element (true up to HTML5, where you can wrap block level elements in anchors)

This will validate, and will work!

score 2 · Accepted Answer · answered Apr 26 '12 at 12:02

It works on current browsers (including old versions), and it is unlikely that this will change. Errors like this are common enough to make it rather pointless to browser vendors to change their error recovery mechanisms. HTML5 is about to make the error recovery rules mandatory.

On the other hand, what is the point of using span with display: block, instead of using div? And CSS should be written so that it does not depend on specific choices of markup elements where different choices could make sense; for example, as a rule, .foo is a better selector than span.foo.

Any extensive change to markup or style sheets has a nonnegligible risk of causing problems even when the change is a such an improvement and a simple one. (For example, a global search and replace often does too much, or misses something.) This could be a reason for continuing the use of invalid markup, in cases where it has minimal risk in practice.

I know what I did was not good practice, but I didn't want to change the HTML and CSS for 1 simple thing as long as it wasn't necessary, because I didn't write the original HTML and CSS, so didn't want to mess anything up. Thanks! — Eduard Luca, Apr 26 '12 at 13:39

score 0 · Answer 3 · answered Apr 26 '12 at 11:40

0

we can solve IE second line problem first

h2{}
h2 span{ float:right;}

Correct way in all browsers

<h2><span>sub content</span>  Heading</h2>

wrong way ie browser

<h2>Heading<span>sub content</span></h2>

answered Apr 26 '12 at 11:40

ShibinRagh

6,530
4
35
57

H2 inside SPAN - browser-compatible?

3 Answers3