Not logged in. Login

Exercise 1

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

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 good options: CMPT 165 Study Guide (units 2–3); Web Platform Docs (HTML and CSS topics in particular).

Markup Basics

Create a file content.html that contains your answers to the first few questions (perhaps by starting with the empty HTML page provided).

Markup 1

Consider this passage, which you might want to mark up using HTML:

According to Wikipedia, there was never a version 1.4 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 (give or take the browser's default CSS), 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.]

Markup 2

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


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

<!DOCTYPE html>

Use a validator to make sure your content.html page is valid.

Copy-and-paste this HTML into exer1-page.html: exercise 1 HTML page (and the image that goes with it, null.png). The file is not valid, but should be. Fix the markup in exer1-page.html so that it uses tags with the right semantic meaning, and is valid HTML5.


Submit your files through CourSys for Exercise 1.

Updated Mon Aug. 30 2021, 07:36 by ggbaker.