♿ More Semantic HTML Tags for Atomic Elements

[Daveden2]

Description

The fact that we can now interact with the core HTML elements is amazing. However, based on experience with some other builders, it would be awesome if we could add any popular semantic HTML tag to our divs.

• One use case is with buttons. If we can add any tag we want, then we can add a div element set to <a> or <button>, place a span with text, and an SVG element, and we get our desired button with an icon.
• We can also build out a fully customisable list using custom ul > li.
  If possible, we could get a hook to add custom HTML tags that are not included in the list of tags.

I also can't wait to get the dynamic custom attributes.

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.

[nicholaszein]

Hi @Daveden2!

Thank you for sharing your feedback! 🙏

That's a good idea, especially regarding lists! Including a hook to add more HTML tags may be a good idea too. We will consider adding more options in the future, but for not, to ensure consistency these are the available options (see this discussion).

As a follow-up, it would be nice to understand use cases for including other HTML tags as @doronwolf asked here. Could you share some other use cases aside from including lists? 🙂

About anchor tags (<a>)

This is something that we didn't announce, and it's a good thing that you raised it here. Anchor tags are rendered dynamically when you add a link to the elements. Some will be rendered as the wrapper element replacing the original tag, others will be rendered inside the wrapper element according to the best practice or more semantical way of applying them. For example, Heading and Paragraph elements will have the anchor tag rendered inside.

Elements with anchor inside

<html_tag>
    <a>Content</a>
</html_tag>

Elements with anchor outside

<a>
    Content
</a>

Here's a table that indicates the behavior of each element:

Element	Anchor Inside	Anchor Outside
Div Block	❌	✅ <a>Content</a>
Flexbox	❌	✅ <a>Content</a>
Heading	✅ <h2><a>Content</a></h2>	❌
Paragraph	✅ <p><a>Content</a></p>	❌
Image	❌	✅ <a><img></a>
SVG	❌	✅ <a><svg></svg></a>
YouTube	N/A	N/A

Anchor tags in atomic Button elements

The Button element is a little different. By default it will output a <button> tag. But as soon as you add a link to this element, it will replace the <button> tag with a <a> (anchor) tag. This will allow to use this element for other things in the future and maintains it semantically accurate.

Here are two buttons side-by-side:

Button without a Link	Button with a Link
<button class="e-button-base"> Click here </button>	<a href="#" target="_self" class="e-button-base"> Click here </a>

I hope this clarifies your questions about including anchor tags as options.

Let me know if you have further questions! 😉

[pingram3541]

Great idea but unfortunately there is no <a> tag for the flexbox atomic element. Best you can get is a div > a > inner components by adding a link to the container, still leaving the anchor wrapped inside a container vs becoming the anchor itself. (my bad, just realized front end render replaces tag as @nicholaszein mentioned in the table above)

We need to consider a simple example like a Terms and Conditions page. What is the best approach for a page with 60 paragraphs having inline url, phone and email links, bold, italic, span tags that maybe need html attributes, what about specific inline text that needs a different color?

I'd rather use the WordPress content widget or a text element, a single paste 1 and done, but will these later become a sunset component?

We need a better way to nest inline html before, after and within the use of atomic element content, I just don't know how to suggest it.

For example, could a paragraph atomic element allow for + (add) of additional paragraphs within a single element so as to minimize so much repetition, I mean isn't that what we are trying to do, limit the amount of components?

Should it allow for html instead of stripping it out? (I tried, simple <br> tags are stripped and so are anchors, even <b> bold is stripped out)

For now, I have used a cheat. Using the dynamic option, it gives you a before and after but the text inputs are single line making it cumbersome. Of course you need something dynamic to load for which a before and after can be applied. The dynamic options are missing shortcode, lightbox and other very useful dynamic options. I'd like to have these expanded and allow for html and shortcodes, maybe even allow nesting of other atomic elements within the atomic paragraph itself since paragraphs are also containers. Just one example using paragraphs.

I also do not understand what benefit the div atomic component provides, I have yet to see anyone explain why it's needed or when to use it over a flexbox atomic element. Would love to hear a case example.

Maybe a html atomic element to allow for anything custom within a container.

