Discusion: <b> vs <strong> vs CSS

True, but these aren't used to the same degree as <span>, so, pretty please, may I have a <span> please sir?

Also, true. But when inserting <strong> and <em>, is it the developer's intention to cater for assistive technology, or do they have styling in mind? If it is the latter, then CSS should be used instead of these elements. And this is where the <span> element comes in.

1 Like

Not sure how span would be indicated in the design view though? How would you select it to add styling or dynamic attribute etc?

Brad, it's all there. with the exception of being able to place a <span> where required. That is, without going into code view.

1 Like

Hmmm, if that is the case would it be beneficial to have a setting to 'show all elements' by default in the structure panel?

Might be just as easy to add the span tag in the code view rather than add in design view ---> show all elements ----> look for the span tag (which can be difficult on large pages).

Hmmm, the UI could get very complicated. The problem is that 10 out of ten times I am using span is to show or hide content not styling. So this would not be readily/visually represented in the design view.

I will do some more testing.

Brad, hiding content is done using CSS. In other words, it belongs to the styles group and not the content group.

How do you hide content based on a variable or data value via CSS? The dynamic attribute ---> Show'Hide works amazing without writing custom CSS.

For example I have a span that shows if the logged in client ID = 15.

Or how would I do something like this with CSS?

<span dmx-show="ws_office.contains('Prince George')||ws_office.contains('Smithers')||ws_office.contains('Victoria')">PST</span>

Brad, I use this as my guide:

A typical web page integrates all three technologies to provide a seamless user experience:

  1. HTML creates the basic structure.
  2. CSS enhances the visual presentation.
  3. JavaScript adds dynamic functionality and interactivity.

In this case,

<span dmx-show="ws_office.contains('Prince George')||ws_office.contains('Smithers')||ws_office.contains('Victoria')">PST</span>

use is made of all three technologies where the JS manipulates the CSS which in turn styles (hides) the HTML

This is part of dmxAppConnect.js which hides an element:

t=>{e.dmxHide.hide=t;const{initial:s}=e.dmxHide,n=t?"none":s.display,r=t?"important"

This is where CSS is used for:

.element {
    display: none !important;
}

In summary:

The <span> element is an excellent tool for fine-grained control over your web content, allowing you to apply specific styles and functionality where needed without disrupting the flow of your text.

Edit: We need to be able to easily insert a <span> element.

1 Like

Ben, my long time colleague, I am totally in 1000% agreement with you that we need to be able to add <span> elements. Just thinking out loud how that would work. :grinning:

2 Likes

Hi friends

For the past ten years or so, web page builders have been making increasing use of <span>, <strong>, etc. formatting.
We've seen how Wordpress has dominated Google (+20 years). And how this monstrous engine prefers to reference this kind of site...
With the arrival of algorythms that people call “artificial intelligence”, it's clear that in search results, tags haven't been cleaned up and allow better analysis of sites and their content...

Personally, I've never liked this kind of code. But it's effective when customized with CSS.
When I search for sites, themes or images by adding my color preferences or other aesthetics, and I have a choice in the results... It's these tags that make the difference. And I come across sites that have been designed with builders in mind.

Wappler should have this kind of format in its toolbox.

Why do I agree with @ben ?
Because when you've finished your project, you need more peace of mind to focus on the aesthetics, without overworking the code.
Many developers know how frustrating it is to change everything when marketing comes after their work.

I wish you all a Merry Christmas and a Happy New Year!

1 Like