<i>, <em> or <span> for italics ?

[Tex2002ans]

Originally Posted by Turtle91

You are, and have always been (AFAIR), thinking of <i>/<b> <em>/<strong> as purely visual presentations. You consistently ignore other functions - I suppose because they are not functions of your device. No matter how many times people point this out to you, you continue to ignore the non-visual applications of <em>/<strong>...

For even more <i> vs. <em> use-cases + differences, see my post:

• 2021: "Italics and Bold" (Post #4)

Why did HTML5 make each one have separate uses?

Accessibility + Internationalization

Billions more people are on the Internet now, and HTML5 had to take into account many more languages + not just having a purely English-/Euro-centric view.

* * *

Italics and Emphasis are two distinct functions.

In English—through a quirk of history—it just so happens to be that emphasis looks the same as italics on the surface.

But there are thousands of other languages out there. Many languages don't have italics at all + they handle emphasis completely differently.

Here's a few examples I gave in the 2021 topic above:

Originally Posted by Tex2002ans

Auto-Translation

[...]

For example, emphasis in:

• Arabic
  
  • extra lines above/below, different fonts, or extra stretched-out lettering.
• Hebrew
  
  • bolder, underline, or larger gaps between letters (letter-spacing).
• Chinese/Japanese/Korean
  
  • extra dots/symbols around characters.

Imagine you were a Japanese reader, and after an English->Japanese translate, every single word in your book titles had extra emphasis dots placed on it. That's not correct.

If you want more East Asian examples, see the CSS3 specs on "Emphasis Marks".

They show graphics and examples of different:

• symbols (dots, circles, double-circles, sesame, [...])
  
  • CSS3 = text-emphasis-style
    
• locations (over/under/left/right)
  
  • Dependent on horizontal/vertical writing + which language you're using.
    
  • CSS3 = text-emphasis-position
    

That's just one small piece of italics <i> ≠ emphasis <em>.

- - - - -

Side Note: If you want even more on Asian-language emphasis, see:

• Wikipedia.org: "Emphasis (Typography) > Punctuation Marks"
• Japanese Wikipedia: "Emphasis Mark"
  
  • Goes into much more detail, but it's written in Japanese, so you'll have to translate it.
    
  • Japanese has 8 different emphasis characters.
    

If you want to see how Hebrew (+ Cyrillic + Korean/Hangul) handles emphasis, see the fantastic talk:

• TYPO Labs 2017: "Liron Lavi Turkenich | Go bolder, just slant it—secondary styles in Hebrew"
  
  • (Hint: It's not italics!!!)

If you want to learn even more about the history/usage of Italics (which was only invented in the ~1500s):

• Wikipedia.org: "Italic type"

- - - - -

Originally Posted by JSWolf

So how is <em> and <strong> visually different to <i> and <b>? The answer is there's no difference. <i> shows The Lancet exactly the same as <em>. And as you see in your post and this post, italics are being used and not emphasis.

The difference has been described to you dozens and dozens of times.

I'd highly recommend rereading this thread from the beginning, this time with an open mind.

Originally Posted by bookman156

But when I started in web design it was considered bad practice to use i and b as everyone was moving to em and strong. So that is my habit as yours is for i and b. I wouldn't be surprised if I and b are chucked in the bin again some time.

No.

HTML4 wrongly deprecated <i> + <b>, which was an enormous regression.

And that started ~15+ years of the "Replace all <i> -> <em> + <b> -> <strong>" overcorrection.

HTML5 fixed that mistake.

* * *

I know it's information overload, and I recommended MASSIVE amounts of "homework" for you the past few weeks...

But read the 2021 link above + the entirety of this thread (and the original 2017 one too!).

Emphasis vs. italics has been described in extreme detail, with dozens of examples + HTML+CSS code samples.

And why is this so important to get right?

Text-to-Speech + Auto-Translation has gotten huge—and is only getting more popular/better—so tagging your markup properly has become even more important than ever before.

- - - - -

Side Note: And if you want one more thing to toss on the list, see my multiple in-depth comments in:

• Reddit.com /r/LibreOffice: "Support for spell checking for multiple (two or more) languages"

I described:

• Marking up your DOCX/ODT documents properly
  
  • (Using Styles! Not those dang "B" + "I" buttons!)
• + Italics vs. Emphasis
• + Future tools/methods to help mass correct <i><-><em> HTML markup.
  
  • Similar to Sigil's/Calibre's Spellcheck Lists.

And I still stand by my advice at the end of that last post:

And just because other people create disastrous documents doesn't mean you have to join them.

Create the cleanest and best dang documents you can, and you'll reap the benefits. I guarantee it!

- - - - -

Originally Posted by JSWolf

The last time this issue came up, nobody was able to mention such a program.

Those same exact words were spoken in this same exact thread!

See Post #75:

Originally Posted by Tex2002ans

Text-to-Speech (JAWS, NVDA).

I've described time and time again:

Text-to-Speech can, and does, treat these differently.

And if you're an advanced user, you can also customize the software to create extra noises/dings when hitting certain markup. (So italics can get a "[beep]" and emphasis can get a "[boop]".)

How do you think blind web developers read HTML?

[JSWolf]

Originally Posted by Hitch

I love Practical Typography!

Hitch

But I do have to disagree with some of what they say especially the line height section. The optimal line height is no line height and not 120-145%. That way, if the software being used allows us to adjust the line height, we can do it to what we like.

[bookman156]

There is no way that a barrister in 1795 or 1805, etc. would use "begs the question" that way.

That one's often flagged up to use only in a legal context as some tend to misunderstand the meaning. But why wouldn't a barrister then use that phrase? It's from Latin after all. (Or, you mean they wouldn't get it wrong then. No, I guess not.)

My favourite pet hate is 'centres around'/'centers around'. You can't centre around, you can only centre on. BBC News gets this wrong all the time.

[bookman156]

By the way, Hitch, much of the bad justification I was talking about in the other thread turns out to be due to the MOBI, the AZW3 is much better justified. Not perfect but it makes me happier about possibly specifying no alignment.

[bookman156]

And that started ~15+ years of the "Replace all <i> -> <em> + <b> -> <strong>" overcorrection.

HTML5 fixed that mistake.

Yet it is still advised to not use the <b> tag in HTML5.

[bookman156]

The optimal line height is no line height and not 120-145%. That way, if the software being used allows us to adjust the line height, we can do it to what we like.

Setting line-height doesn't prevent adjustment of that on a Kindle Paperwhite, does it on a Kobo?

[Hitch]

Originally Posted by bookman156

By the way, Hitch, much of the bad justification I was talking about in the other thread turns out to be due to the MOBI, the AZW3 is much better justified. Not perfect but it makes me happier about possibly specifying no alignment.

If I'd focused on what you'd earlier said about MOBI (KF7) versus AZW, KFX, etc. I would have realized what you meant. To be fair to Amazon, the typography under ET is really quite good--remarkable, when you and I think about what goes into it.

The Calibre-AZW3 is okay. it's not up to the post-PW standards (Publishing Workflow, which means, in short, what happens when you click "save and publish" in KDP), but it's improved, yes.

Hitch

[JSWolf]

Originally Posted by bookman156

Yet it is still advised to not use the <b> tag in HTML5.

Forget what's said about hTML5. What's said about ePub 2 and ePub 3?

[JSWolf]

Originally Posted by bookman156

Setting line-height doesn't prevent adjustment of that on a Kindle Paperwhite, does it on a Kobo?

It can yes.

[bookman156]

Forget what's said about hTML5. What's said about ePub 2 and ePub 3?

EPUB3 uses HTML5.

[JSWolf]

Originally Posted by bookman156

EPUB3 uses HTML5.

That's not the point. The point is what are the best practices for ePub 2 & ePub 3.

And if the program reading the book sees <strong>, it could be reading it differently then <b>. So you don't want to do away with <b> and you'd want to only use <strong> where appropriate.

[bookman156]

And if the program reading the book sees <strong>, it could be reading it differently then <b>.

I always specify how <strong> and <em> should be rendered in the CSS. As I said before, I only use bold in h tags, so specify that there.

[JSWolf]

Originally Posted by bookman156

I always specify how <strong> and <em> should be rendered in the CSS. As I said before, I only use bold in h tags, so specify that there.

So you are doing it wrong. For example, New York Times should be <i> and not <em>. It's not something you want emphasized.

[bookman156]

For example, New York Times should be <i> and not <em>. It's not something you want emphasized.

As I said before, actually you should be using the <cite> tag for that. I also specify that as italic in the CSS.

[bookman156]

As I also said before, italic is a form of emphasis, just that it covers different types of emphasis. If something is italic, then it is visually emphasised, even if it is the title of a work. But it would be better to use <cite> for works. There is perhaps a use case for <i> for foreign words, but equally foreign words in English text are naturally emphasised. So overall I don't think anything more than <cite> and <em> are needed, and you have <strong> if you really want to shout. The <i> tag is a relic that people are in indecision over.