Physical tags tell the browser what you want the text enclosed to look like while logical tags describe the function of the text in the document enclosed. Logical tags are not use to describe the appearance of the text enclosed, but let the browser decide how to display the them. This simply means that text enclosed in physical tags will look the same in all browsers while text enclosed in logical tags might look different from browser to browser. But, if all the effects of logical tags on the appearance of text are identical to physical tags, why do we need to use logical tags instead?
Let's consider the following line, <STRONG>HELP!</STRONG and <B>HELP!</B>. Using the logical tags, <STRONG>, means your code will be more understandable if you or other people read them. The <STRONG> described the importance of the text enclosed while <B> just tell the browser to display the text enclosed in boldface. If someone is going to read your code, he will pay more attention to the text enclosed in <STRONG> instead of <B>. This is because if you just use <B>, he will think that you want to make the text to be displayed in bold only, instead of it is an important text.
No one can predict the future, who know if HTML that we are using now will be used for another purpose other than producing webpages to be displayed on the internet? Imagine if there is a piece of software in the future which will be used to read out the text in your webpage instead of the users looking at them. By using logical tags, like <STRONG>, the program might alert the user telling him that the text enclosed is important. So it is up to you to choose between logical tags and physical tags. You can skip this chapter and proceed to the next chapter if you want. Still reading? Okay, let's get started now.
In most browsers, the <B> can be replaced by <STRONG> while <I> can be replaced by <EM>. However, this is not always the case. You cannot predict what it will be looked like in the browser window. But most of the time a <STRONG> will be displayed as bold while <EM> be displayed as italic. Let's examine the following code:
<HTML> <HEAD> <TITLE>Listing 5.2 Basic logical markup tags</TITLE> </HEAD> <BODY> <STRONG>Usually will be displayed in bold.</STRONG><BR> <EM>Usually will be displayed in italic.</EM><BR> <STRONG><EM>Usually will be in bold and italic.</EM></STRONG> </BODY> </HTML>Figure 5.2
Click on the link to see the outcome of Listing 5.2. Most browsers will display text enclosed in <STRONG> as boldface and <EM> as italic. When combining both of them, you will get a double effect.
There are three logical tags which allow you to display the abbreviations of words in the browser window while the longer definition of the words are kept in the HTML code. The tags are <ABBR>, <ACRONYM> and <DFN>. Usually you will enclose abbreviations with the <ABBR> tag, acronyms with <ACRONYM> and words that can be further define with a <DFN> tag. Let's see them in action.
<HTML> <HEAD> <TITLE>Listing 5.3 Much More Readable Code</TITLE> </HEAD> <BODY> <P> <DFN title="A country in Asia which is just above Singapore">Malaysia</DFN> or <ACRONYM title="Malaysia">MY</ACRONYM> is one of the countries in <ABBR title="South East Asia">SEA</ABBR>.<BR> </BODY> </HTML>Figure 5.3
Click on the link to see the result. If you are using Internet Explorer 4.0 or later, you will see a pop-up definition of 'Malaysia' and 'MY' if you move your mouse to point to it. Furthermore, Internet Explorer 4.0 will italicize the word enclosed in <DFN> and </DFN>. You will include the longer definition of the abbreviations you used in your HTML page. If people is to read your code, they will know what is the abbreviation that you are refering in your HTML page.
This text won't discuss all the logical tags available, instead some most of them will be discussed. Let's look into some other logical tags available. Let say you are a programmer and you want to show your source code in HTML format. The <KBD>, <SAMP> and <CODE> are tags available to you. Let's look into the following example:
<HTML> <HEAD> <TITLE>Listing 5.4 A Programmer Guide</TITLE> </HEAD> <BODY> <P> My program source code is as follow: <P> <CODE> CLS<BR> INPUT A<BR> PRINT A<BR> END<BR> </CODE> <P> SAMPLE RUN: <P> <SAMP>?</SAMP> <KBD>5</KBD> <P> <SAMP>5</SAMP> </BODY> </HTML>Figure 5.4
Click on the link to view the result of Listing 5.4. Using these logical tags, the text enclosed are shown differently from normal text. <CODE> are used to enclose your actual source code. While <SAMP> are used to enclose printer or screen output. Finally, the <KBD> are used for keyboard input by user.
Other logical tags like <ADDRESS>, <INS> and <DEL> are also available. Usually people will enclose address within the <ADDRESS> tag. In some browsers, text enclosed with <INS> will be shown as underlined while <DEL> as strike out. But this is not always the case. Therefore, if you are planning to use these two tags, do nest them with <U> and <STRIKE> in case your site visitors are not using browsers that support these two tags.