Lesson 3: bold, italic, underlining, nesting tags
SITE MAP | by
Let's go back to a plain old screen.
<body> Something really cool </body>

We can make things bold.
<body> Something really <b>cool</b> </body>

What we are (more or less) telling the browser is: at the <b> start making things bold, and at the </b> stop making things bold. Or, maybe a little more accurately, we are suggesting to the browser that all text contained within the <b> element should be rendered bold.
The same principle applies to italics...
<body> Something <i>really</i> <b>cool</b> </body>

...and underlining.
<body> <u>Something</u> <i>really</i> <b>cool</b> </body>

Back again to a plain screen.
<body> Something really cool </body>

We can use tags in combination if we wish...
<body> Something really <i><b>cool</b></i> </body>

This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser (not to mention confusing yourself) they should be nested, not overlapping. Let me illustrate...
![]() |
<-- Overlapping tags.... bad |
![]() |
|
![]() |
<-- Nested tags.... good |
![]() |
|