Exercise 1

For this exercise, you will work through some basic ideas of semantic HTML. You will need to consult a good HTML5 reference (or the spec). Remember that choice of tag should be about meaning, not appearance.

1. If you are not already familiar with the basics of HTML (and CSS for later exercises), this would be a good time to go through a tutorial. Some options:

   • CMPT 165 Study Guide, units 2–4
   • University of Washington: Web Programming, units 2–4
   • Opera Web Standards Curriculum

2. Create a file content.html that contains your answers to the first few questions (perhaps by starting with this skeleton page provided). Consider this passage, which you might want to mark up using HTML:

   According to Wikipedia, there was never a version 1.0 of HTML. The W3C is the World Wide Web Consortium, and it defines HTML.

   Choose an appropriate HTML tag for each of the three highlighted words, according to their meaning in that passage. Have a look at the HTML reference pages for tags that match their meaning. The default rendering (in most browsers) for the tags I think are best are all italic text: they will all look the same, but the markup you choose will expand their meaning to search engines, screen readers, etc. (Hint: <cite>, <dfn>, and one other.)

   Add a paragraph to your content.html file that contains the above passage; mark it up as described above. There is no need to create a stylesheet to make the words look like the above: this question is only about content. [Note that the default rendering of <dfn> in Chrome isn't italic: that doesn't matter since we don't care appearance here.]

3. Have a look at each of these tags in an HTML reference: <ol>/<li>, <abbr> (with a title), <dl>/<dt>/<dd>.

   Add some content to your content.html that uses each of these tags appropriately. (i.e. Create some content that matches the meaning of those tags, to demonstrate that you know what they are and how to use them properly.)

4. Add the HTML5 doctype to your content.html (if it's not already there):

   <

   Use a validator to make sure your page is valid.

5. Save this HTML file: exer1-page.html (and the image that goes with it, null.png).

   The file is not valid HTML5, but should be. Fix the HTML so that it uses tags with the right semantic meaning, and is valid HTML5.

Submit your files through the Course Management System.