Answers.Body: <p>It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a <code>&lt;p&gt;</code> tag in its value, but you're also wrapping that in a <code>&lt;p&gt;</code> tag in your template. This results in output like this (which you can check using right click -&gt; <code>View Page Source</code> in your browser):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p class=&quot;section__description padding-left&quot;&gt;
      &lt;p&gt;
          Lorem Ipsum …
      &lt;/p&gt;
  &lt;/p&gt;
  </code></pre>
  <p>But that isn't valid HTML, because a <code>&lt;p&gt;</code> tag can't contain other <code>&lt;p&gt;</code> tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.</p>
  <p>To fix this, you have to options:</p>
  <ol>
  <li>If you want the editors to be able to enter multiple paragraphs in the redactor field, use a <code>&lt;div&gt;</code> (or another element that can contain <code>&lt;p&gt;</code> tags) as the wrapper instead of a <code>&lt;p&gt;</code>.</li>
  <li>If you really only want to allow a single paragraph in the redactor field, you can <strike>switch to <a href="https://imperavi.com/redactor/docs/settings/misc/#s-inline" rel="nofollow noreferrer">inline mode</a></strike> <sup>1</sup>. This way, the redactor output won't be wrapped in <code>&lt;p&gt;</code> tags so you can safely use the <code>&lt;p&gt;</code> tag in your template. Sidenote, this setting is quite unreliable, you may want to use <a href="https://twig.symfony.com/doc/3.x/filters/striptags.html" rel="nofollow noreferrer"><code>striptags</code></a> with a whitelist of allowed inline tags to ensure the output doesn't include superfluous <code>&lt;p&gt;</code> tags.</li>
  </ol>
  <p><sup>1</sup> Inline mode is broken, see <a href="https://github.com/craftcms/redactor/issues/449" rel="nofollow noreferrer">this issue</a> for details. Instead, set <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-enterkey" rel="nofollow noreferrer"><code>enterKey: false</code></a> to prevent editors from adding new paragraphs or <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-breakline" rel="nofollow noreferrer"><code>breakline: true</code></a> to make the <code>enter</code> key add <code>&lt;br&gt;</code> tags instead of starting a new paragraph. Remove all block formatting options with the <a href="https://imperavi.com/redactor/docs/settings/button/" rel="nofollow noreferrer"><code>buttons</code> setting</a>. Then you can use the <a href="https://twig.symfony.com/doc/3.x/filters/striptags.html" rel="nofollow noreferrer"><code>striptags</code> filter</a> in the output template to only allow inline tags and remove the <code>&lt;p&gt;</code> tag if necessary. If this sounds tedious, see <a href="https://craftcms.stackexchange.com/a/40458/11705">my answer here regarding alternative WYSIWYG editors</a>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-02-01T18:56:18.977Z
Answers.Text: Thank you very much! Lesson learnt.
Answers.UserDisplayName: mencantalamelva
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-02-01T16:17:20.817Z
Answers.LastActivityDate: 2023-02-14T16:22:45.697Z
Answers.LastEditDate: 2023-02-14T16:22:45.697Z
Answers.UserDisplayName: MoritzLost
Body: <p>I am using <strong>redactor</strong> for creating a rich text field.</p>
  <p>The thing is that I'm using the exact same field on two separate sections.</p>
  <p>On one it is working fine, but on the other one, it <strong>is creating <code>&lt;p&gt;</code> tags outside the parent's div.</strong></p>
  <p><a href="https://i.sstatic.net/EKsLS.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/EKsLS.png" alt="this is the one without p tags" /></a></p>
  <p><a href="https://i.sstatic.net/sIgsX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/sIgsX.png" alt="developer tool" /></a></p>
  <p>On the upper screenshots redactor is working how I want it to work.</p>
  <p>On the followings screenshots is where it's creating extra <code>&lt;p&gt;</code> tags</p>
  <p>and on the following section it is <strong>creating <code>&lt;p&gt;</code> tags</strong> outside the parent it should.
  <a href="https://i.sstatic.net/UPHLC.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/UPHLC.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.sstatic.net/7ykQp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7ykQp.png" alt="enter image description here" /></a></p>
  <p>Here you can see, that on this section it is creating the tags outside it's parent, I tried a lot of things like changing settings on my default.json from redactor's plugin, and these are my advanced settings on the redactor field settings:</p>
  <p><a href="https://i.sstatic.net/KXCHV.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KXCHV.png" alt="enter image description here" /></a></p>
  <p>I don't know why this is occurring as it is really strange that the same redactor field is acting differently on both sides. It's really annoying me... I will be very grateful for any help.</p>
  
