Best IT Recipes

Entering a <span> block level element inside a <p> element

I know that <p> should be used specifically with inline elements. But what if you change an inline element of type <span> to an element of a block level using { display:block } and save it inside <p> ?

t

 <html> <head> <style> p { background: red; height: 100px; width: 100px; } p span { display: block; background: blue; height: 50px; width: 50px; } </style> </head> <body> <p> <span>I am a pizza</span> </p> </body> </html>

Is this simply wrong in every sense of the word? I know this is not common (i.e. most asked why I didn’t just use the div), but this is a hypothetical situation. It passes validation checks, but is it careless, like any HAP / bad practice? Would you scoff if you read this code?

+1
html block inline paragraph
Sep 21 '13 at 8:15
source share
2 answers

This is HTML5 valid and not so bad in certain situations, for example.

 <p> This is some text <span class="highlight">I am a pizza</span> and this is some more text... </p> .highlight { background: yellow; }
-four
Sep 21 '13 at 8:18
source share
Element

A span always a text / inline / phrase element in HTML, and HTML syntax rules that restrict the contents of a p element to such elements apply only to HTML. Therefore, they are independent of the CSS settings that can span block element in the sense of CSS (rendering).

In CSS, you can assign any specific value to the display property, regardless of what this element is. CSS does not know the meaning of elements defined in HTML or other markup language specifications.

Thus, there are no formal objections.

Whether it is a good style or otherwise acceptable is more difficult. There are no statements about this in the specification, but it’s reasonable to say that you should not change the basic elements of rendering elements in vain. For example, under normal circumstances, you should not use a span , and then say display: block in CSS when there is a more logical approach to using a div . One reason for this principle is that it keeps your document in top shape in non-CSS situations, or when all or some of your style sheets are not applied.

On the other hand, you do not change the display in vain if you have a text paragraph and you want to display part of your content as a block, for example. as centered or indented, possibly with a background color that extends over the available width. You cannot use a div inside p , so more natural markup is not available.

Since the example is not real, it is impossible to say whether to use this approach in your case.

+6
Sep 21 '13 at 13:30
source share


More articles:


All Articles