This chapter is going to cover most of the physical markup tags available in HTML. What do I actually mean with physical? These are tags which change the look of texts explicitly by specifying exactly what you want them to look like in the browser window. Example. you can specify if you want a line of text to be bold or italicized. There are also logical markup tags which are different from physical markup tags. Logical markup tags identify text types and leave it up to the browser to decide the most appropriate way to display them. You will see how this is done in the next chapter. Let's continue with our discussion with physical markup tags.
The three basic ways of physically marking up a text are bold, italic and underline. To make a text bold, you will use the <B> tag. To italicize or underline a text, you will use the <I> and <U> respectively. All of the three will need their own respective closing tags. The closing tags are </B>, </I> and </U>. Physical markup tags can be combined to produce a different effect. For example, you can combine the <B> and <I> to markup a text so it will look bold and italicized. This implies to <U> too. Let's look at listing 4.2.
<HTML>
<HEAD>
<TITLE>Listing 4.2 Simple physical markup tags</TITLE>
</HEAD>
<BODY>
<P>
<B>This text is in bold.</B>
<P>
<I>This text is in italic.</I>
<P>
<U>This text is underlined.</U>
<P>
<I><B>This text is in bold and italic.</B></I>
</BODY>
</HTML>
Figure 4.2
Click on the link to see the result of Listing 4.2. Line 1, 2 and 3 used a single tag to markup the line of text. However, line 4 used a <I> and a <B>. If you see the result in Figure 4.2, you will see that line 4 is boldface and italicized. This is the effect of combining two tags together. Note that how the closing of tags is done. The inner tag will be closed with its respective closing tag before the outer tag is closed with its own closing tags. You cannot close the outer tag first, then the inner tag. So, <I><B>text goes here</I></B> is wrong! Your HTML document might look very weird in some browsers if you close the tag incorrectly. So, please close the tags correctly.
Try to avoid using the <U> tag if possible. This is due to an underlined text is usually a link. If you underline a text and it isn't a link, this might confuse people who are viewing your page. Using the <B> on heading might not produce any result since heading are already in bold.
As I said earlier, all whitespaces that you see in the text editor will only be treated as one whitespace in the HTML page. This mean if you have three spaces between the word 'I' and 'am', you will only see one whitespace between them in the browser. If you still don't understand, let's look at the following example:
<HTML>
<HEAD>
<TITLE>Listing 4.3a HTML pages only have one whitespace</TITLE>
</HEAD>
<BODY>
<P>
How are you? I am fine.
</BODY>
</HTML>
Figure 4.3a
Follow the link to see the result of Listing 4.3a. Surprised! The whitespaces between the words are compressed to one whitespace only. What happen? The browser will treat all your whitespaces as one whitespace only. So, if you want to have many whitespaces betweeen words, you just cannot do it by pressing your spacebar many times.
One of the ways to make it possible to have many whitespaces between words is to use the <PRE> tag. If you want to know, <PRE> stands for Pre-Formatted. As its name implies, it let your text appears as how you type it when display in the browser window. Imagine you want to display some students information on the internet. You can use the <PRE> to format your table. Let's examine the Listing 4.3b below:
<HTML>
<HEAD>
<TITLE>Listing 4.3b Using The <PRE> tag</TITLE>
</HEAD>
<BODY>
<PRE>
No. Name Sex Age
--- ---- --- ---
01 John M 17
02 Mary F 16
03 Cindy F 18
</PRE>
</BODY>
</HTML>
Figure 4.3b
View the result by following the link to Figure 4.3b. The text appears as how it is. All the whitespaces remains, the browser did not compress all the whitespaces into one whitespace as you have seen earlier. This is the effect of the <PRE>. So, now you have a way to control your HTML document layout. Note, the <PRE> is not the only way you use to create a table like this, you can use the <TABLE> instead. However, we won't discuss about the <TABLE> tag at this moment.
Instead of regular paragraph, quotations are also very popular on the internet. <BLOCKQOTE> is the physical markup tag which is used to make quotations paragraph. The effect of this tag is that it pushes the text enclosed by it towards the right. You can also nest the <BLOCKQUOTE> so that the text within is more towards the right then the text outside. Still vague? Okay, let's look at the following example:
<HTML>
<HEAD>
<TITLE>Listing 4.4 The <BLOCKQUOTE> markup tag</TITLE>
</HEAD>
<BODY>
Making quotation using HTML tags is very easy.
<BLOCKQUOTE>
You can just quote like this.
<BLOCKQUOTE>
Or quote even more like this.
<BLOCKQUOTE>
OR quote even more more like this!!!
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BODY>
</HTML>
Figure 4.4
Look at Figure 4.4, you can see the text quote more to the right when you nest the <BLOCKQUOTE> more. So, the 'You can just quote like this.' will be affected by <BLOCKQUOTEɚ and 'Or quote even more like this.' affected by <BLOCKQUOTE> <BLOCKQUOTE>! However, please try to avoid following what the previous example has shown. This type of way to make quotation is not recommended. The future browsers might not support this type of way to make quotation. Unless you think that you really need the <BLOCKQUOTE>, else don't use them.
Instead of the physical markup tags discussed above, there are still quite a number of phyiscal markup tags available. There are <STRIKE>, <S>, <TT>, <SMALL>, <BIG>, <SUP> and <SUB> available. All the tags must be closed using their own corresponding closing tags. Let's look into the tags one by one.
The <STRIKE>, as its name implies, strikes out text enclosed. The <S> is a shorter version of <STRIKE>. You can choose between the two options. However, the <STRIKE> is more widely supported than the <S>. But people rarely use these two tags that choosing either is really not that matter.
The <SMALL> and <BIG> are tags which change the size of the text enclosed. The effect of <SMALL> is to produce a smaller version of the text enclosed, while <BIG> produce the bigger version.
<SUB> and <SUP> stands for subscript and supscript respectively. They affect text by producing subscript or supscript effect. These tags are very useful when we are dealing with math or science equations. Finally, the <TT> means the typewriter text. <TT> affects tag by changing the style of the text enclosed into a typewriter's font type look.
Okay, it is time to see them in action. Look at Listing 4.5a below:
<HTML>
<HEAD>
<TITLE>Listing 4.5a Examples of <STRIKE> and <TT></TITLE>
</HEAD>
<BODY>
This text is normal.<BR>
<TT>
This text is Teletype(Typewriter type).
</TT>
<BR>
<STRIKE>
This text with strike out effect.
</STRIKE>
<BR>
<TT>
<STRIKE>
This text is Teletype and with strike out effect.
</STRIKE>
</TT>
<BR>
</BODY>
</HTML>
Figure 4.5a
Click on the link to see the result. The first line in Figure 4.5a is a normal line of text. No tag is used in here. However, the second line, I used the <TT> to enclose it. Therefore, the text is changed to typewriter type. I strike out the third line with the <STRIKE>, you can also use the <S> instead. The two tags will produce the same result. The forth line, I nested the <STRIKE> inside the <TT> to produce a double effects. The text enclosed is affects by the <TT> and <STRIKE> respectively.
If you still cannot understand. Please examine Listing 4.5a line by line and look at the corresponding result in Figure 4.5a. If you do understand and want to find out more about other physical markup tags, then proceed to the next paragraph.
As I had said before, <SUP> and <SUB> are two very useful tags when we are dealing with math and science equations. However, to make text affected by the <SUP> or the <SUB> to be displayed as more supscript or subscript, you will need the <SMALL>. By using <SUP> or <SUB>, text appears to be a little large, so by nesting <SUP> or <SUB> with the <SMALL> tags, text enclosed will be displayed to be more like supscript or subscript. Let's consider the following example:
<HTML>
<HEAD>
<TITLE>Listing 4.5b The remaining physical markup tags</TITLE>
</HEAD>
<BODY>
<P>
This text is normal.<SMALL> However, this is small.</SMALL><BR>
<BIG>And this text is big.</BIG>
<P>
Let's see some effects of subscript and subscript.
<P>
E=MC<SUP>2</SUP> is supscript without the small effect.<BR>
E=MC<SMALL><SUP>2</SUP></SMALL> is supscript with the small effect.<BR>
Water is H<SUB>2</SUB>O. This line is without the small effect.<BR>
Water is H<SMALL><SUB>2</SUB></SMALL>O. This line is with the small effect.<BR>
</BODY>
</HTML>
Figure 4.5b
Click on the link to see the result of Listing 4.5b. Observe the effect of <SMALL>, you will see it will enchance the effect of <SUB> and <SUP>. Try to use <SMALL> with these two tags if you will write equation like this in your HTML page.
Finally, we have covered all the physical markup tags. You can now proceed to the next chapter which we will discuss about the logical tags.