CKEditor Modifying Span Tags

Overview

The CKEditor is modifying the position and number of span tags when content is saved. This does not occur using the basic HTML editor, only the advanced editor.

Solution

This behavior may be functioning as intended, if the HTML content is not W3C complaint. For example, if the code has a <p> element nested within a <span> this is not allowed. The HTML tag <p>...</p> is a block-level tag for Flow content and while a <span>...</span> tag is an inline tag for Phrasing content.

As per the latest HTML specification, a <p>...</p> tag is not allowed to be inside a <span>...</span> tag (vice-versa is allowed), and CKEditor is correcting the HTML to conform with the specification. For a detailed technical description of the HTML Content types and which tags belong to which category, please have a look at the article about HTML Content categories on the Mozilla Developer Network or the HTML Standard document.

The solution is to either remove the <span> tags highlighted in the HTML above from the code or replacing them with <div> tags that are block-level tags. Please note that the HTML Editor in DNN is a WYSIWYG, "What You See Is What You Get" editor, and therefore we suggest leveraging this feature to edit content instead of pasting HTML into the editor.