HTML 5 Tutorial (iii)

HTML 5 also adds some purely semantic block-level elements:

Aside

Figure

Dialog

I always use the first two elements in articles and books. The third element I do not often use, it is mainly used in written text.

Aside

The aside element represents a description, a hint, a sidebar, a reference, an additional annotation, etc., which is beyond the narrative line. For example, in a DeveloperWorks article, you will often see sidebar written in tabular form, as shown in code 3, DeveloperWorks Sidebar, written in HTML 4.

. xf-value

The. Xf-value selector used here styles the input field value but it label. This is actually inconsistent with the current CSS3 draft. The example really should use of the:: Value pseudo-class instead like so:

input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em}

However, Firefox doesn ' t yet support this syntax.

In HTML 5, you can write this sidebar in a more meaningful way, as shown in code 4, the DeveloperWorks sidebar, which is written in HTML 5.

. xf-value

The. Xf-value selector used here styles the input field value but it label. This is actually inconsistent with the current CSS3 draft. The example really should use of the:: Value pseudo-class instead like so:

input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em}However, Firefox doesn't yet support this syntax.

The browser can decide where to place the sidebar (you may need to use a little CSS code).

Figure

The figure element represents a block-level image and can also contain a description. For example, in many DeveloperWorks articles, you can see the markup shown in code 5 with the DeveloperWorks diagram written in HTML 4, and the results are shown in Figure 1.

Figure 2. Install Mozilla XForms Dialog

Figure 1. Install Mozilla XForms Dialog