The Problem: Why Do HTML Tags Disappear?
When working with Elementor’s Text Editor widget, HTML tags—particularly <br> (line breaks), <p> (paragraphs), and <span> tags—disappear under the following circumstances:
- When you switch from the Text tab to the Visual tab and back
- When you navigate to another element and return to the text editor
- After saving the page and reopening the editor
- When updating the page content
This issue has been reported as an Elementor GitHub bug since June 2020 (Issue #11560), but remains unresolved. The root cause lies in WordPress’s classic editor, which Elementor uses for its Text Editor widget.
Solution 1: Add Empty Classes to Tags
Add a dummy class to your HTML tags to prevent Elementor from stripping them. The class doesn’t need to be styled—it simply tricks Elementor into preserving the tags.
Instead of:
<br>
<p>Your paragraph text</p>
<br class="preserve">
<p class="preserve">Your paragraph text</p>
Pros: No coding required, works immediately, no plugin dependencies Cons: Makes code verbose, difficult with complex HTML
Solution 2: Use Shortcodes (Recommended)
Create WordPress shortcodes that output the HTML tags you need. This is the cleanest, most maintainable solution.
Step 1: Add this code to your theme’s functions.php or use a code snippets plugin like WPCode:
<?php
/**
* Shortcodes for HTML tags in Elementor
* Prevents Elementor from stripping HTML tags
*/
// Line break shortcode
function line_break_shortcode() {
return '<br />';
}
add_shortcode('br', 'line_break_shortcode');
// Paragraph open tag
function paragraph_open_shortcode() {
return '<p>';
}
add_shortcode('p', 'paragraph_open_shortcode');
// Paragraph close tag
function paragraph_close_shortcode() {
return '</p>';
}
add_shortcode('/p', 'paragraph_close_shortcode');
?>
```
**Step 2:** Use the shortcodes in your Elementor Text Editor:
**Old way (doesn't work):**
```
First line<br>
Second line<br>
<p>A paragraph of text</p>
```
**New way (works perfectly):**
```
First line[br]
Second line[br]
[p]A paragraph of text[/p]
```
**Real-World Example:**
```
[p]Our company was founded on the principles of quality and customer service.[/p]
[br]
[p]We believe in delivering excellence through attention to detail and dedication to our craft.[/p]
Pros: Clean readable code, easy for clients, works with complex HTML, consistent across site Cons: Requires code snippet, need to educate team
Best Practices
- Choose one solution and stick with it across your entire site for consistency
- Document your approach in your site’s style guide
- Train your team on whichever method you choose
- Use the HTML widget for complex, one-off HTML structures
- Test thoroughly after Elementor updates
Conclusion
The shortcode solution offers the best balance of clean code, ease of use, and maintainability for most professional projects. While we hope Elementor will eventually fix this longstanding issue, implementing these workarounds ensures your HTML stays intact and your code remains clean and semantic.
