Logical Inline Tags vs. Physical Inline Tags
Read this article in SPANISH
Introduction
HTML is a relatively simple technology to learn, so easy in fact, that once people get just a very basic understanding, they jump into building web pages without much thought about learning anything more about the fundamentals of HTML. Because of this, many web designers are not taking full advantage of HTML and CSS. This lack of understanding of the basics, leads to problems that waste time, money, and generally makes web design more difficult.
... The differences between logical and physical tags is one of the fundamental concepts in HTML that, when understood, can have a huge impact on a web designer's way of doing things.
Logical Tags:
In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text's meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags, but the point to take away from this is that the strong tag implies that importance of that text. This has impact with search engines like Google who look for such tags to help figure out what the page is about.
There are many logical tags and they include:
<strong> : Strong - as above.
<em> : emphasize - usually renders (made to look like by the browsers) as italic.
<span> : a neutral inline container. - read about this distinction below.
<div> : a neutral block element. - read about this distinction below.
Logical tags, as mentioned above, have default ways in which browsers (like IE or Opera) render them. But it is understood that CSS should be used to give them their style, or in other words their 'look'.
Physical Tags:
Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include:
<b> : Makes the text bold.
<big> : Makes the text usually one size bigger than what's around it.
<font> : Used to apply a font-face (like Arial or Helvetica) and font-color.
<i> : Makes text italic.
Physical tags are more straightforward; <i> makes the text italic, <b> makes text bold and <font> is used to set the font face and color for the text.
So why use one or the other?
In a nutshell, physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Why? Well physical tags are just messy, tedious, and are more trouble than they're worth (for the most part). Rather than use physical tags to style your HTML pages, you should be using style sheets (also called Cascading Style Sheets or CSS). I think someone around here wrote some articles on CSS.? :)
Block Level vs. Inline tags
What is the point of 'inline' in the description of the tag categories?
In HTML, tags are either 'inline' or block-level elements. Block-level elements exist in their own virtual 'box' and are always followed by a carriage return (like hitting the 'enter' key after typing in some text). Inline tags (elements) become a part of the 'flow' of text in which they are inserted and have no 'box' around them and don't have the carriage return either. An example of a block tag is a <p> tag (paragraph) and an example of an inline tag is the <b> (bold) tag. Try the tags out and you'll see what happens to your page when you use <p> tags and <b> tags; all will be made clear once you see it for yourself.
So who cares! Right?
You should care! Once you understand the differences (it's really not that hard if you just give yourself a chance) and once you understand that you can use CSS to change elements from being block tags to inline tags and vice versa, you will discover tremendous power in your ability to lay out your web pages.
PS: if you want to master web design, check my popular training package: The Complete Web Designer.
If you liked the article and you want to see more let me know!
Stefan Mischook
Top