One Week in Web Design 1

By | October 18, 2011

XHTML 1.0 Strict

Use Container Elements for High Level Inline Elements

You can’t have inline elements directly in the <body> of a page*, e.g.:
<body>Text in a page</body> or
<body><img src="photo.jpg" alt="Photo" /></body>

Therefore you need to use a block element as a container, e.g.:
<body><p>Text in a page</p></body> or
<body><div><img src="photo.jpg" alt="Photo" /></div></body>

*also <blockquote> and <form> (Transitional vs Strict Markup)

Always Set Attribute Values

An element’s attributes must always have a value even if the value is the name of the attribute, e.g.: <td colspan="2" nowrap="nowrap"> (p9, CSS and HTML Web Design)

Cite Used as an Element and an Attribute

When using <q> or <blockquote> you can use the cite attribute to reference the source of the quote, e.g.:
<q cite="http://www.w3.org/wiki/HTML/Elements/q">The <q> element represents some phrasing content quoted from another source.</q>

However, there is also a <cite> element which can be used as I have done throughout this post.

Design Best Practice

Use the alt Attribute Wisely

The alt attribute for <img /> elements needs particular consideration given its use by screen readers; it should convey the same information as the image, This does not always mean a description of the image – in some cases the longdesc attribute would be more suitable for this. A good example is a search button image of a magnifying glass or binoculars but with the attribute alt="Search" instead of alt="Binoculars" (Alt Attribute & SEO)

Set Image Dimensions to Improve User Experience

Always set the width & height of image to stop text being displaced and “jumping” around the page as images load:

  1. <img src="photo.jpg" alt="Photo" />
  2. <img src="photo.jpg" alt="Photo" width="200" height="200" />

Example 1 will validate but may still negatively impact user experience
Example 2 will also validate, but it will benefit the user experience

Set a <body> background-color to Improve Accessibility

Setting a default CSS background-color for the document <body> is beneficial for accessibility (p35, CSS and HTML Web Design)

Name Files Correctly to Maximise SEO

For SEO, file names should use hyphens instead of underscores since hyphens are interpreted as spaces by search engines.

Use <link> to Include CSS Files

The CSS command @import can be used instead of XHTML’s <link> tag to include CSS in older browsers. However, this causes additional overhead which will negatively impact user experience. It’s generally best to use <link> unless specifically designing for older browsers or devices (p41, CSS and HTML Web Design)

Sequence of <meta> & <title> in <head> Matters

The content-type <meta> tag should be the first element in the <head> section of the page otherwise some browsers don’t get the right encoding (p35, CSS and HTML Web Design). However, the examples in SitePoint’s Build Your Own Website the Right Way actually have the <title> element first.

Other Notes

The use of .htm as a file extension prior to .html originated from MS-DOS limiting file extensions to 3 characters or fewer. (p7, CSS and HTML Web Design)

Coursework

Demonstrating XHTML 1.0 Strict – the Structural Layer

Leave Your Comment