×

Emphasizing: em and i tags [9/17]

The next two tags are used to emphasize a word or phrase.

The em tag is used to give to a word or phrase special emphasis critical to understanding a sentence.

For example, to emphasize that Muffin is not for eating dill (it prefers tuna), but just likes to chase it down the floor, we would make the following markup:

Instructor Muffin likes to <em>play</em> with dill.

The <i> tag is used to separate a word or phrase from normal text without emphasizing it. Usually it is used for names, terms or foreign words.

For example, to show that inspector is some special term, the markup would be as follows:

Muffin uses web browser <i>inspector</i> to find errors in his code.

Both tags are visually identical; they style text with italics.

Such a new meaning has been assigned to the <i> tag in HTML5. Before that, it was used for italicizing purposes only.

Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>em and i Tags </title> </head> <body> <h1>Problem: What&apos;s Wrong with Online Courses</h1> <p>Many trainees would like, beyond just learning the basics of a certain technology, to get a new profession or become more competitive in the job market. So they have to be capable to prove their expertise: to this end, consulting with tutors, completing final projects, and, ultimately, obtaining a certificate, is absolutely needed.</p> <p>Evidently, this is a traditional model of classroom education, but is it possible to do the same things online?</p> <p>You can <a href="http://habrahabr.ru/company/htmlacademy/blog/252843/" target="_blank" rel="nofollow">read the post in full</a> on the Habrahabr web site (in Russian).</p> </body> </html>
CSS
HTML Academy
  1. Let's experiment with emphasizing: in the first paragraph, use the em tag for the word "profession"
  2. and the word "competitive" (also in the same paragraph).
  3. Use the i tag to style "online" in the second paragraph.
Theory Check Next