Free HTML course - Physical tags

Text in HTML code can be dressed up in various ways so that it's displayed differently by the browser. Text can be made Bold, Underlined, Italicized, Struck-through etc. Moreover, you can make text both italicized and bold at the same time.

There are many tags that perform such embellishments on text. These tags can be either Physical Tags or Logical Tags.

So what is the difference between these?
Physical tags define how the text should be displayed in the browser. They control the Physical characteristics of the text.
Logical Tags on the other hand indicate the 'type' of content they enclose. They do not determine the display of the text and the browser is free to set the presentation.
More on these differeneces in the next session.

Physical Tags
There are 10 physical tags each requiring a closing tag:

• <I> Italics:   I am in italics
• <B> Bold:   I am in bold
• <U> Underline:   I am underlined
• <STRIKE> Strikethrough:   I am struck!
• <SUP> Superscript:   My ^superscript
• <SUB> Subscript:   My _subscript
• <TT> Typewriter:   I am in typewriter form
• <BIG> Bigger font:   I am bigger
• <SMALL> Smaller font:   I am smaller
• <S> Strikethrough alternative:   I am also struck!

Tag Nesting
Physical tags can be nested i.e. one tag can be placed (including its closing tag) inside another. Let's test this:

<B>Some text</B> displays Some text which is in bold

Give more emphasis by underlining this text:

<U><B>Some text</B></U> displays Some text which is bold and underlined

Still more emphasis:

<I><U><B>Some text</B></U></I> displays Some text which is bold, underlined and in italics.

Just remember to always put the end tag of the nested element before the end tag of the enclosing element. I advise you to develop the habit of putting the end tag the moment you open a tag. It's a good practice and will prevent headaches since HTML files with <TABLE>, <TR>, <TD> (discussed in Advanced HTML Tutorials) etc. can become quite confusing.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.