Quick Tips

The HTML5 placeholder attribute is not a substitute for the label element

The placeholder attribute is meant to give the user a nonessential hint before filling in a form field, not replace the label element.

Posted on April 9, 2012

The difference between width:auto and width:100%

If you’re using width:100% to undo a previously set width on a block level element, you should probably be using width:auto instead. Here’s why.

Posted on December 2, 2011

Make links focusable (or use real buttons)

When using a link to trigger JavaScript functionality, make it keyboard focusable by giving it a non-empty href attribute. Or use a real button instead.

Posted on April 20, 2011

Style visited and unvisited links differently (most of the time)

Browsers give visited and unvisited links different colours by default for a reason. Make sure you have a really good reason to make them look identical.

Posted on October 20, 2010

You can’t reliably detect screen readers

Since screen readers run alongside regular web browsers and have no user agent string of their own, there is no reliable way of detecting them.

Posted on September 6, 2010

Void (empty) elements and self-closing start tags in HTML

Two types of mistakes that I see every now and then are using end tags on void elements and using self-closing start tags on elements that can have content.

Posted on May 20, 2010

Whenever you use :hover, also use :focus

Neglecting to style :focus when you style the :hover pseudo-class can lead to minor inconvenience at best and complete inaccessibility at worst for non-mouse users.

Posted on April 1, 2010

Beware of “Web Page, complete” when saving HTML pages with your browser

Using the "Web Page, complete" (or similarly named) option when saving a page with a web browser will often change the markup.

Posted on February 1, 2010

Use the th element to specify row and column headers in data tables

When creating data tables in HTML, make sure to mark up the table structure properly, using the relevant elements and attributes available in HTML.

Posted on October 28, 2009

Use the optgroup element to group select options

When grouping the options of a select element, you can use the optgroup element with a label attribute instead of faking the groups with option elements.

Posted on October 5, 2009

Skip links need to be at least temporarily visible

When you add skip links to a site, do not hide them completely from sighted users.

Posted on September 29, 2009

(Almost) never add a reset button to a form

Think carefully before adding a reset button to a form. Is being able to reset the form so valuable that it is worth the risk of losing the data you have entered? Probably not.

Posted on September 1, 2009

Help screen reader users by giving data tables a summary

To help users of non-visual browsers understand data tables, use the table element’s summary attribute to describe the tables’ structure, especially for complex tables.

Posted on June 5, 2009

Do not remove the outline from links and form controls

Do not use CSS to remove the visual outline most browsers put on elements that have keyboard focus, and do not use JavaScript to immediately remove focus.

Posted on May 14, 2009

Don’t forget keyboard navigation

Remember that many people do not use a mouse to interact with the web, so you have to make sure that the sites or applications you build work independent of input device.

Posted on May 13, 2009

CSS background images cannot and should not have alternate text

There is no way to specify alternate text for CSS background images. This is not a problem since background images should be used for presentational purposes only.

Posted on May 6, 2009

Use the fieldset and legend elements to group HTML form controls

Only use the fieldset and legend elements to group logically related form controls, always use both elements together, and keep legend texts short.

Posted on April 30, 2009

Using an XML declaration triggers Quirks mode in IE 6

If you use an XHTML doctype with an XML declaration, Internet Explorer 6 will switch to Quirks mode and use an incorrect CSS box model.

Posted on April 28, 2009

Do not create empty links

Always make sure that any links you create have actual text content, or they will be unusable to some of your visitors.

Posted on April 15, 2009

Don’t use the title attribute for essential information

The title attribute can be used to provide advisory information about an HTML element, but do not use it for essential information since not all users will notice the title text.

Posted on April 7, 2009

Don’t duplicate link text in the title attribute

Repeating a link’s text in its title attribute serves no purpose for the end user. All it does is add noise and increase page size.

Posted on March 31, 2009

Use the p element to create paragraphs

Using p elements instead of multiple br elements to create paragraphs in HTML makes your documents more accessible and easier to style.

Posted on March 16, 2009

The alt attribute is for images only

The alt attribute is valid only for images and provides alternative text used when the image cannot be rendered. Do not use it with links and other non-image HTML elements.

Posted on February 16, 2009

It’s “class”, not “CSS class”

There is nothing called a "CSS class" in HTML or CSS, so please refer to values of the HTML class attribute as classes or class names instead.

Posted on February 12, 2009

Creating valid names with the id attribute

There is a simple rule that defines which characters you may use with the id attribute: begin with a letter, then add any number of digits, hyphens, underscores, colons, and periods.

Posted on February 2, 2009

Specify each HTML document’s main natural language

Always specify which natural language (spoken, written or signed human language) is used for a document’s content. Use the lang and/or xml:lang attributes for this.

Posted on January 20, 2009

The id attribute’s value must be unique

The value of the id attribute must be unique in an HTML document. In other words, the same id value may only occur once.

Posted on December 8, 2008

Quick Tips for web developers and web designers

By starting a new category of posts that focus on quick and simple tips related to front-end web development I hope to help people avoid making some mistakes that I see repeatedly.

Posted on December 2, 2008