如何在一个内联元素中放置一个块级元素？

Question

In part of my code I put <DIV> element inside <SPAN> . With CSS customisation it works without problem, but page is not passing W3 validation.

Code looks like this:

<span class="spanclass">
    <div class="divclass">Content</div>
</span>

After validation I got this error:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as " <p> " or " <table> ") inside an inline element (such as " <a> " <span> ", or " <font> ").

I know this can be fixed easy if I'll put <div> instead of <span> , but I'm interested in another solution:

How to force validator with DTD declaration, to allow block-level element in inline element?

Answer 1

You already know that it's invalid HTML. So, to conform to the standard practice and still achieve what you want reuse your spanclass CSS to define a new CSS class as

spanclass, divlikespanclass {
  /* span css data */
}

and change your HTML to

<div class="divlikespanclass">
    <div class="divclass">Content</div>
</div>

or, simply

<div class="divclass divlikespanclass">Content</div>

EDIT : (in response to OP's comments; not recommended though)

Re-declare <SPAN> as

<!ELEMENT SPAN - - ((%inline;) | DIV)*  -- generic language/style container -->

or, to apply to all inline elements change

<!ENTITY % inline "#PCDATA | DIV | %fontstyle; | %phrase; | %special; | %formctrl;">

Answer 2

You can't (or shouldn't) since it's against spec.

A span can only hold "phrasing content". Basically this comes down to: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> or plain text . See https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content for more info

Answer 3

You (and most of the answers here) appear to be conflating three quite distinct concepts: validity, validity against the HTML (or XHTML) DTD, and conformance to the HTML (or XHTML) specification.

• A document is valid against a particular DTD if and only if it conforms to the rules expressed in that DTD.

  You can make any document valid (in some absolute sense) by supplying a DTD against which the document is valid. This allows the data to pass mindless and meaningless tests which require that XML be valid at some particular point in its life cycle, without specifying what schema it is to be valid against. (You sound as if you are seeking to make the data pass such a test, though it's not clear whether this mindless and meaningless test has been imposed on you by others or by you.)

  Concretely, you can cause a generic XML validator to report that your input is valid by telling the validator to use an appropriate DTD (or other schema). If you make a modified version of the XHTML DTD, and point to it from your document, the document you describe can easily be reported as valid against that DTD. (This will not necessarily work with the W3C validation service for HTML, because that service is not a generic DTD-based validator and it uses special rules for HTML input.)

• A document is valid against (a given flavor of) the (X)HTML DTD if and only if it conforms to the rules expressed in that (flavor of that) DTD.

  You cannot cause an HTML document which embeds div elements inside span elements to be valid against that DTD, because as it is defined that DTD forbids such embeddings. Modifying the DTD to make it accept such embeddings has the natural result of producing a new and different DTD, which is no longer the (X)HTML DTD.

• A document conforms to the (X)HTML spec if and only if it meets the conformance requirements for documents laid out in that specification.

  It is unlikely that you can cause a document which embeds div elements within span elements to be regarded as conformant. A conclusive demonstration would require a lot more time with the HTML spec than I am inclined to spend this morning.