Tags: <redactor>
Title: Redactor creating <p> tags outside it's parent
ThreadText: # Redactor creating <p> tags outside it's parent
  
  (Asked by: username_0 on 2023-02-01)
  
  I am using **redactor** for creating a rich text field.
  
  The thing is that I'm using the exact same field on two separate sections.
  
  On one it is working fine, but on the other one, it **is creating `<p>` tags outside the parent's div.**
  
  [![this is the one without p tags](https://i.sstatic.net/EKsLS.png)](https://i.sstatic.net/EKsLS.png)
  
  [![developer tool](https://i.sstatic.net/sIgsX.png)](https://i.sstatic.net/sIgsX.png)
  
  On the upper screenshots redactor is working how I want it to work.
  
  On the followings screenshots is where it's creating extra `<p>` tags
  
  and on the following section it is **creating `<p>` tags** outside the parent it should.
  [![enter image description here](https://i.sstatic.net/UPHLC.png)](https://i.sstatic.net/UPHLC.png)
  
  [![enter image description here](https://i.sstatic.net/7ykQp.png)](https://i.sstatic.net/7ykQp.png)
  
  Here you can see, that on this section it is creating the tags outside it's parent, I tried a lot of things like changing settings on my default.json from redactor's plugin, and these are my advanced settings on the redactor field settings:
  
  [![enter image description here](https://i.sstatic.net/KXCHV.png)](https://i.sstatic.net/KXCHV.png)
  
  I don't know why this is occurring as it is really strange that the same redactor field is acting differently on both sides. It's really annoying me... I will be very grateful for any help.
  
  **Tags:** redactor
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-02-01. Score: 4 | Accepted answer
  
  It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a `<p>` tag in its value, but you're also wrapping that in a `<p>` tag in your template. This results in output like this (which you can check using right click -> `View Page Source` in your browser):
  
  ```html
  <p class="section__description padding-left">
      <p>
          Lorem Ipsum …
      </p>
  </p>
  
  ```
  
  But that isn't valid HTML, because a `<p>` tag can't contain other `<p>` tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.
  
  To fix this, you have to options:
  
  1. If you want the editors to be able to enter multiple paragraphs in the redactor field, use a `<div>` (or another element that can contain `<p>` tags) as the wrapper instead of a `<p>`.
  2. If you really only want to allow a single paragraph in the redactor field, you can switch to [inline mode](https://imperavi.com/redactor/docs/settings/misc/#s-inline) 1. This way, the redactor output won't be wrapped in `<p>` tags so you can safely use the `<p>` tag in your template. Sidenote, this setting is quite unreliable, you may want to use [`striptags`](https://twig.symfony.com/doc/3.x/filters/striptags.html) with a whitelist of allowed inline tags to ensure the output doesn't include superfluous `<p>` tags.
  
  1 Inline mode is broken, see [this issue](https://github.com/craftcms/redactor/issues/449) for details. Instead, set [`enterKey: false`](https://imperavi.com/redactor/docs/settings/formatting/#s-enterkey) to prevent editors from adding new paragraphs or [`breakline: true`](https://imperavi.com/redactor/docs/settings/formatting/#s-breakline) to make the `enter` key add `<br>` tags instead of starting a new paragraph. Remove all block formatting options with the [`buttons` setting](https://imperavi.com/redactor/docs/settings/button/). Then you can use the [`striptags` filter](https://twig.symfony.com/doc/3.x/filters/striptags.html) in the output template to only allow inline tags and remove the `<p>` tag if necessary. If this sounds tedious, see [my answer here regarding alternative WYSIWYG editors](https://craftcms.stackexchange.com/a/40458/11705).
  
  > **Comments:**
  > **username_0**: Thank you very much! Lesson learnt.  
  
  ---
  
  