Lesson 3: bold, italic, underlining, nesting tags


Let’s go back to a plain old screen.

<body>
Something really cool
</body>
Something really cool

We can make things bold.

<body>
Something really <b>cool</b>
</body>
Something really cool

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>
Something really cool

…and underlining.

<body>
<u>Something</u> <i>really</i> <b>cool</b>
</body>
Something really cool

Back again to a plain screen.

<body>
Something really cool
</body>
Something really cool

We can use tags in combination if we wish…

<body>
Something really <i><b>cool</b></i>
</body>
Something really cool

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

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s