Exercise : Semantics (by Morgan Doocy)

For this printed page (click to enlarge):

1. Draw a box around each block element you see and write the tag you would use.
2. Underline each inline element you see and write the tag you would use.
3. Next to each element write any IDs or classes you would attach to it.

Exercise solution

Here is one possible solution (click to enlarge).

Alternatively, the dialogue could be considered a dl, with the dt.character and dd.line being inline with each other. This presentation is achievable using CSS.