I think the OP was looking for additional HTML tag options for flexbox and div atomic elements so as to choose <button> or <a> or even have the ability to manually key in any custom html tag they want and then add components within it. This would make these nearly universal components that don't necessarily match the name of the element itself but give us control to make these complete components from a set of elements vs single block items only.

Another thing I noticed, there is no access to global colors within atomic elements nor do we have the tabs for transform, motion effects, mask, responsive or ability to add html attributes. I'm really curious and excited to see how this works out.

[nicholaszein]

Hi @pingram3541!

Thank you for chiming in and sharing your point of view. I think these are all valid points, but there are some misconceptions I would like to clarify.

For this I will need to share some examples and explain some things in depth.

@Daveden2 raised good points and as @doronwolf mentioned, there is room for improvement.

Please, allow me some time to write a more detailed explanation, and it will all make more sense. 😉

[doronwolf]

Hi @pingram3541, as we mentioned in earlier comments, V4 is still in alpha phase, and we are quite aware of those missing features.

1. div block/flexbox changes into <a> tag when you add a link to it
2. Inline editing of text and a more robust v4 text editor are also on their way (but it might take some time till they are ready)
3. Div block and flexbox are indeed very similar, they appear as 2 separate widgets for more convenience, you should use the Div block when you need a regular block layout, a container to group elements. (without any additional flexbox CSS) and use the Flexbox when you need a layout with flex capabilities (like align items horizontally or vertically, adding space between items, or want items to grow/shrink dynamically, or if you want to easily center something - especially both vertically and horizontally)
4. We are considering adding additional tags as Daveden2 suggested, but we need to make sure we truly understand those use cases first, and also that it will just help our users and won't make some of them do markup mistakes
5. attributes and masks, netted elements, tabs, and so on.. all those things are also in our 'to-do' list
6. Instead of global colors and fonts, V4 will have variables for fonts, colors, and - also for sizes! This will work super seamlessly with the CSS classes system and will help users create a super efficient design system 💪

[nicholaszein]

Hi @pingram3541.

I think @doronwolf explained much better than I would. Let me know if you would like to see how you can build a button with an icon using the new atomic elements. 😉

[nicholaszein]

Hey @pingram3541!

We just released Elementor Editor v3.34 - Beta1, which includes several enhancements based on your feedback! 🙌

We would love to learn from your feedback regarding these new enhancements and features!

Feel free to join the discussion over at https://elemn.to/beta-334 😉

See you there! 💪

[charles-emes]

Forgive me if I have misunderstood. If you have an anchor tag inside a <p> how do I target the anchor color text with a global class? The use case is where I have white text on a dark background in say the footer and have black text on a white background within the page. If both pieces of text contain links I want to be able to style the links with a different color. I would have solved this in v3 with a class like .link a { color:#CCCCCC;} but I don't see a way of doing this in the editor.

[nicholaszein]

Hi @charles-emes!

Apologies for the delay in answering you, I missed your comment.

Global Class styles are applied to the root element, not to the items inside them. When you add a link to a Div Block, Flexbox, or Button elements, their outer HTML tag changes from being a <div> or a <button> and are replaced with an anchor tag <a>. So to achieve what you want using only the Unified Style tab interface, you can simple create a class called link, and apply your styles accordingly. There isn't much more you need to do in this case. The <a> tag is never inside the element. It is the element.

However, we have added the Custom CSS (Pro) field to Atomic Elements in the Editor version 3.33 (currently in Beta testing), and you can use Nested CSS if you want like so:

Gravando.20251103.123335-optimized.mp4

I hope this clarifies your question.

Let me know if that makes sense for you.

Kind regards

[alexander-pankart]

<main> and <nav> would be nice.

[nicholaszein]

Hey @Daveden2! How are you?

We just released Elementor Editor v3.34 - Beta1, which includes several enhancements based on your feedback! 🙌

For example, now Paragraph Atomic Elements can have a <span> tag. As we move towards improving the accessibility and semantic of Editor V4, this is one step closer to that goal! 🙂

We would love to learn from your feedback regarding these new enhancements and features!

Feel free to join the discussion over at https://elemn.to/beta-334 😉

See you there! 💪