Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Summary
Following the principles of progressive enhancement, you can generate web pages that will be meaningful to all visitors of your web site (regardless of their browser capabilities) and perform well on search engines (because of their lean semantic markup).
You should start the page design process by focusing on the content (remember that content is king on the Web), which should be written using semantically meaningful markup. For example, our FAQ page has no formatting-related layout, uses only two DIV elements to separate the TOC from the questions-and-answers section and uses the most appropriate HTML tags to encode the Q-and-A pairs.
After the content structure is finalized, you can start applying the first layer of enhancement on it: the formatting provided by an external CSS style sheet. In this phase, you should avoid inserting additional elements in your HTML markup simply to satisfy the formatting needs if at all possible. It’s better to identify sections of your content with HTML identifiers or CSS class names and provide specialized formatting rules for them.
The last step in progressive enhancement is the addition of dynamic behavior based on JavaScript, be it on-the-fly document modification (for example, introduction of dynamic content as we did with the second-level TOC), event handlers (for example, form field verification), or replacement of links with popup or dynamically generated elements. As the HTML content should not be modified too much with the introduction of JavaScript code, you should not put JavaScript code directly into the web page (as a lot of sites do with pages heavy with SCRIPT tags), but in a separate library.
You should also avoid hard-coding event handlers on individual HTML elements; they should be set programmatically in the JavaScript code with a nice side effect being that you can modify the page behavior without touching the actual HTML markup simply by modifying the attached JavaScript library. Last but not least, never use javascript: pseudo-protocol in links because this detrimental practice effectively stops search engines from reaching your content and blocks visitors without JavaScript from using your site.
However, as you’ve seen in our example, having links (A elements) in your markup instead of onclick event handlers attached to HTML elements has some significant benefits. For example, screen readers can identify them, and people who prefer the keyboard over the mouse can navigate to them. To address these seemingly opposing requirements, always place a meaningful URL in the href attribute of the link (ideally, a URL that will bring you to the desired content). Later on add an onclick event handler to the A element that explicitly returns false (thus disabling the default behavior).