Tumblr WYSWIG editor formatting offset glitch raw demonstration text (the sourcing line is not part of the post)

01_tumblr_glitch_demonstration_text_raw.txt

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#i_vs._em

<i> vs. <em>

Some developers may be confused by how multiple elements seemingly produce similar visual results. <em> and <i> are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary. Another example for <i> could be: "The word the is an article".

02_tumblr_glitch_demonstration_text_with_italics_marked_via_asterisks.html

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#i_vs._em

<i> vs. <em>

Some developers may be confused by how multiple elements seemingly produce similar visual results. <em> and <i> are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for <em> could be: "Just *do* it already!", or: "We *had* to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The *Queen Mary* sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named *Queen Mary*. Another example for <i> could be: "The word *the* is an article".

03_tumblr_glitch_demonstration_text_glitched_after_saving.html

<div class="GzjsW">
<div class="k31gt"><p>&lt;i&gt; vs. &lt;em&gt;</p></div>
<div class="k31gt"><p>Some developers may be confused by how multiple elements seemingly produce similar visual results. &lt;em&gt; and &lt;i&gt; are a common example, since they both italicize text. What's the difference? Which should you use?</p></div>
<div class="k31gt"><p>By default, the visual result is the same. However, the semantic meaning is different. The &lt;em&gt; element represents stress emphasis of its contents, while the &lt;i&gt; element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use &lt;cite&gt;.)</p></div>
<div class="k31gt"><p>This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.</p></div>
<div class="k31gt"><p>An example for &lt;em&gt; could be: "Ju<em>st</em> do it already!", or: "<em>We </em>had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.</p></div>
<div class="k31gt"><p>An example for &lt;i&gt; could be: "T<em>he Queen M</em>ary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship nam<em>ed Queen M</em>ary. Another example for &lt;i&gt; could be: "The<em> wo</em>rd the is an article".</p></div>
</div>