Semantics map-out

An activity to help learn the HTML semantics by working in small groups to identify pieces of content.

Go fullscreen: ⌃⌥F

Semantics map-out

Set up

  1. Form into pairs
  2. Download the files
  3. Print “content.pdf”
  4. 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

<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

Start

Semantics map-out

An activity to help learn the HTML semantics by working in small groups to identify pieces of content.