Semantics map-out
Set up
- Form into pairs
- Download the files
- Print “content.pdf”
- Get out a pencil for marking up the paper
Don’t look ahead—the answers are in here!
1 Content elements
- Heading
- List
- Image
- Paragraph

2 Heading elements
Each number denotes a sub-heading of the heading above.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

3 List elements
<ul>
— Unordered list <li>
— Each individual item inside
<ol>
— Ordered list <li>
— Each individual item inside
<dl>
— Description list <dt>
— The item title <dd>
— The item description

4 Image elements
<img>
— A visual image
<figure>
— An image with a caption, wraps an image
<figcaption>
— The descriptive text inside a figure

5 Quote elements
<q>
— Small quotes inside other text
<blockquote>
— Large, stand-alone quotes
<cite>
— The source of the quote

6 Text level elements
<em>
— Emphasis
<strong>
— Lots of emphasis
<b>
— A keyword
<i>
— Another language, technical term, title

7 Link elements
<a>
— A clickable hyperlink

8 Document elements
<header>
— The most important information <nav>
— The navigation for the page <main>
— The primary content <article>
— A chunk of unique content <aside>
— Secondary information <footer>
— The least important information

9 Extra elements
<data>
— Some numerical, computer information
<time>
— A date or time
<small>
— Fine print, copyright notice
