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.
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).