h1-h6

h1, h2, h3, …, h6 are block-level elements. H1 is used for the most important headings and h6 is used for the least important headings.

I use headings hierarchically. That is, I will not use an h4 tag, unless there is an h3 tag above it.

Here are the headings with no particular style applied except for those used by this WordPress theme.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Continue reading

From Address to Microformats and hCard

Address element

On the surface, addr produces a fairly straightforward inline element used to indicate an address. As noted at HTML5 Doctor, though, too many of us use it too freely, and thus, incorrectly. The reason is that the element is supposed to be restricted to a web page’s author’s contact information.

Commonly misused

Here are a few basic examples, albeit used improperly.

  • Triangle Shirtwaist Factory Fire 29 Washington Place, New York, NY 10003
  • Haymarket Affair
    175 N Desplaines St
    Chicago, IL 60661
HTML Syntax
<ul>
	<li>Triangle Shirtwaist Factory Fire <addr>29 Washington Place, New York, NY 10003</addr></li>
	<li>Haymarket Affair<br /><addr>175 N Desplaines St<br />Chicago, IL 60661</addr></li>
</ul>

The addr element is supposed refer to contact-related data for an author or editor of a webpage. It is like very flexible metadata for a webpage. The data contained within addr tags can be quite broad and is certainly not limited to a postal address. It can include an email address, telephone or fax number, or any other contact-related data.

In the examples above, I have used the address element incorrectly. While the syntax is correct, the context or usage is wrong. And, the reason the usage is wrong is because the addresses listed have nothing to do with the me, the author of this webpage.

Continue reading

Ordered and Unordered Lists

Ordered and unordered lists (ol and ul, respectively) are block-level elements comprised of list items (li).

ol
ordered list, a block-level element similar to ul with the difference being an emphasis on order, like numerical order or alphabetical order.
ul
unordered list, a block-level element similar to ol, but with no emphasis on order.
li
list item, a block-level element.

Unordered list

Here is a list of common fruit. Since there is no ranking or chronological order for the list items, it makes sense for this to be an unordered list.

  • watermelon
  • banana
  • apple
  • orange
  • strawberry
  • pear
  • grape
  • pineapple
  • fig
  • kiwi
  • mango
  • coconut
HTML Syntax
<ul>
	<li>watermelon</li>
	<li>banana</li>
	<li>apple</li>
	<li>orange</li>
	<li>strawberry</li>
	<li>pear</li>
	<li>grape</li>
	<li>pineapple</li>
	<li>fig</li>
	<li>kiwi</li>
	<li>mango</li>
	<li>coconut</li>
</ul>

Continue reading

Description Lists

Description lists (dl) are block-level containers, much like ordered lists (ol) and unordered lists (ul), and are used for presenting and defining terms.

Description lists (dl) contain sets of description terms (dt) along with corresponding description definitions (dd). Each description term has at least one description definition (dd) associated with it.

According to HTML5 Doctor, definition lists are often used for glossaries and for metadata. If the definition list is being used as a glossary, then a definition term needs to be specified as being a definition (dfn).

Continue reading

Tables

This post contains the same basic table displayed in several styles. Each style builds on the one preceding it. The final examples feature tables that are responsive and make use of data attributes for better accessibility. The final example features a table that is sortable by one or more columns.

A Plain Table

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

A Bit Nicer Than Plain Table

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

Continue reading