XHTML Tutorial - Chapter 5: Bold and Italic text

Making words or phrases on your pages bold or italic is very easy once you understand how the tags system work, and I'm sure you do by now. Bolding is a method for making the text appear stronger, and so the <strong> tag is used. Italic text, often used for putting more emphasis on something, is achieved through the <em> tag.

These are the two main ways of altering the look of the text on web pages. Another one is to change its color, but we're not going to get in to that here. Since this is an XHTML tutorial, we will try to leave any such styling to the CSS, or Cascading Style Sheets. I have written another tutorial on CSS that I also recommend you take a look at once you've gotten the hang of the HTML.

Let us instead just look at a quick example of the bold (strong) and italic (em) tags:

<html>
  <head>
    <title>Bold and Italic example</title>
  </head>
  <body>
    <p>
      This short example doesn't need any header, as we are only
      making the text <strong>bold</strong> and <em>italic</em>.
    </p>
    <p>
      <strong><em>Oh and look, this text is both!</em></strong>
    </p>
  </body>
</html>

As you notice on the end, several tags can also be combined to apply both of their properties to the content inbetween. Always remember to stick with the parent / child order though, and close the <em> before you close the <strong>, since the <strong> is the "outer" element of the two, containing the <em> tag.

If we had done it this way instead:

<strong><em>Oh and look, this text is both!</strong></em>

...then that would not be valid XHTML.





A brief history lesson: <b> and <i>

There are also a set of alternative ways for achieving what <strong> and <em> does, being the tags <b> and <i>. Logically enough, these are short tags for bold and italic text formatting. There is also another one, <u> for underlined.

These however, even though they are frequently used all over the world wide web (heck, I have many sites still online that use them myself) they are considered a thing of the past, and not an encouraged practice. They will likely not even be supported in future versions of HTML.

The reason for this is simply that they're not as semantically correct. If you think about it, bold means specifically bold, and italic means specifically italic, but <strong> only tells us we want to make the text stand out - it doesn't limit us by specifing how. In the same way, <em> only means we want to emphasize something, it doesn't say we need to do it by making the text italic. As such, they are much more flexible when we redefine them through CSS stylesheets.

Let's say we wanted to give our "stronger" text a blue color, while making our "emphasized" text stand out in green. If we redefined a bold tag ( <b> ) as making the text blue, it wouldn't make sense in the HTML markup. We would have made a liar out of the <b> tag, leading us to think it makes text bold when it actually only changes its color! If the tag is called <strong> or <em> however, it makes equal sense regardless of how we choose to make the affected text stronger or more emphasized. It is "semantically correct", regardless of method!

And of course, underlining words in content just to make it stand out is simply a bad practice for the reason that anybody who sees it will mistake it for a clickable link and get confused. If you still want to manually force an underlining without resorting to the old, ugly <u> tag however, you can always use the CSS property text-decoration: underline;





< Previous: Headers and Paragraphs

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl