Because text should be a <p> logically, and <span> is a subdivision of something.
<div>a text</div> is not valid, even if browsers can show it as if it was <div><p>a text</p></div>.
So your:
<div class="test1">
<span>Hello</span>
</div>
Isn’t semantically correct and should be at least a:
<p class="test1">
<span>Hello</span>
</p>
<div>text</div> isn’t even semantically correct.
Text can be in <p>, <hn>, <li>, <a>, and within a <span> inside one of those tags.
Edit: and there are rules for nesting all of those tags. For example you can’t put a title in a paragraph, or a list in a paragraph. The reason to remember is that a paragraph is rendered as a block but cannot contain another block. As titles or lists are rendered as blocks too, they can’t be put inside paragraphs. The only things you can put inside paragraphs are spans and formatting tags, but most of the formatting tags have been suprceded by CSS (like bold etc)
I know a lot of people who are doing it this way…
and Yes it does render correctly in the browser…
and Yes. I understand it’s not semantically correct.
What I was trying to figure out
is why Webflow is inserting an extra DIV into the code. <div class="test1"><div>this is my text</div></div>
From what you are saying…
Webflow is not allowing us to create semantically incorrect code.
Which is fine… I can agree with what you said and the reasoning.
So the next question would be is
“how do I get the result I need without that extra DIV” ?
In turn… I started thinking about what you said…
which was basically “you have to do correctly”.
So what I ended up trying was…
I dropped a paragraph inside the div…
then highlighted the paragraph and made the entire text a span.
what I got was this
<div class="test3"><p><span>this is a test</span></p></div>
Notice there is no extra DIV.
So in order to create semantically correct code (in Webflow)
and avoid Webflow adding the extra DIV…
---- you need to use a paragraph element inside the DIV
---- then highlight the text - and create a span from it.
So
(if you directly wanted to target something inside the span)
@Revolution This sounds like it may be a bug. But if I add a Text Block to the canvas, and add text or make everything a span it’s not adding an extra div.
Can you give exact steps to repro the case where an extra div is added?
Watching the video again I see what’s happening, it looks like this is a case of misunderstanding what a Text Block is. Two things:
a) A Text Block in the Designer is just a <div> that the Designer expects to be used for text, eg: can use the text editor with, can’t drag items into, etc. as apposed to <div> used for layout. In HTML they’re the same, the distinction is one in the Designer to improve the UX based on how you want to use the <div>.
b) If you add a Div Block to the canvas and double click to add some text it’ll become a Text Block, if you then erase all the text it will become a Div Block
Your css of .class > span {} will select only direct children of .class that are a span. However in using the text editor in the Designer it’s possible to have a span inside a strong, em, a, or even another span. You may want to use a looser selector that selects any span that’s a descendant of .class instead of just direct children. ie: .class span {}.
oic. This is a variable in how visual design tools work when compared to doing it hand. Historically (before I found Webflow)… I coded every by hand. With hand-coding… when I use a text element… obviously, I already know the purpose of the element… so there’s no need for the div.
…which goes into what @vincent said previously… I have a habit of not placing text elements inside a paragraph tag. Pretty my text elements ride off the parent div values. This is an old (and bad) habit of mine that I need to fix.
Interesting. I’ve encountered this in the past but didn’t have foresight to ask support about it. Now I know
In this case… I have a “circular div” with a text element vertically & horiz aligned / centered inside. And so… I specifically want to target that particular span.
