HTML Hunt

My self-education in coding continues: This posts shows the results of my efforts on Challenge #4 in P2PU School of Webcraft. This challenge required researching a list of basic HTML tags and then looking for examples that represented the tags in my neighbourhood.  A very clever way to get you thinking about what HTML tags mean and how to use them!  And actually in the ‘Text’ mode of drafting a post in WordPress, I see some tags I recognise and vaguely know the meaning of now.

I found this particular challenge interesting because it unearthed the complexity that underpins many of the things we do that require HTML, such as communicating with people and surfing the web for news and entertainment.

Here are my photos which represent the various HTML tags:

This section of wall which juts out seemed to say  to me, since it links two bits of wall.

This section of wall which juts out seemed to say <nav>to me, since it links two bits of wall.

An obvious choice for the tag time, which represents a time or date.

An obvious choice for the tag <time>, which represents a time or date.

This one's more interpretive, shall we say, since I saw the garage door as the extended quotation indicated by the tag blockquote.

This one’s more interpretive, shall we say.  I saw the garage door as the extended quotation enclosed by the brick, or an example of the tag <blockquote>.

Many examples of <ol> (ordered list):

IMG_3136 IMG_3137 IMG_3138IMG_3130

Finding example of  was easy.

Finding examples of <ol> was easy!

Here is my div. The paint marks where cars (the content) can be 'contained'.

Here is my <div> tag. The paint marks where cars (the content) can be ‘contained’.

Another interpretative one, the chain is the span which links two elements (gates) for security purposes.

Another interpretative one, the chain is the <span> which links two elements (gates) for security purposes.

q was easy enough.

<q> was easy enough. The text ‘SCHOOL’ is enclosed by the lines.

Not a great photo, but it is an img!

Not a great photo, but it is an <img>!

This one was tricky to find. I chose the post box because it was a stand alone item (though not in a line!).

<li> This one was tricky to find. I chose the post box because it was a stand alone item (though not in a list/line with others!).

The menu tag was another harder one. I chose the messy bins because they were both unordered and required some action (i.e. emptying!).

The <menu> tag was another harder one. I chose the messy bins because they were both unordered and required some action (i.e. emptying!).

Again p was fairly easy. This is a concert poster.

Again <p> was fairly easy. This is a concert poster.

My ul tag example. Trees growing in natural, unordered formation.

My <ul> tag example. Trees growing in natural, unordered formation.

 

Advertisements

One thought on “HTML Hunt

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s