Antonio Wells. Web & Multimedia Designer

As a Web Designer, we sometimes get comfortable in old ways of designing, especially when trying to make your design cross browser compatible. This post is regarding some things to remember when making the leap toward designing with XHTML Strict document type.

Declaring your Document Type

When going from XHTML Transitional to XHTML Strict, remember to declare the proper document type. When you crack open Dreamweaver and open a new page, change the “Document Type (DTD)” to “XHTML 1.0 Strict”

Declaring your Content Type

Common character sets I use are “ISO 8859-1″ and “UTF-8″. ISO 8859-1 characters are typically used throughout The Americas, Western Europe, Oceania, and much of Africa. While UTF-8 is the standard encoding for XML. Choose a Content Type and stick to it.

Ending single reference tags properly

Sometimes I’m guilty of old ways of designing by dragging elements into the page using Dreamweaver or quickly hand coding tags without properly closing single element tags such as:

• meta
• link
• img
• input
• br
• hr

Here’s a sample of how they should be closed (note slash />):

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />

<link rel="stylesheet" href="css/styles.css" type="text/css" 
media="screen" />

<img src="logo_antonio-wells.gif" alt="Alt Text" />

<input id="text" type="text" value="" />

<br />

<hr />

Don’t Forget the Ampersand

In HTML, it should be "&" and not just the single "&".

Don’t Forget the ALT attribute in IMG tags

If you use an “img” tag in your design, please use the “alt” attribute or it will be flagged. Try to refrain from using the ”img” tag in the presentation layer, yet leave it to CSS in background images.

Referencing Javascript correctly

The “language” attribute is deprecated, therefore using it in a JavaScript reference tag is no longer needed.

Here’s a sample of how they should be referenced:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

Using the FIELDSET inside the FORM tag

XHTML Strict expects you to use a “fieldset” element within your “form” tag. Designers unfamiliar with how to control the presentational behaviour of this tag avoid it. See below a little CSS reference how to remove the border around a “fieldset” element:

fieldset {
border: 0px;
}

Properly nesting HTML

Bottomline, if you’re not properly nesting your HTML tags you wont validate. Using a tool like Dreamweaver will prevent this error from happening while designing. If you’re a hand-coder or hybrid-coder (someone who knows HTML… still uses a visual editor yet digs into the HTML and write some hand-code) like myself, you are subject to error.

Some common practices I engage when hybrid-coding is opening and closing a tag elements right away, then come back and fill in the tag. Another is making the code hierarchical to see the child elements easier. A great tool for helping with this is Visual Studiofor its IntelliSense and hierarchical code formatting capabilities. I use Control K+D a lot in that app

Deprecated Elements and Attributes

Some old school elements and attributes are hard to stay away from, but you must be slapped on the wrist and stay away from the below if you wish to validate. (Quick list courtesy of 24 Ways.org)

Some Elements:

• center
• font
• iframe
• strike
• u

Some Attributes:

• align (allowed on elements related to tables: col, colgroup, tbody, td, tfoot, th, thead, and tr)
• language
• background
• bgcolor
• border (allowed on table)
• height (allowed on img and object)
• hspace
• name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict)
• noshade
• nowrap
• target
• text, link, vlink, and alink
• vspace
• width (allowed on img, object, table, col, and colgroup)

The one I have problems with is the “target” attribute, there is no way for easily liking to a new window other than writing JavaScript to achieve the same effect. In my opinion, that is a step backwards in Web Standards. I do understand why it was depreciated, because it was initially related to calling frames within an ”iframe” set. I believe it should have been left alone or replaced. A useful practical use I use it for it on this blog when linking to other websites. I makes for a better user experience not to lose the page I reading while exploring referenced websites on a post. A workaround is to use browser features like “Open this link in a new tab”.

Lastly, please validate your design with the W3C Markup Validation Service. It gives advise on what’s wrong and how to fix it. Becoming disciplined in properly coding markup helps Web Standards, accessibility, and your own skill set marketability. Completely separate content from presentation… that’s what CSS is for… covered in the next Web Design Tip!