Table of Contents
- Hello World!
- Understanding Tags and Structure
- Whitespace in XHTML
- Breakdown of a Tag
- Attributes
- Paragraphs and Line Breaks
- Validation and Browser Tools
Basic Structure
Logical Styles
Earlier we learned about physical styles. I also tabled the discussion of logical styles at that time, and we will now discuss them.
A physical style physically changes the text. <b>old makes text bold. <i>talic makes text italic. And so on. However, why would we make something bold, italic, bigger, smaller, or teletype? We use formatting because it can convey additional information about the content. Problem is, a <b> tag doesn't really convey the meaning or connotation you were trying to get across; it merely makes the text bold.
This is where logical styles come in. A logical style attempts to convey the meaning of marked up content, as well as formatting it. Logical styles seem very similar to physical styles, in terms of what they actually do to the marked off content:
<strong>: makes text strong.<em>: makes text emphasized.<cite>: marks off citations.<code>: marks off computercodefragments and commands.
The difference is subtle, but important to understand. The <i> tag literally means, "italicize this text."
The <em> tag literally means, "emphasize this text."
What does "emphasized text" mean, exactly?
Most browsers interpret it to mean, "italicize this text."
So in practice, <em> usually leads to the same result
as <i>. However, there are a couple of points to
consider:
When a browser interprets
<em>as "italics", that's just a convention. A browser doesn't have to interpret the tag that way; "italics" means italics, but "emphasis" could mean anything, really.This is important because using a CSS stylesheet, we can change the behavior of tags across an entire website. One of my favorite websites uses CSS to change behavior of all
<strong>tags to mean "all caps text." While mucking with the definitions of logical style tags is, to a certain extent, encouraged, it is extremely bad form to change the definition of a physical style tag. Bold should be bold; changing the definition of the<b>tag doesn't make a lot of sense, if you think about it.
Semantic Markup
Using logical style tags where they should be used instead of using only physical style tags is an example of semantic markup. In a nutshell, semantic markup means writing code that is, more or less, readable to humans as well as browsers. The advantage of writing semantic markup is that it is easier to come back to markup you may have written weeks, months, or even years ago because the code still makes sense. Logical use of whitespace and indentation is another example of semantic markup.
Another great reason to write semantic markup is that it means your markup will adapt to other stylesheets effortlessly. This makes moving markup between projects and authors much easier, as the markup will always take on the styles specified by the local stylesheet. We will discuss stylesheets in much more depth soon.
Writing semantic markup is another mark of the careful and dedicated web designer, and while it may seem like just a technicality, the web would be a much friendlier place if all (X)HTML was written logically and semantically.
