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.
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.
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.
The ol tag is for an ordered list, where the items need to be in sequential order.
View the ol HTML file here.
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.
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.
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 😦