As part of the P2PU web design challenge, I took pictures of some things in the real world that vaguely represent HTML tags. I didn’t get all the tags that the assignment listed, but I did like some of the results.
<bq> and <ul>:
The words at the top of the stone look like some formal text that needs to be set off in a big blockquote. Besides, it’s on a block of stone! The names are a list that doesn’t need a particular order.
<ul>: It was the day before Halloween. This porch looks like a <ul> of pumpkins.
<ol>: Traffic was heavy on my way home. I was the third car in an ordered list of cars at a traffic light. This picture really has two OLs in it, because there are two lanes of traffic.
<q>: Here’s some text, quote:
<q>: Here’s the window of a store that’s closing after many years. Customers have written goodbye notes to it on the windows, quote: “Brussels Sprouts is my favorite store. I’ll miss you. Bye.”
<img> and <q>: For Halloween, stores around the city encourage kids to paint pictures on their windows (under supervision, I guess). That results in an <img>, and this one as a bonus has two word balloons, <q>.
<img>: This house is painted so as to be an attention-getting visual statement, not just a house, so I think it counts as an <img> all by itself:
<div> and <span>: The porch is divided into two <div>s, and the arches and sunburst triangle above them span those divs and the entrance div.
Dudes, where’s my <nav>? I’ll be lost without it!
Phew, the transit authority posts these at every streetcar stop to help people navigate the system: