Physical vs. Logical Markup
TIP: Know the difference between physical (visual) HTML tags and logical (structural) ones, and when to use one or the other.
There are two basic types of HTML tags. The logical tags represent the structure and meaning of a document, with only suggested renderings for their appearance which may or may not be followed by various browsers under various system configurations. The physical tags represent specific visual effects which are intended to be reproduced in a precise manner, and carry no connotation as to their semantic meaning.
The original implementation of HTML contained almost entirely logical tags,
in accordance with the HTML philosophy that it was a structural language
rather than a screen-layout description. A few physical tags slipped in
even back then (such as
HTML style advisors have given varied and conflicting advice about whether to prefer the use of logical or physical tags. Hard-line purists may say to use only logical tags at all times, while some graphical designers advocate using only physical tags (because the logical ones have the tendency, distressing to those of a visual mindset, to be rendered in widely varying ways). I don't follow either rigid standard; rather, I support using whichever tags make sense for the particular application. Nowadays, these sorts of conflicts don't break out nearly as much, since many of the newer generation of developers, whether logically- or graphically-oriented, has learned to use Cascading Stylesheets to keep the HTML clean and simple, and the presentation separated in the stylesheet.
When to Use Logical Markup
Try to use the logical constructs whenever they fit the meaning you're
trying to convey. When you want a header at the top of a page,
There are a number of logical tags that have specific meanings that may
be useful to you.
If you get out of the graphical-artist mentality that demands pixel-perfect control of your site's rendering, you'll be able to convey your site's meaning in a sensible, platform-independent way. Try not to defeat the logic of HTML by avoiding the logical tags just because you don't like what some of them look like on some browsers. For instance, some designers don't like how paragraphs are rendered, so they use a line-break followed by an empty graphic to indent the next line. This sort of thing is not generally a good idea, as it's likely to degrade poorly under different environments (e.g., text-only browsing) and obscure the structure of your document for indexing robots. Learn how to use stylesheets, and you can define the look of the logical elements of your pages in a much more flexible way than you ever could with physical markup.
When To Use Physical Markup
When you want to achieve particular visual effects that don't fit into
the structural meanings of the various logical tags, then the physical
tags are a better way to do it than the abuse of logical tags for meanings
not intended. Thus, if you decide to boldface all your body text just
because it looks better to you that way, use the
TIP: Don't use
Don't misuse logical tags. Keep their actual meanings in mind, not just
their visual effects on your particular browser (which can vary on other
browsers). The meaning of
Unfortunately, those of you who use WYSIWYG editors like DreamWeaver, or let other programs like Microsoft Word or Microsoft Publisher extrude HTML, probably have no idea if these programs are generating physical tags, correctly-used logical tags, or abused logical tags. Most likely the code such an editor generates will not be very good as a logical representation of your content, since it is being generated in accordance with a graphical layout rather than a logical structure. All the more reason to learn HTML syntax and write your pages by hand in an ASCII editor!
The above article was written originally in the 1990s, with a few piecemeal revisions and updates later. The more modern HTML 5 Web (as of 2015) now affords even more opportunities to use logical identifiers in the Web. Cascading Style Sheets have long let you attach varying styles to logically named things through the use of the "class" and "id" attributes, but now you can even define custom HTML elements of your own, which can get their styling from stylesheets. It's only required that the new elements be named with a hyphen in them so as not to conflict with current and future "standard" HTML tags.
This page was first created 02 Aug 1997, and was last modified 08 Feb 2015.