Lesson 3A - Inline Tags

In this class we will cover the basic "inline" tags that have been used in HTML documents since the earliest days of web browsing. Although some of these tags are no longer the preferred method, you will find them in many existing web pages. You need to know about these tags because you will come across them throughout your developing career, but they are depricated (meaning a newer way to do the same thing was developed), and at some point in the not-so-distant future, browsers will no longer accept or recognize them.

I hesitate to teach these tags, because they are so easy to use for novice developers, and since all browsers recognize them now, there is a tendency to stick with them. I strongly encourage you to avoid temptation.

Here are nine inline tags that can be used to format text:

<b> and </b> make text bold.
<i> and </i> make text in italics.
<u> and </u> underline text.
<s> and </s> strike-through text.
<big> and </big> make text bigger.
<small> and </small> make text smaller.
<sub> and </sub> make text a sub-script.
<sup> and </sup> make text a super-script.
<tt> and </tt> make text monospaced (teletype).
Try it.

Cut the following and paste it into your sample.htm file:

This is <b>bold</b> text.<br>
This is <i>italicized</i> text.<br>
This is <u>underlined</u> text.<br>
This is <s>strike-through</s> text.<br>
This is text one size <big>bigger</big>.<br>
This is text one size <small>smaller</small>.<br>
This is <sub>sub</sub>-script text.<br>
This is <sup>super</sup>-script text.<br>
This is <mark>highlighted</mark> text.<br>
This is <tt>teletype</tt> text.<br>
This is <b><i><u>bold, italicized and underlined</u></i></b> text.

it would appear thus:

This is bold text.
This is italicized text.
This is underlined text.
This is strike-through text.
This is text one size bigger.
This is text one size smaller.
This is sub-script text.
This is super-script text.
This is highlighted text.
This is teletype text.
This is bold, italicized and underlined text.

Caution: On some browsers, the "smaller" or "bigger" tags may not change the text size. That is because the font chosen for these pages is not "true-type" and only has certain fixed sizes. If the small tag is applied to text that is 12pt, and this font-family has only 10pt and 12pt, but no 11pt., the browser will try to make the text 11pt anyway. If it can not, it will revert to a default scheme that rounds up or down as the case may be to the closest available size. You need to be aware of this if you plan to use this tag. You can write <small><small>smaller</small></small> and it will appear like so: smaller.

Also, different browsers have developed tags of their own. The tags described above have survived the browser wars as the most generic. Others you may see in old web pages include:

<strong> and </strong> which are the equivalent of <b> and </b>
<em> and </em> (emphasis) which are the equivalent of <i> and </i>
<cite> and </cite> which are also the equivalent of <i> and </i>
<dfn> and </dfn> (definition) which are yet again the equivalent of <i> and </i>
<ins> and </ins> (insert) which are the equivalent of <u> and </u>
<del> and </del> (delete) which are the equivalent of <s> and </s>
<strike> and </strike> which are the equivalent of <s> and </s>
<code> and </code> which are the equivalent of <tt> and </tt>
<kbd> and </kbd> (keyboard) which are also the equivalent of <tt> and </tt>


In this lesson, we learned about these inline tags:
<b> and </b> (also <strong> and </strong>)
<i> and </i> (also <em> and </em>, <cite> and </cite>, and <dfn> and </dfn>)
<u> and </u>
<s> and </s> (also <strike> and </strike>)
<big> and </big>
<small> and </small>
<sub> and </sub>
<sup> and </sup>
<tt> and </tt> (also <code> and </code>, and <kbd> and </kbd>)
By now, your sample.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 2C White Space   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 3B Depricated Block Tags

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2024, by Bill Sanders, all rights reserved.
This domain had 3,350 different visits in the last 30 days.
http://sandersongs.com/HTMLcourse/Lesson03A.php
This page was last modified on our server on 11 Jul 2021
and last refreshed on our server at 3:30 pm, UTC
This file took 0.03504 seconds to process.