Chapter 5: Emphasized text and Strong Text

Emphasized Text

Dog, garn it! Sometimes, regular text just doesn't emphasize what you're trying to say. Fortunately, HTML has this covered. If you want to emphasize a section of text, you wrap it in <em> tags. Em for emphasis. Doing this will make the inclusive text appear italic (slightly slanted).

<p>That Jimmy... I <em>hate</em> that kid!</p>

Outputs

That Jimmy... I hate that kid!

Strong Text

Please remember to sign the guestbook! When you want the next level of emphasis, when you really feel strongly about something, you need to wrap that part of the text in <strong> tags. The strong tag will make text appear bold.

<p>I simply <strong>refuse</strong> to sign people's guestbooks thank-you-very-much!</p>

Outputs

I simply refuse to sign people's guestbooks thank-you-very-much!

Bold and Italic - What NOT to do

Unfortunately, many web developers like to make use of two non-official, outdated elements. These are the <b>, for bold, and <i>, for italic elements. The problem with these elements is that they are suggesting that the text should look a certain way when rendered. They also don't actually represent any specific level of emphasis. The <em> and <strong> tags are the correct way to do it. The browser sees these tags and produces italic and bold text because those tags are suggesting emphasis!

Remember, HTML is about structure and content, not about presentation.

Bonus Element!

I'm feeling extra kind at the moment so I thought I would teach you about an extra element ^_^. This is, the <code> element. When you want to include example code in your web-page, use the code element.

<p><code>computer, kill Flanders</code></p>

Outputs:

computer, kill Flanders

Most browsers will output a "computer-style" font like this in order to show that the outputted text is example code.

Try emphasising your own opinions in the tryout editor for this chapter, and then proceed to the end of chapter quiz.