WYSIWYG editor JavaScript: semantic and machine understanding

1
votes

I am making a WYSIWYG editor in JavaScript and I will adapt it for meteor Framework to build a CMS:

Editor screenshot

And an important question pop up in my head. Lot of those editors use (by example Bold button):

<strong>Some Text </strong>

instead of span or p or any else:

<span style="font-weight: bold;">Some Text </span>

So my question is: What should be considered to produce clean semantic HTML? For example: deciding between inline styles, CSS classes and the <strong> tag for boldness.

1
htmlseowysiwygsemantic-markup
We can't tell you what element holds the semantics that describe your content based only on knowing how you want it to look. That's part of the point of separating presentation and semantics into CSS and HTML. - Quentin
Questions about "what is better for SEO" are off-topic anyway, as are questions seeking opinions. - Quentin
You just answered my question was "is a better way to separate style and semantics (CSS and HTML) ?" Because if tinymce and others use by example strong for bold and not css it's maybe there is a reason. And sorry I talk about opinions because peoples can find pros and cons for both ways I mentioned. ps : sorry, by SEO i mean for any crawlers who want understand the content. - Z. Clément

1 Answers

1
votes

Here are the facts to help you take a decision:

"The strong element represents strong importance, seriousness, or urgency for its contents."

Text Level Semantics - strong. w3.

"The [bold] element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood [...]"

Text Level Semantics - bold. w3.

Since you don't intend to understand the content that is being edited in your text area, semantics tells us you shouldn't enforce an intent to the content stylized with your text editor.