HTML Hunting in the World Around You

So, I’ve been going through the P2PU site, trying out lessons and challenges. So far, they’ve been fun.  I’ve been working on this one challenge at P2PU, walking around and taking pictures of things that remind me of HTML elements. They gave us a scavenger hunt list of elements, and like the overachiever I am, I went out and collected all of them. So, here’s some photos of HTML elements I could find in the real world.

<div>

Lego container - a.k.a. the div

The bag for my kid's legos made me think of a div element, because it's a moveable container for similarly formatted elements

<blockquote> and <p>

Paragraph and Blockquote

The paragraph is above the No Smoking sign, and the blockquote is below it, because it is quoting some regulation of some sort.

<ol>, <ul>, and <li>

An Unordered List

My kid's stackable ring toy is a good example of an ordered list (ol) because they are in order of size. Each ring counts as a list item (li)

An unordered list

The same rings from the ordered list, taken out adn scattered, make a good unordered list (ul). Note each ring counts as a list item (li)

<nav>

Elevator controls as a nav element

I believe the buttons on an elevator make a great nav element, because it's a section of the building that provides links to other parts of the building, much like a nav element.

<menu>

A menu for a menu element

Nothing describes a menu element better than a menu. They're both an unsorted list of menu items or commands.

<span>

A span element hiding in an important notice

On the first paragraph under the important notice, you'll see a couple words underlined. This could be considered a span, because it's an inline text element with unique formatting.

<time>

A real-life example of a time element

I thought that the calendar and the watch represented a real time element, because the time element keeps up with both date and time.

<q>

A q or quote element on the refrigerator door

Here's a q element hiding as a quote on my refrigerator door. Q elements tend to be shorter than blockquote. Also, they didn't ask for it, but the q has a cite element after it. 😉

<img>

An img element by the elevator

I leave you with an img element I found by the elevator. It even comes with it's own caption below.

2 Responses to “HTML Hunting in the World Around You

  • Kronosaurus
    8 years ago

    Excellent pictures. I think you did a great job fulfilling the goals of this assignment.

  • Dude! That was freaking awesome. Thanks for helping me to better understand the div element. As for the ordered and unordered lists with the same ringy toy? Outtasight.

    Want to check me out and see if I really fouled anything up? http://malmater.com/2012/01/webcraft-101-task4/

    Take care!
    Kevin