Monday 13 June 2011

The World Around You - Part III

<p>

Paragraph was an easy choice - I love taking photographs of The Elements of Typographic Style

View p.html.

p

<div>

Div had me puzzled for a bit but I decided on bricks because div’s really are just generic building blocks.

View div.html.

div

<article>

I had an old Times Educational Supplement at hand and I snapped an article from one of the pages.

View article.html.

article

<header>

I just took delivery a new Noam Chomsky book last week, thought I’d use this as it does have a very clear header

View header.html.

header

<nav>

Nav did have me puzzled for a few mins and then I though aha - Motorway signs! Eureka

View nav.html.

nav

Thanks to Gary D for the photo

<footer>

The bottom sole of a shoe makes for a good example of a footer I think.

View footer.html.

footer

<blockquote>

So I took a bit of artistic license in this one. I drew a speech bubble coming from our cat, he’s demanding fish.

View blockquote.html.

blockquote

<ol>

Ordered lists, my old friend. Last time I used a sketch of a bus stop, and there was a big reply of people informing me that people ( mostly from London I have to say ) were not ordered, but rather very unordered. So Instead I’ve opted for a load of geese flying in formation. Thanks to Neptune Canada for the photo

View orderedlist.html.

ol

<ul>

Just a random selection of DVD’s from my collection.

View unorderedlist.html.

ul

<dl>

Definition lists are tricky, I very rarely use them because I end up either breaking them down into heading tags and paragraphs or breaking them into lists. Not deterred I attacked my DVD collection and came up with this. That’ll do nicely.

View definitionlist.html.

dl

<span>

Span’s are really tricky because they’re the inline equivalent of a div - totally generic. I had an idea to use use some tape in a sentence of text, but I didn’t have any tape. I opted for a highlighter instead.

View span.html.

span

<time>

I think I should have tried a little bit harder with this one, but it’s just too obvious. The time tag is for dates and times and I just couldn’t resist myself.

View time.html.

time