{"id":573,"date":"2026-10-27T14:00:04","date_gmt":"2026-10-27T14:00:04","guid":{"rendered":"https:\/\/html-editor-online.com\/blog?p=573"},"modified":"2026-10-27T14:00:04","modified_gmt":"2026-10-27T14:00:04","slug":"wysiwyg-source-view-removes-class-and-id-attributes","status":"publish","type":"post","link":"https:\/\/html-editor-online.com\/blog\/wysiwyg-source-view-removes-class-and-id-attributes\/","title":{"rendered":"WYSIWYG Source View Removes Class and ID Attributes: Why and What to Do"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If the <strong>WYSIWYG source view removes class and ID attributes<\/strong> after you apply your edits, the cause is the round trip, not a mistake in your HTML. Source is not a lossless HTML round trip when changes are applied to this visual editor. Your markup is sent back through the Quill-based editor, which rebuilds its own HTML from the content it understands. Text and supported formatting survive, while arbitrary <code>class<\/code> and <code>id<\/code> attributes often do not. This article shows a small before-and-after example, a way to check what changed, and when to edit the markup in a code editor instead. The input is an HTML fragment with custom attributes, the output is whatever the visual editor serializes, and the relevant tool is the <a href=\"https:\/\/html-editor-online.com\/\" title=\"WYSIWYG HTML Editor\">Quill-based WYSIWYG HTML Editor on the homepage<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#why-the-wysiwyg-source-view-removes-class-and-id-attributes-1\">Why the WYSIWYG source view removes class and ID attributes<\/a><\/li><li class=\"\"><a href=\"#a-before-and-after-example-2\">A before and after example<\/a><\/li><li class=\"\"><a href=\"#valid-html-versus-what-the-visual-editor-preserves-3\">Valid HTML versus what the visual editor preserves<\/a><\/li><li class=\"\"><a href=\"#check-what-changed-before-you-publish-4\">Check what changed before you publish<\/a><\/li><li class=\"\"><a href=\"#what-to-do-when-the-wysiwyg-source-view-removes-class-and-id-attributes-5\">What to do when the WYSIWYG source view removes class and ID attributes<\/a><\/li><li class=\"\"><a href=\"#limits-to-keep-in-mind-6\">Limits to keep in mind<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-1-570-1-a20472c90fe29f47-1024x576.jpg\" alt=\"Illustration of a document passing through a filter that leaves custom tags behind, representing why the WYSIWYG source view removes class and ID attributes\" class=\"wp-image-613\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-1-570-1-a20472c90fe29f47-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-1-570-1-a20472c90fe29f47-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-1-570-1-a20472c90fe29f47-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-1-570-1-a20472c90fe29f47.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"why-the-wysiwyg-source-view-removes-class-and-id-attributes-1\">Why the WYSIWYG source view removes class and ID attributes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The homepage editor is built on Quill. When you edit the HTML in Source and apply it, your markup is treated as incoming content, interpreted by the editor, and then written back out in the editor&#8217;s own form. Whatever the editor cannot represent is left behind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quill&#8217;s documentation for its Clipboard module describes this in general terms: incoming HTML is interpreted as editor content, and the resulting HTML may not exactly match the input. Quill represents content through a document model of supported formats such as headers, lists, links, bold and italic. Arbitrary class names and IDs are not among its listed built-in formats, so an attribute that does not map to a supported format has nowhere to live in that model. That is the practical reason Quill removes the class attribute on your custom elements when you apply Source changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It also tells you what the problem is not. It is not invalid HTML, because <code>class<\/code> and <code>id<\/code> are legitimate attributes in the WHATWG HTML Living Standard. It is not the browser stripping your CSS, and it is not a failed save. The text stays and the attributes are dropped during conversion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quill can be customized with additional formats, but I cannot confirm that this site&#8217;s editor registers any for arbitrary class or ID values, and I cannot see which Quill version is installed. The Source-to-Quill step comes from how the site&#8217;s editor is described, not from a public implementation write-up, so treat the example below as illustrative and test your own markup. This reflects what I could confirm as of October 25, 2026.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ae1b75a95b8e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ae1b75a95b8e\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-2-570-2-c42f9898673edbe2-1024x576.jpg\" alt=\"Two similar cards, one with colored flags and one without, showing markup before and after applying Source changes\" class=\"wp-image-615\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-2-570-2-c42f9898673edbe2-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-2-570-2-c42f9898673edbe2-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-2-570-2-c42f9898673edbe2-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-2-570-2-c42f9898673edbe2.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"a-before-and-after-example-2\">A before and after example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a fragment with a class and an ID, written in Source before you apply changes:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p class=&quot;callout&quot; id=&quot;shipping-note&quot;&gt;Shipping details&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After the visual editor processes it, the result can look like this. This is an illustrative result, not a guaranteed exact serialization:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Shipping details&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The visible words are identical, which is why the problem is easy to miss. The difference shows up when other code depends on those attributes. Consider this CSS and a link that points at the fragment:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.callout {\n  border-left: 4px solid #1a7f5a;\n  padding: 0.5rem 1rem;\n}\n\n#shipping-note:target {\n  background: #fff6c2;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a href=&quot;#shipping-note&quot;&gt;Jump to shipping details&lt;\/a&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once the attributes are gone, <code>.callout<\/code> matches nothing, <code>#shipping-note:target<\/code> has no target, and the fragment link has no element to scroll to. Nothing reports an error, so the breakage only appears later, when someone notices that the callout lost its border or the link does nothing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the same family of surprise as when <a href=\"https:\/\/html-editor-online.com\/blog\/quill-code-block-loses-formatting-in-cms\/\" title=\"Quill Code Block Loses Formatting in Cms\">a Quill code block loses its formatting when pasted into a CMS<\/a>: the editor keeps what its model supports and rewrites the rest, and the difference is easy to overlook until something downstream depends on it.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-3-570-3-28dbd22c862ca22b-1024x576.jpg\" alt=\"A container that fits only certain shapes beside leftover custom pieces, illustrating the gap between valid HTML and supported editor formats\" class=\"wp-image-617\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-3-570-3-28dbd22c862ca22b-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-3-570-3-28dbd22c862ca22b-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-3-570-3-28dbd22c862ca22b-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/wysiwyg-source-view-removes-class-and-id-attributes-image-3-570-3-28dbd22c862ca22b.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"valid-html-versus-what-the-visual-editor-preserves-3\">Valid HTML versus what the visual editor preserves<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Two separate questions are easy to mix up. The first is whether an attribute is valid HTML. The second is whether the rich-text editor has a format for it. Per the WHATWG HTML Living Standard, <code>class<\/code> and <code>id<\/code> are valid global attributes, and an ID must be nonempty and unique within its element tree. Your markup can be perfectly correct and still not fit Quill&#8217;s document model. If you are new to the term, the overview of <a href=\"https:\/\/html-editor-online.com\/blog\/what-is-wysiwyg-editor\/\" title=\"What Is WYSIWYG Editor\">what a WYSIWYG editor is<\/a> covers why these editors store a model of the content rather than your raw markup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not conclude that every class is removed. Quill can itself use classes to represent supported formats, and the homepage editor needs Quill&#8217;s CSS for things like lists, alignment, indentation and font classes. Those classes exist because they stand for a format. A class like <code>callout<\/code> is a name only your stylesheet understands, so the editor has no reason to keep it. If you want to keep CSS classes in HTML, the markup has to live somewhere that does not rewrite it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A useful mental model is to separate what you see from what is stored. A visual editor shows appearance, while a stylesheet, a script or a fragment link depends on exact markup. The same gap explains why subheadings can look right and still be wrong in structure, which I cover in the guide on <a href=\"https:\/\/html-editor-online.com\/blog\/wysiwyg-heading-levels-out-of-order\/\" title=\"WYSIWYG Heading Levels Out of Order\">WYSIWYG heading levels out of order<\/a>. Appearance in a preview is not proof that the source you wrote is the source you will export.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preserved:<\/strong> content and formatting the editor supports, such as headings, lists, links and basic inline styles.<\/li>\n\n\n\n<li><strong>Often lost:<\/strong> custom <code>class<\/code> and <code>id<\/code> values, and anything else that needs a specific attribute or structure.<\/li>\n\n\n\n<li><strong>Not supported at all on the homepage:<\/strong> tables, forms and full-page layouts.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-what-changed-before-you-publish-4\">Check what changed before you publish<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Because nothing warns you, build a short habit of comparing before and after. It takes a minute and catches silent attribute loss each time you apply Source changes.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy your original markup into a separate note or file before you touch Source. Browser autosave on the homepage is local, so do not rely on it as your only copy.<\/li>\n\n\n\n<li>Edit in Source and apply the changes.<\/li>\n\n\n\n<li>Reopen Source, copy the result into a second file, and look at the opening tags of the elements that matter, especially anything with <code>class=<\/code> or <code>id=<\/code>.<\/li>\n\n\n\n<li>Compare those opening tags with your saved original.<\/li>\n\n\n\n<li>Check the dependents: every CSS selector that targets those names and every <code>href=\"#...\"<\/code> link that points at an ID.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If you saved both versions as files, a quick count shows whether attributes went missing. This counts occurrences of the text, so it is a rough signal rather than a parser:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grep -o &#039;class=&#039; original.html | wc -l\ngrep -o &#039;class=&#039; after-source.html | wc -l\ngrep -o &#039; id=&#039; original.html | wc -l\ngrep -o &#039; id=&#039; after-source.html | wc -l<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If a count is lower in the second file, some attributes were dropped, and you can then compare the opening tags by eye to find which ones. When the exported markup is one long line, the <a href=\"https:\/\/html-editor-online.com\/tools\/html_beautifier\" title=\"HTML Beautifier\">HTML Beautifier for making opening tags readable<\/a> lets you scan them more easily. A beautifier only improves layout. It does not restore attributes that were already removed, and it does not validate your markup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not use how the content looks in a preview as the test. A paragraph without its class can look identical to one with it when your stylesheet is not loaded, and minifying the result proves nothing about whether the source changed. A fragment link that silently does nothing is another sign, so click it on the real page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-to-do-when-the-wysiwyg-source-view-removes-class-and-id-attributes-5\">What to do when the WYSIWYG source view removes class and ID attributes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pick the editor by what must survive. Use the visual editor for supported rich-text work, such as headings, lists, links, images and code blocks. When exact class names, IDs, selectors or document structure matter, keep editing the markup in the <a href=\"https:\/\/html-editor-online.com\/editors\/html\" title=\"HTML Code Editor\">HTML Code Editor with its separate sandboxed preview<\/a> and do not pass it back through the visual editor.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>What must survive<\/th><th>Where to edit<\/th><\/tr><\/thead><tbody><tr><td>Headings, lists, links, images, code blocks<\/td><td>The homepage WYSIWYG editor<\/td><\/tr><tr><td>Exact classes, IDs, selectors, fragment links<\/td><td>The HTML Code Editor<\/td><\/tr><tr><td>Experiments with CSS declarations<\/td><td>The CSS Editor<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The HTML Code Editor edits HTML as code with syntax highlighting and auto-closing tags, and it shows a sandboxed live preview. It does not validate your markup. Because the preview is separate from the source, the text you type is the text you keep. For a self-contained test, put your CSS in a <code>style<\/code> element in the same document. The editor&#8217;s documentation warns that relative stylesheet paths resolve against the tool&#8217;s site rather than your project, so a linked file in your own folder will not load.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;title&gt;Shipping&lt;\/title&gt;\n  &lt;style&gt;\n    .callout { border-left: 4px solid #1a7f5a; padding: 0.5rem 1rem; }\n    #shipping-note:target { background: #fff6c2; }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;&lt;a href=&quot;#shipping-note&quot;&gt;Jump to shipping details&lt;\/a&gt;&lt;\/p&gt;\n  &lt;p class=&quot;callout&quot; id=&quot;shipping-note&quot;&gt;Shipping details&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A sensible split is to draft prose in the visual editor, copy the finished fragment out, then add attributes in the code editor as the last step. Do not paste the fragment back into the visual editor&#8217;s Source view afterward, or the same conversion applies again. Keep the original file as your source of truth, and test fragment links on your real page as well, since a sandboxed preview is not your production environment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"limits-to-keep-in-mind-6\">Limits to keep in mind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A few boundaries keep you from drawing the wrong conclusion. First, the HTML Code Editor preview is not a validator. A page that renders cleanly can still contain duplicate IDs or other mistakes, so a good-looking preview is not evidence that your markup is correct or that it is unchanged.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Second, the editor&#8217;s Minify action and the standalone <a href=\"https:\/\/html-editor-online.com\/tools\/html_minifier\" title=\"HTML Minifier\">HTML Minifier for shrinking markup<\/a> can change meaningful whitespace. If you minify, compare the output with your retained source and keep the unminified copy. Minification is a size step, not a way to check that attributes survived.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Third, the <a href=\"https:\/\/html-editor-online.com\/editors\/css\" title=\"CSS Editor\">CSS Editor and its fixed sample-page preview<\/a> shows your styles on a sample page, not on your own markup. It is good for experimenting with declarations, but it cannot confirm that your classes match your document. Test selectors against the real HTML in the code editor or in your project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, this behavior describes the visual editor, not everything downstream. A CMS, theme or sanitizer can strip attributes on its own, so check the final published page as well. I am describing the Source-to-Quill step from how the site&#8217;s editor works rather than from a public implementation description, so your own before-and-after test is the only authoritative answer for your content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">Why did my class and ID disappear but the text stayed?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The visual editor rebuilds HTML from its own document model when Source changes are applied. Text and supported formats map into that model, while a custom class or ID has no matching format, so only the text carries over.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Is removing class and id attributes a sign my HTML was invalid?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. The WHATWG HTML Living Standard defines class and id as legitimate attributes. They were dropped because the rich-text editor does not represent them, not because the markup was wrong.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">Does the visual editor remove every class?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. Quill can use classes to represent supported formats such as alignment, indentation or fonts, and the editor needs its CSS for those. Custom names that only your stylesheet knows are the ones likely to disappear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">How can I tell whether attributes were removed?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Save the original markup first, apply your changes, reopen Source and compare the opening tags. Counting occurrences of class= and id= in both copies is a fast first check, followed by a visual comparison of the tags.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">Will a preview show me that attributes are missing?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Not reliably. The text can look identical with or without its class, particularly when your stylesheet is not loaded. Check the markup itself, the CSS selectors and any fragment links instead of judging by appearance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">Where should I edit markup that needs exact classes and IDs?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the HTML Code Editor, which edits HTML as code and renders a separate sandboxed preview. It has no validator, so check the markup separately for issues such as duplicate IDs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">Can beautifying or minifying restore the removed attributes?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. A beautifier only changes layout and a minifier only shrinks the code. Neither can bring back attributes that were already removed, and minifying can change meaningful whitespace, so keep your original source.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When the wysiwyg source view removes class and id attributes, treat it as a boundary of the visual editor rather than a bug in your markup. The editor keeps what its model supports and drops the rest, so keep a copy of the original, compare opening tags after applying changes, and move exact-markup work into a code editor. Your next step is to paste a small fragment with one class and one ID into Source, apply it, reopen Source and see what remains.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools and resources on HTML Editor Online:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-editor-online.com\/\">WYSIWYG HTML Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/wysiwyg-heading-levels-out-of-order\/\">WYSIWYG Heading Levels Out of Order<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/quill-code-block-loses-formatting-in-cms\/\">Quill Code Block Loses Formatting in Cms<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quilljs.com\/docs\/modules\/clipboard\" target=\"_blank\" rel=\"noopener\">Clipboard Module &#8211; Quill Rich Text Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/dom.html\" target=\"_blank\" rel=\"noopener\">HTML Standard<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quilljs.com\/docs\/customization\" target=\"_blank\" rel=\"noopener\">Customization &#8211; Quill Rich Text Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quilljs.com\/docs\/formats\" target=\"_blank\" rel=\"noopener\">Formats &#8211; Quill Rich Text Editor<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>WYSIWYG source view removes class and ID attributes when Source edits pass through Quill. See an example, a quick check and where to keep exact markup.<\/p>\n","protected":false},"author":1,"featured_media":611,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[171,170,172,87,173,138],"class_list":["post-573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wysiwyg","tag-css-classes","tag-html-attributes","tag-html-ids","tag-quill","tag-source-view","tag-wysiwyg-editor"],"_links":{"self":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/comments?post=573"}],"version-history":[{"count":10,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/573\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/573\/revisions\/618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media\/611"}],"wp:attachment":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media?parent=573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/categories?post=573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/tags?post=573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}