CODEWITHSUNDEEP
csshtmlxhtml
Priyank Dey
Priyank Dey

Reputation: 1124

Which one should be use, semantic tags or presentational?

Can anyone please help with this?

Which type should I follow? Semantic tags or presentational?

The <i> (presentational) and <em> (semantic) give same result.

So which convention should I use and why? Is there any difference between them?

Upvotes: 1

Views: 114

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382474

At the dawn of the web before the CSS era, <i> was presentational, but its definition changed since. Today, both <i> and <em> are semantic and have different meanings.

The i element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.

source: http://w3c.github.io/html-reference/i.html

The em element represents a span of text with emphatic stress.

source: http://w3c.github.io/html-reference/em.html

If your use case is really one of those, use the appropriate one (<= this is "emphatic stress"). In future versions of your CSS you might decide to style them differently.

If it isn't and you're just interested in the italic rendering, use none of them but a custom class for which you define a styling in CSS.

Upvotes: 5

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

<i> — was italic, now for text in an “alternate voice”, such as transliterated foreign words, technical terms, and typographically italicized text (W3C:Markup, WHATWG)

<em> — was emphasis, now for stress emphasis, i.e., something you’d pronounce differently (W3C:Markup, WHATWG)

<i> vs. <em>

It is often confusing to new developers why there are so many elements to express emphasis on some text. <i> and <em> are perhaps one of the most common. Why use <em></em> vs <i></i>? They produce exactly the same result, right?

Not exactly. The visual result is, by default, the same - both tags render its content in italics. But the semantic meaning is different. The tag represents stress emphasis of its contents, while the tag represents text that is set off from the normal prose, such as the name of a movie or book, a foreign word, or when the text refers to the definition of a word instead of representing its semantic meaning.

more info

more info link 2

Upvotes: 2

Related Questions