HTML5 structure and semantics-semantic block-level elements (3)

Aside figure dialog
 
I have been using the first two elements in my articles and books. The third element is not commonly used. It is mainly used in written text.
 
Aside
 
The aside element represents the description, prompt, sidebar, reference, and additional comments, that is, content outside the main line. For example, in developerWorks articles, you will often see the sidebar written in the form of tables. For details, see the developerWorks sidebar written in code 3 in HTML 4.
 
The following code snippet: [www.2cto.com]
<Table align = "right" border = "0" cellpadding = "0" cellspacing = "0" width = "40%">
<Tbody> <tr> <td width = "10">
</td>
<Td>
<Table border = "1" cellpadding = "5" cellspacing = "0" width = "100%">
<Tbody> <tr> <td bgcolor = "# eeeeee">
<P> <a name = "xf-value"> <span class = "smalltitle">. xf-value </span> </a> </p>
<P>
The <code type = "inline">. xf-value </code> selector used here styles the input
Field value but not its label. This is actually inconsistent
With the current CSS3 draft. The example really shocould use
<Code type = "inline" >:: value </code> pseudo-class instead like so:
</P>
<Table border = "0" cellpadding = "0" cellspacing = "0" width = "100%">
<Tbody> <tr> <td class = "code-outline">
<Pre class = "displaycode"> input: value {width: 20em ;}
# Ccnumber: value {width: 18em}
# Zip: value {width: 12em}
# State: value {width: 3em} </pre>
</Td> </tr> </tbody> </table> <br>
 
<P>
However, Firefox doesn' t yet support this syntax.
</P>
</Td> </tr> </table>
 
In HTML 5, you can write this sidebar in a more meaningful way. For details, refer to code 4's developerWorks sidebar written in HTML 5.
 
The following code snippet: [www.2cto.com]
<Aside>
<H3>. xf-value <P>
The <code type = "inline">. xf-value </code> selector used here styles the input
Field value but not its label. This is actually inconsistent
With the current CSS3 draft. The example really shocould use
<Code type = "inline" >:: value </code> pseudo-class instead like so:
</P>
 
<Pre class = "displaycode"> input: value {width: 20em ;}
# Ccnumber: value {width: 18em}
# Zip: value {width: 12em}
# State: value {width: 3em} </pre>
 
<P>
However, Firefox doesn' t yet support this syntax.
</P>
</Aside>
 
The browser can decide where to put this sidebar (a little CSS code may be required ).
 
Figure
 
The figure element represents a block-level image and can contain instructions. For example, in many developerWorks articles, you can see the result of code 5 marking the developerWorks diagram written in HTML 4, as shown in figure 1.
 
The following code snippet: [www.2cto.com]
<A name = "fig2"> <B> Figure 2. Install Mozilla XForms dialog </B> </a> <br/>
Mozilla XForms 0.7 Unsigned"
Src = "installdialog.jpg" border = "0" height = "317" hspace = "5" vspace = "5" width = "331"/>
<Br/>





Figure 1. Install Mozilla XForms dialog

In HTML 5, you can write this graph in a more semantic way. For details, see the developerWorks graph written in HTML 5 in Code 6.

 
The following code snippet: [www.2cto.com]
<Figure id = "fig2">
<Legend> Figure 2. Install Mozilla XForms dialog </legend>
Mozilla XForms 0.7 Unsigned"
Src = "installdialog.jpg" border = "0" height = "317" hspace = "5" vspace = "5" width = "331"/>
</Figure>
 
 
The most important thing is that browsers (especially screen readers) can explicitly link graphs and instructions.
The figure element not only displays images. You can also use it to describe audio, video, iframe, object, and embed elements.
 
Dialog
 
The dialog element indicates the dialog between several people. The HTML 5 dt element can represent the speaker, and the HTML 5 dd element can represent the speech content. Therefore, the dialog can be displayed in a reasonable way in the old-fashioned browser. Code 7 shows a famous conversation on Galileo's "Dialogue Concerning the Two Chief World Systems.
 
Code 7. Galilean conversation written in HTML 5
 
 
 
The following code snippet: [www.2cto.com]
<Dialog>
<Dt> Simplicius </dt>
<Dd> According to the straight line AF,
And not according to the curve, such being already excluded
For such a use. </dd>
 
<Dt> Sagredo </dt>
<Dd> But I shoshould take neither of them,
Seeing that the straight line AF runs obliquely. I shold
Draw a line perpendicular to CD, for this wowould seem to me
To be the shortest, as well as being unique among
Infinite number of longer and unequal ones which may be
Drawn from the point A to every other point of the opposite
Line CD. </dd>
 
<Dt> Salviati </dt>
<Dd> <p> Your choice and the reason you
Adduce for it seem to me most excellent. So now we have it
That the first dimension is determined by a straight line;
The second (namely, breadth) by another straight line, and
Not only straight, but at right angles to that which
Determines the length. Thus we have defined the two
Dimensions of a surface; that is, length and breadth. </p>
 
<P> But suppose you had to determine a height-
Example, how high this platform is from the pavement down
Below there. Seeing that from any point in the platform we
May draw infinite lines, curved or straight, and all
Different lengths, to the infinite points of the pavement
Below, which of all these lines wocould you make use? </P>
</Dd>
</Dialog>
 
 
There is still controversy over the accurate Syntax of this element. Some people want to embed non-conversational text in the dialog element (such as the stage description in the script), and others do not like to extend the functions of the dt and dd elements. Despite the controversy in specific syntax, most people think that it is a good thing to express a conversation in such a semantic way.