Select Page

This is the fourth post in my P2PU: Webmaking 101 series and it wasn’t as easy as it looked.

In this case, the challenge was to:

  1. Learn/review a set of HTML tags.
  2. Take pictures, in the “real world” of items which have the same structure as the HTML tags.
  3. Then showcase the pictures taken in a creative way, explaining the structure I saw in them.

For me, the struggle wasn’t learning the HTML tags or taking the pictures. My struggle was having the time to actually do this challenge and then, how to display the pictures once they were taken.

I often over think things and this challenge is no different. Sometimes, simple really is better.

Keeping “Simple is Better” in mind, I’ve chosen to do a simple display of images below.

span tag

DeWALT DC618 Finish Nailer, HTML span tag

Up first is a DeWALT DC618 Finish Nailer, to represent the HTML span tag.


div, ol, li, & p tags

Fisher Price Classic Baby CD, HTML div, ol, li, & p tags

This Fisher Price Classic Baby CD is able to represent the HTML div, ol, li, & p tags. While the picture is not perfect for the framing I displayed, I think everyone can get the general idea.

The CD case (edge) is the primary div tag. Within the CD case edges there are additional div tags. The listing of the CD tracks make up the Ordered List (ol tag) and the CD track names make up the List Items (li tags). Finally, the summary text, describing the CD, make up a paragraph.

There may be a few more identifiable elements in this image, but the example gets confusing with so many lines and tags.


time, menu & nav tags

Microwave HTML time, menu & nav tags

In this picture, we see the control panel for a microwave.

I think its pretty easy to conclude that the time display represents the time tag.

The area I selected for the menu tag, I chose because they present a menu of options, for using the microwave. The options presented, meet the requirement of an unordered list (ul tag), as a change in the order does not detract from the value of the item. I would like to point out, prior to using the menu and nav tags this same affect could have been achieved through a div tag, a nav css class, and an unordered list (ul tag) of items.

The nav tag identifies microwave buttons which activate other features of the microwave, not directly linked to warming, heating and/or cooking.


ul & img tags

Pictures HTML ul & img tags

It was fairly easy to see how pictures (images) represent the img tag, right?

Looking at these pictures, there doesn’t seem to be a value to the order they are arranged in, so the images could be list items (li tags) in an unordered list (ul tag).


blockquote & q tags

HTML blockquote & q tags

This image is a snapshot from Sitepoint’s “Build your own Wicked WordPress Themes” book.

The quote, on the page, by Matt Mullenweg, is an extended quotation. So it is an area which would be encompassed by the blockquote tag.

If one were to quote the text “The Blogging Software Dilemma” it would be in quote tags.


I thought it may also be fun to include a gallery of the images I used in this post.


Okay, so I didn’t venture outside of my home for these images. However, I think it is clear they meet the requirements set by the challenge.

This post represents the required post for P2PU: Webmaking 101 – HTML Hunting in the World Around You.

If you are interested in any of my prior posts in the P2PU: Webmaking 101 series, you can see them below:

  1. P2PU: Webmaking 101
  2. P2PU: Webmaking 101 – Writing HTML by Hand
  3. P2PU: Webmaking 101 – Choose Your Weapon

Oh, and if you have the time, I have a poll running at the bottom of the

  • P2PU: Webmaking 101 – Choose Your Weapon
  • post. Take some time to cast your vote. If you don’t see your favorite text editor listed, just add it. I think those who are watching this poll would find it much more useful if the actual editor was mentioned if you choose to vote for “other.”