- All basic content and functionality should be accessible to all visitors, regardless of the browser they are using.
- All content should be contained in sparse, semantic markup.
- Enhanced formatting and layout is provided by externally linked Cascaded Style Sheets (CSS).
Content and Markup
The principle of keeping content in sparse semantic markup dictates the overall structure of our FAQ page. It will be divided into two parts: the top part representing the table of contents (TOC) with links to major categories (contained in <DIV id="toc">), and the bottom part containing all question-and-answer pairs for all categories (contained in <DIV id="faq">).
The TOC section will contain only a bulleted list of links pointing to major categories:
<div id="toc"> <p>... intro text ...</p> <ul> <li><a href="#html"><acronym title="Hypertext Markup Language">HTML</acronym></a></li> <li><a href="#css"><acronym title="Cascading Style Sheets">CSS</acronym></a></li> <li><a href="#dom"><acronym title="Document Object Model">DOM</acronym></a></li> </ul> </div>
The actual questions-and-answers section will be more structured:
- Each major category will have to be placed into its own DIV with an id attribute serving as a link anchor, thus avoiding the semantically unneeded <a name="anchor"> element.
- A major category will contain only a heading (H2) and a definition list (DL).
- All questions and answers will be written as a series of definition terms (questions, DT elements) followed by definition descriptions (answers, DD elements). Semantically, this makes more sense than writing questions and answers as regular paragraphs with distinctive CSS class names.
A sample category illustrating how you can nest quotes and paragraphs inside DD elements is shown in the following listing:
<div class="category" id="html"> <h2><acronym title="Hypertext Markup Language">HTML</acronym></h2> <dl> <dt>What is HTML?</dt> <dd><blockquote cite="http://www.w3.org/html/" title="W3C HTML home page"> <p>HTML is the publishing language of the World Wide Web.</p></blockquote></dd> <dt>What is XHTML?</dt> <dd>XHTML is reformulation of HTML as an XML application.</dd> <dt>How can I validate my HTML code?</dt> <dd>W3C offers free <a href="http://validator.w3.org/">HTML validator</a></dd> </dl> </div>
You can view a longer FAQ page here (you can also view its HTML source). Because it uses semantic markup, you can still understand the content even without CSS formatting.
- We’ll change the bulleted list in the TOC into a multilevel list that will be built dynamically based on the values of the DT elements.
- We’ll make the TOC expandable. Clicking on the category (first-level entry) will expand or collapse the list of questions belonging to that category, not jumping to the beginning of the category as before.
- We’ll modify the question-and-answer display logic and replace the scroll to the target element with the selective display of the selected question.