CODEWITHSUNDEEP
htmlmarkup
Alexis Pister
Alexis Pister

Reputation: 499

What is the difference between the span and the i markups in HTML

This is what the Mozilla documentation say about the i markup :

The HTML Idiomatic Text element (i) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.

And about the span markup :

The HTML span element is a generic inline container for phrasing content, which does not inherently represent anything.

What I understand is both are for differentiating bits of text inside larger paragraph. What am I missing ?

Upvotes: 0

Views: 1585

Answers (4)

Imtiaz Zaman Nishith
Imtiaz Zaman Nishith

Reputation: 490

span is a generic container. It is more like div. But div is a block-level container where span is an inline container.

Use the <i> element only when there is not a more appropriate semantic element, such as:

<em> (emphasized text)
<strong> (important text)
<mark> (marked/highlighted text)
<cite> (the title of a work)
<dfn> (a definition term)

Please see the reference1 or referance2.

Upvotes: 1

Rich N
Rich N

Reputation: 9475

There are theoretical differences, but there's one massive practical difference. The i markup means the contained text displays in italics in the browser, span does nothing on its own except, as you say, 'differentiate bits of text':

<p>With &lt;i&gt;:  <i>Hello World</i></p>
<p>With &lt;span&gt;: <span>Hello World</span></p>

Upvotes: 2

Kostya Liepieshov
Kostya Liepieshov

Reputation: 11

In html there is a paradigm of semantics of html tags (https://www.freecodecamp.org/news/semantic-html5-elements/). span is a general container without any meaning for text blocks. The same as div for blocks. But i has a semantic meaning.

Upvotes: 1

deceze
deceze

Reputation: 522024

i has a meaning, span doesn't. A span merely allows you to put a span of text into its own separate container element. By default that means nothing, but you can ascribe any meaning to it you want. Typically you'd give that span a class and apply some specific style to that class.

i's existing meaning you have described in your post. Screen readers for example might apply a different emphasis to idiomatic expressions than for standard text, and it's already styled italic by default.

Upvotes: 1

Related Questions