The World Around You Part III

17 Jun

I have a lot of photos and files, but in some photos/files I cover more than one of the tags assigned.

p, article, header and footer tags

(oops, I forgot the h5 tags around the two small-font colored blocks of text above (the yellow “The Checklist” and the black “Notable Quote”. Sorry.)

The p tag is for a paragraph or unit of text. As with most block elements, it starts on a new line and adds a blank line afterwards. However, I learned the hard way that you cannot nest lists (ul, ol or dl) inside p tags (I know this because your code doesn’t validate if you do that).

The article tag is for a page unit that can stand alone, like an article, blog post, etc. It’s new in HTML5.

The header and footer tags are just what they sound like–tags that allow you to group items in your header or footer together. They are sort of like specialized div tags, and they’re new in HTML5 (yay, HTML5)!

View the p, article, header, footer HTML file here.

div tag

The div tag is basically a container for a unit of content that you want to treat as one unit. Before HTML5, things you now place in nav, header, footer or article tags would have been in div tags.

View the div HTML file here.

nav tag

The nav tag is a way to group the navigational items on your page in one place. Yet another new tag in HTML5.

View the nav HTML file here.

dl and blockquote tags

The dl tag is for a definition list, where the terms to be defined have dt tags and their definitions have dd tags. Blockquote is used to set off a block of text from the surrounding text, such as a quotation.

View the dl, blockquote HTML here.

ol tag

The ol tag is for an ordered list, where the items need to be in sequential order.

View the ol HTML file here.

ul tag

The ul tag is for an unordered list, where the items don’t have to be in a particular order.

View the ul HTML file here.

span tag

The span tag is an inline element, useful when you just need a touch of CSS for a few words, etc. within a block element.
View the span HTML file here.

time tag
The time tag is used to indicate a specific date or time. As many of you know, I have struggled with the use of this element 😉 but my current understanding is that it enables people and computers to be sure they are referencing the same exact date and/or time, which is useful for example when you are dating a blog post or the computer is parsing HTML for an appointment to go into a calendar. It is a new tag in HTML5 and there probably will be uses for the tag in the future that haven’t been invented yet.
View the time HTML file here.

It took forever to get the text to “stay” with its relevant photo; what a nightmare 😦


Tags: , ,

5 responses to “The World Around You Part III

  1. Carmella

    June 20, 2011 at 11:44 AM

    You did a great job on your homework! I’ve just started week 4’s assignment and will hopefully have it up in a couple of days. I enjoyed your site; it’s one on my favorites. I’m glad we are group mates.

  2. computermama

    June 23, 2011 at 12:48 PM

    Therese – I love your pictures, especially the span tag. That was my favorite. I have definitely come to see the use of that tag.

    I haven’t read your self-assessment or reflection yet. Looking forward to it.


  3. ebizjoey

    June 27, 2011 at 7:20 PM

    I had all kinds of problems with this, but the repetition helped with speed, and I had to just let go of the fear of loosing the whole post. I have done that, forgetting to hit update, and going to the front, now I save often, at every-change, and I run it in two tabs, one to work the back on and the other to view on after refresh.

    I really appreciate all your bringing to this class Terrytek! It is still amazing that you have me opening zip files at home, I could do it other places like school, but couldn’t get anyone to help until you, thanks!

  4. Roberta Romero

    June 30, 2011 at 2:51 AM

    Terry, that is an impressive array of photos! and explanations. Gives me something to aspire to by looking over everyone’s posts!

  5. David Kewal

    July 4, 2011 at 8:39 AM

    Awesome observation Terry, looking at your source code gave me some light bulb ideas!


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: