• Home
  • Sustainable Design
• A Sustainable Web?
  • A Foreign Concept
  • Glossary of Terms
• Design Concept
  • The Importance of Visual Design
  • Design Impact
  • Potential Harm of Good Design
  • Getting Started Designing
• Material Treatment
  • You Are How You Treat
  • Naming Files and Folders
  • Naming for Indexing and Clarity
  • Naming for Versioning
  • Mistreating Your Images: 7 Deadly Sins
• Document Structure (XHTML)
  • The Concept of a Markup Language
  • A Brief History of HTML
  • Basic XHTML Rules
  • XHTML DOCTYPE Declarations
  • XHTML Tag Types: Block and Inline
  • The Basic XHTML Tag Set: Block-level Tags
  • The Basic XHTML Tag Set: List Tags
  • The Basic XHTML Tag Set: In-line Tags
• Advanced Document Structure
  • Working with Classes and IDs
  • Classes in Action
  • IDs in Action
• Document Presentation (CSS)
  • Introduction to Cascading Style Sheets
  • Some CSS Vocabulary
  • CSS Selectors
  • CSS Properties: Text and Font
  • CSS Properties: Margin, Padding, and Border
• CSS for Design and Layout
  • Background Images
  • Image Replacement Techniques
• Introduction to PHP
  • What is PHP?
  • Repeating Content Across Pages

The Basic XHTML Tag Set: In-line Tags

Most of the in-line tags are used for slight semantic changes to text. For example, tags that make a text bold, underlined, or italicized; or tags that allow us to link or explain what an acronym means.

Bold (<strong>), Italic (<em>), Underline (<u>)

With the exception of underlining (which should be avoided entirely, because it may confuse users with links and because it makes text rather difficult to read), we use tag names "strong" and "emphasis" rather than the more common typographic terms "bold" and "italic". Why? Because "bold" and "italic" are visual, not semantic, ideas. Although most browsers will render "strong" in boldface type, and "emphasis" in italics, we can change that completely using cascading style sheets.

Because these are inline tags, we need to use them in some block-level tag. For example:

Which will render in a browser something like this:

This is some paragraph text, this part emphasized, this part strong.

The Cite Tag (<cite>)

Although it's tempting to use <em> around titles (since we're used to italicizing them because of MLA and APA style), there's a structural tag, <cite>, that accomplishes the same thing (again, with CSS we can choose to treat <cite> however we'd like visually):

Which will render in a browser something like this:

I'm currently reading The Lord of the Rings.

The Anchor (Link) Tag (<a>)

The ability to link between any one page on the Web to any other page is, of course, the Web's unique power. The very simple anchor tag allows us to do this:

Which will render something like this:

Visit the official White House website.

The href (hypertext reference) attribute allows us to name a resource either on a different site, or on our own.

Now, what's important here is the text the anchor tag surrounds. It is best practice to avoid using text like "click here" for links; instead, come up with a rich, descriptive bit of text so users know or can accurately guess where they'll end up if they do follow the link. With "the official White House website" above, is there any question of where you'll go if you click?

The Acronym Tag (<acronym>)

This is just one more handy inline tag. It is used to flash a definition of an acronym to browsers equipped to do so. For example:

This will render something like this (try mousing over "W3C" below and see if you get the acronym definition):

Tim Berners-Lee is the Director of the W3C.

Not all browsers, particularly non-standards-compliant ones, will display the text in the title attribute. However, title is a very helpful and powerful little attribute, which is not limited to the <acronym> tag. In fact, most tags can take title; your concern is whether or not a visitor's browser will show that text, so title information should be non-essential (although that's a problem for <acronym>).

Updated on Mon. Feb. 20 2006 at 12:14PM