• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
 
Designing a website

Step 2 - Designing your site

Html & xhtml

HTML, or Hypertext Markup Language, is used to define the structure of a web page. Every page on the web uses HTML (or its close cousin, XHTML) to tell the browser what the page contains and how it should be laid out.

Understanding xhtml

Over the last few years, a massive transition got underway from the old way of designing and building sites to the new. The old way was improvised and based entirely on the site's appearance. (HTML tags were used in ways that were never intended. The new way is structured and logical. And while it limits some of your immediate design options, it builds your site to last.

 

XHTML—which will replace its close cousin, HTML—is at the crux of this transition. The purpose of XHTML is to create a web that's more standardized and more compatible with other systems that might want to display the same content, such as screen readers for the blind, older backend database systems, and new upcoming technologies like handheld computers or web-enabled cell phones.

 

To achieve full compatibility with these (and other) systems, the ideal language is XML (extensible markup language), a flexible customizable markup language. But an immediate transition from HTML to XML is impractical, considering the billions of documents written in HTML.

 

This is why the W3C (the industry standards body) introduced XHTML, a transitional language similar to HTML that can pave the way to future.

Html & Xhtml: what's the difference?

To the untrained eye, XHTML looks exactly the same as HTML. In fact, XHTML is almost the same as HTML. It was designed to follow the grammar of HTML as closely as possible. The differences, you'll find, are in the details.

 

5 differences between html and xhtml:

  1. XHTML is case-sensitive. All tags must be written in lowercase. Certain declarations must be in uppercase.

  2. XHTML is persnickety about closing tags. All tags must be closed—even those, like <img>, that lack closing tags in HTML.

  3. XHTML is persnickety about nested tags. All nested tags must be closed in reverse order to how they were opened. The tag opened first must be closed last.

  4. XHTML is persnickety about attribute values. All attribute values must be placed in quotes (such as <link color="blue"), and all attributes must have values.

  5. XHTML uses slightly different declarations to open the document.

As you can tell, XHTML is more picky and less forgiving than HTML. It introduces some new rules and rigorously enforces the existing ones.

 

What you need to know about xhtml

 

What it is:

XHTML (extensible hypertext markup language) is a modified version of HTML that is compatible with XML-based systems. XHTML takes web pages beyond the web browser, allowing them to be interpreted by a wider range of applications and systems.

 

How it's used:

Like HTML, XHTML is used to create web pages. But this newer markup language structures the text and elements so they can be displayed in a browser and understood by other applications.

 

Why it's loved:

XHTML makes web documents readable and usable by a wide range of other applications, including old content systems that pre-date the web, specialized display systems like screen readers for the blind, and future technologies—including those in handheld computers—that are just evolving.

 

Why it's hated:

XHTML is persnickety and precise, requiring more documentation and specific formatting than HTML.

  • XHTML is unforgiving of small mistakes. A tiny error can make a document invalid.

  • It's time-consuming to convert existing HTML documents to XHTML.

  • XHTML relies on stylesheets for design (instead of tables or font tags). And stylesheets don't work as well with certain types of designs.

 

Transitioning to XHTML?

A List Apart's XHTML tutorials

http://www.alistapart.com/stories/indexHTMLXHTML.html

New York Public Library's XHTML style guide

http://www.nypl.org/styleguide/

 

Buy these books!

HTML & XHTML: The Definitive Guide

By Chuck Musciano & Bill Kennedy

(O'Reilly, $34.95)

Designing with Web Standards

By Jeffrey Zeldman

(New Riders, $34.95)

Transitioning to xhtml

For some sites, the transition to XHTML is straightforward. It may be the simple (if time-consuming) matter of revising your current HTML to follow the new rules more exactly.

 

But not all sites have it this easy. If your site design depends heavily on tables and font tags, there's no quick fix. You'll need to revamp the structure of the pages and learn how to accomplish visual effects using stylesheets. You may find that your existing design simply doesn't translate.

 

In this case, you may want to make a gradual transition: First converting from HTML to XHTML, but keeping a tables-based layout. Or you may decide to jump in all the way with a complete redesign, as Wired News did in late 2002.

 

So depending on your site, the transition to XHTML may be a bit painful. New shoes always hurt, as they say. But the transition is inevitable. And the benefits of converting far outweigh the inconvenience of change. So if you're experiencing a lull in development or launching a brand new site, take the opportunity to make the transition. Sooner or later, you're going to have learn the new way.

 

Converting html to xhtml

 

The transition from HTML to XHTML need not be as painful as you'd think. It's all in the details:

  • Close every tag. In HTML, you can leave certain tags, like <p>, unclosed. In XHTML, all tags must be closed—in this case, with a </p> tag.

  • Close even "empty" tags. In HTML, certain stand-alone tags—like <img>—lack closing tags. But even these tags must be closed in XHTML by inserting a space and a slash into the tag itself: <img />.

  • Use only lowercase letters. HTML lets you write tags in capital or lowercase letters (<IMG> or <img>) but XHTML tags must be lowercase.

  • Assign a value to every attribute. In HTML, some attributes don't take values, like the frames attribute noresize. In XHTML, they must. You simply repeat the name: noresize="noresize".

  • Use quote marks around values. In HTML, the quotes around value attributes (color= "blue") are optional. In XHTML, they're required.

  • Avoid non-standard tags. HTML documents can include proprietary tags, like <font>, but XHTML documents can't.

  • Add new introductory "declarations." HTML documents start with the <html> tag. But XHTML requires a little more explanation. You'll need an XML declaration, which identifies the version of XML used, a <!DOCTYPE> declaration, which identifies the markup language, and a modified <html> tag. A page that uses XHTML 1.0, in English, with the Western Roman alphabet, will start like this.

 

For a complete transitional guide:

"Better Living through XHTML" by Jeffrey Zeldman:

http://www.alistapart.com/stories/betterliving/

 

Back
to Top