Quick Tips
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.
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.
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.
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.
(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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Page navigation
Page 1 | Page 2Sponsors
Authentic Jobs
Job openings from Authentic Jobs
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost