Marking up a letter

We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! In this assessment you'll be given a letter to mark up to test basic and advanced HTML text formatting skills, including hyperlinks, plus we'll test your familiarity with some HTML <head> contents.

Prerequisites: Before attempting this assessment you should have already worked through Getting started with HTML, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, and Advanced text formatting.
Objective: To test basic and advanced HTML text formatting and hyperlink skills, and knowledge of what goes in the HTML <head>.

Starting point

To start this assessment, you should go and get the raw text you need to mark up, and the CSS you need to include in your HTML. Create a new .html file using your text editor to do your work in, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

Note: If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

Project brief

For this project, your task is to mark up a letter that needs to be hosted on a university intranet. The letter is a response from a research fellow to a prospective PhD student concerning their application to the university.

Block/structural semantics:

  • You should structure the overall document with an appropriate structure including doctype, and <html>, <head> and <body> elements.
  • The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.
  • The semester start dates, study subjects and exotic dances should be marked up using an appropriate list type.
  • The two addresses should be put inside <address> elements. Each line of the address should sit on a new line, but not be in a new paragraph.

Inline semantics:

  • The names of the sender and receiver (and "Tel" and "Email") should be marked up with strong importance.
  • The four dates in the document should be given appropriate elements containing machine-readable dates.
  • The first address and first date in the letter should be given a class attribute value of "sender-column"; the CSS you'll add later will then cause these to be right aligned, as should be the case in a classic letter layout.
  • The five acronyms/abbreviations in the main text of the letter should be marked up to provide expansions of each acronym/abbreviation.
  • The six sub/superscripts should be marked up appropriately — in the chemical formulae,  and the numbers 103 and 104 (they should be 10 to the power or 3 and 4, respectively).
  • Try to mark up at least two appropriate words in the text with strong importance/emphasis.
  • There are two places where a hyperlink should be added; add appropriate links with titles. For the location that the links point to, just use http://example.com.
  • The university motto quote and citation should be marked up with appropriate elements.

The head of the document:

  • The character set of the document should be specified as utf-8 using an appropriate meta tag.
  • The author of the letter should be specified in an appropriate meta tag.
  • The provided CSS should be included inside an appropriate tag.

Hints and tips

  • Use the W3C HTML validator to validate your HTML; you'll get bonus points if it validates.
  • You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.

Example

The following screenshot shows an example of what the letter might look like after being marked up.

Example

Assessment or further help

You can practice the solution for this assessments in the Interactive Editors mentioned above.

If you would like your work assessed, or are stuck and want to ask for help:

  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include:
    • A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
    • A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    • A link to the actual task or assessment page, so we can find the question you want help with.

In this module