How do I attribute text as italic in the Weebly Editor?

[MartinMt]

Hello everyone,

I recently found out a weird behaviour in the Weebly Editor regarding texts. When I select text and format it as "italic", the text does not become italic but emphasized instead. I noticed that since I changed the em-style in my CSS to non-italic but colored. An inspection of my text even showed that the selected text was enclosed by <em>-tags instead of <i>-tags.

Did I mess somehow with my editor? Because I'll eat my hat if a developer at Weebly really thought that emphasized and italic is the same and on top of that label the ui button as "italic" even though it emphasises. So how can I correct that behaviour?

Thanks in advance.

[Adam7 · Accepted solution]

There is a semantic difference between using em versus i, so technically speaking both are fine depending on why you are using them. I don't know the specifics of why we ultimately chose em for italic text, though I'd guess it's because using the tag to imply stress was the most common use for italic text. You can read a bit more about this on the em tag article on moz.com.

[Bernadette3]

Any customizations to the theme could cause the code to not work properly. Does this still happen if you change the theme back to a standard theme? 

[MartinMt]

Yes, in a standard theme, marking text as italic produces text enclosed in <em>-tags. 

[Adam7 · Accepted solution]

There is a semantic difference between using em versus i, so technically speaking both are fine depending on why you are using them. I don't know the specifics of why we ultimately chose em for italic text, though I'd guess it's because using the tag to imply stress was the most common use for italic text. You can read a bit more about this on the em tag article on moz.com.

[PaulMathews · Accepted solution]

@MartinMt As @Adam indicates, it's about the difference between semantics (meaning) and presentation (formatting). The <i> tag doesn't mean "italic" but rather "idiomatic" and is used to provide an alternative text impression from regular paragraph text. By default, <i> presents regular text as italics but that's not its semantic purpose and <i> should always be used as a secondary choice to proper emphatic text html tags like <em> or <strong>.

Italics is about formatting text a particular way and that is solely the purview of css not html (formatting not meaning). The <i> tag by default happens to produce text that looks italic but is used for a variety of other purposes (Font Awesome uses the tag for its icon fonts and the tag typically wraps technical terms and publication titles). The preferred semantic tag for italic text is <em> so the Weebly devs are absolutely correct to use it as the default wrapper for text sporting the italic format.

[Adam7]

You know, in the approximately 25 years I've been making websites or supporting people who make websites I've never actually thought about what the i in the <i> tag stood for. There's always room to learn!

[PaulMathews]

@Adam It's a pretty common and understandable interpretation of the <i> tag and its cousins, the <b> tag (for bolded text) and <u> tag (for underlined text). It all makes perfect sense in the non-css world where content and style were not separate and from whence these tags originated. Not surprisingly, b, i, and u tags work exactly as you'd intuitively expect from a resultant formatted text perspective. But, in a semantic html world, i is for idiomatic text, b is for text you want to "bring attention to," and u is for the exotically-termed "unarticulated annotation" (an example of which is the red squiggle underline that appears under misspelled text to let you know that, on hover, you'll find some correct spelling options annotation on that text). While you can apply css to each of these semantic elements for the actual desired formatting, by default, the b, i, and u tags will make the wrapped text appear like bold, italic, and underline text, respectively. It's just that the tags don't actually mean bold, italic, or underline in semantic html.

[MartinMt]

So okay, i-element is not italic but a different quality of text, b-element is not bold but text to which attention is being drawn to. That explains why Weebly produces em-elements and strong-elements in accordance to the HTML Living Standard. It's weird that the w3school-site states that i- and b-elements are "formatting elements [which] were designed to display special types of text: <b> - Bold text; (...) <i> - Italic text; (...)" [cite]. But that's hardly Weebly's fault.

Actually it is fascinating to learn how nuanced HTML is with text and with that language itself.

What in the end does not quite fit is that Weebly's editor UI--even though producing em- and strong-elements--labels the text formatting controls as "bold" and "italic" and even uses a bold B and an italic I as icons. That might be to accomodate to users who just want to easily build a website and are rather not interested in the workings of web languages. But personally I think that simplifying things ought not to make things behave wrong. It feels intransparent.

For my purposes it looks like I have to use the custom html content blocks to insert other useful elements-tags beside strong, em and u.

Thanks to all of you for your great explanations!

[PaulMathews]

@MartinMt To be fair, Weebly code doesn't always comply with modern standards. For example, if you use the text editing toolbar to resize text or change its color, Weebly does this via a <font> tag text wrapper. The <font> tag is not valid in the HTML5 spec (Weebly should instead be using a <span> tag wrapper with the necessary inline style attributes). And columns are handled via <table> tags which is pretty much a no no for modern page layout work (but totally okay if you really love flaming gifs and listen to a lot of old Duran Duran albums).