This post covers introduction to Logical and Physical Markups.

Use Logical Mark-up!

• Using logical elements in your HTML gives you a far greater flexibility and greater chance of ‘future proofing’ your documents than physical mark-up.

  • tag versus the tag
    • visually may be same
    • emphasise this text in whichever way is deemed appropriate
    • tag tells us that the chosen section of text must be italic

• physical mark-up only addresses the appearance of content, logical mark-up addresses the semantics (or intended meaning and use) of content.

• Not all browsers and systems have the same capabilities and one of the key design principles is ‘reaching everyone’.

• Using the logical elements in HTML also gives greater potential for you to extract data from your web pages and use them somewhere else.

• • The tag is used when you are citing some material from a reference. It is a standard tag which does not require any attributes. Its syntax is as follows:

  • <CITE> Essential HTML Fast </CITE> is a cracker; you must buy it!
    

  • Most browsers render text contained within the tag as italic though some may produce quotation marks around the text.

  • The cite tag may not seem particularly useful at first glance. However, it enables you to search for material contained within those tags in order to create a global list of citations in no time at all.

  • This could be done using some kind of scripting language. Perhaps future browsers will have automatic content-tag detection mechanisms that allow compilation of the citation list without anyone’s intervention.

• • This tag is used when you are defining a term for the first time. It is most often used in well designed sites which have a reasonably technical content.

  • Its syntax is standard, and it requires no attributes.

  • The use of the tags in technical documents can allow the simple production of a comprehensive web site glossary or keyword index

  • <DFN>A new term</DFN>
    

  • The clarity and relevance of <CITE>Essential HTML fast</CITE> is one of its major selling points for those of us looking to get a foothold on the <DFN>World Wide Web</DFN>
    

• • The tag compares to the physical mark-up element in that in most cases it produces a bold-face font for its enclosed text.

  • Once again however, it provides different browsers with information to use if a bold face font cannot be rendered. Its syntax is as follows:

    • <STRONG>You must buy this book</STRONG>
      

• • The tag is used to display code fragments which should appear in a normal paragraph of text.
  • Most browsers render material within the tags in a monospaced font-i.e. a typewriter font. It is worth noting that the use of code is only particularly useful for very small chunks of code and normally not more than one line.
  • If you wish to display a section of a program listing, then the code tag is not appropFiate, as the spacing is collapsed.
  • In these instances it is far more effective to use the <PRE> tag which keeps the code in its correct format.

• and

  • These two tags were introduced to help people with the task of editing HTML documents. They are particularly useful for documents having more than one author, as text to be inserted is simply enclosed within the tags, whilst that to be deleted is enclosed within the tags:

    • <INS>This should be inserted</INS>, and a whole lot more before it's over, <DEL>whiist this stuff is rubbish</DEL>
      

  • Unfortunately these two tags are not supported by the major browsers yet, but support will arrive soon, and these useful tags can be tested then.

Physical Mark-up

• and
  • These two tags are probably the most often used, and hence the most often abused.
  • These tags should only really be used in straightforward documents where perhaps it does not matter too much if a particular browser cannot display the tag correctly (the counter-argument is that if it doesn’t matter how the text looks then you shouldn’t bother using the extra formatting tags anyway).
  • We urge caution in using and arbitrarily as you will make your site difficult to index, reference and display for all users.
  • Use and if at all possible.
• • This produces text in the teletype font, in monospace or fixed width font. Once again it is often abused and a source of frustration for designers and users.
  • Often spacing is not preserved correctly for text enclosed within the tags.
  • Before using this tag, think about the context in which you require things to be displayed in this font. You may find that the content is better suited to using a logical mark-up tag.
  • deprecated since HTML5. You can use or instead
• and
  • These tags simply enlarge or shrink the size of the text contained within them.
  • They can be nested to make your text progressively bigger or smaller.
• _and
  • Characters can now be set as subscript or superscript to the normally aligned text: This can be helpful for producing elementary mathematical equations.

Logical mark-up tags offer a great deal of flexibility in your structured documents whereas the physical styles don’t give you any information about the document content.

The use of logical styles becomes particularly important when considering the use of style sheets since tags are intended to provide information about the structure of the document.