What & why

When learning to write HTML, you have to start thinking about content differently—about its purpose and meaning.

Using some pre-written content we’ll go through, learn & discuss how & why choose HTML tags.

With some practice, and some memorization, we can grasp what content HTML describes.

Set up

1. Form into pairs
2. Download the files
3. Print “content.pdf” and draw on the paper
   Or do the whole thing digitally

Instructions

1. You’ll be shown some HTML tags & their purposes
2. Find content that’s appropriate for those tags
3. Mark that content with the tag name
   You don’t need to write full HTML or even tags—just the tag names—something as simple as h1

1 Content elements

• Heading
• List
• Image
• Paragraph

Not actually tags. But let’s start with grouping content types.

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