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

Comments: HTML5 also adds some purely semantic block-level elements: 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. The aside elements represent descriptions, prompts, sidebar, references, and additional comments, that is, content outside the main line. For example, some purely semantic block-level elements are added to developer HTML5:
　　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 HTML4.
<Tablealign = "right" border = "0" cellpadding = "0" cellspacing = "0" width = "40%">
<Tbody> <tr> <tdwidth = "10">
</td>
<Td>
<Tableborder = "1" cellpadding = "5" cellspacing = "0" width = "100%">
<Tbody> <tr> <tdbgcolor = "# eeeeee">
<P> <aname = "xf-value"> <spanclass = "smalltitle">. xf-value </span> </a> </p>
<P>
The <codetype = "inline">. xf-value </code> selectorusedherestylestheinput
Fieldvaluebutnotitslabel. Thisisactuallyinconsistent
WiththecurrentCSS3draft. Theexamplereallyshouldusethe
<Codetype = "inline" >:: value </code> pseudo-classinsteadlikeso:
</P>
<Tableborder = "0" cellpadding = "0" cellspacing = "0" width = "100%">
<Tbody> <tr> <tdclass = "code-outline">
<Preclass = "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, firefoxdoesn' tyetsupportthissyntax.
</P>
</Td> </tr> </table>
In HTML5, you can write this sidebar in a more meaningful way. For details, refer to code 4. The developerWorks sidebar written in html5.
<Aside>
<H3>. xf-value <P>
The <codetype = "inline">. xf-value </code> selectorusedherestylestheinput
Fieldvaluebutnotitslabel. Thisisactuallyinconsistent
WiththecurrentCSS3draft. Theexamplereallyshouldusethe
<Codetype = "inline" >:: value </code> pseudo-classinsteadlikeso:
</P>

<Preclass = "displaycode"> input: value {width: 20em ;}
# Ccnumber: value {width: 18em}
# Zip: value {width: 12em}
# State: value {width: 3em} </pre>
<P>
However, firefoxdoesn' tyetsupportthissyntax.
</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 marked by the developerWorks diagram written in HTML4 in code 5, as shown in figure 1.
<Aname = "fig2"> <B> Figure2.InstallMozillaXFormsdialog </B> </a> <br/>
MozillaXForms0.7Unsigned"
Src = "installdialog.jpg" border = "0" height = "317" hspace = "5" vspace = "5" width = "331"/>
<Br/>

Figure 1. InstallMozillaXFormsdialog

In HTML5, you can write this graph in a more semantic way. For details, see the developerWorks graph written in HTML5 in Code 6.
<Figureid = "fig2">
<Legend> Figure2.InstallMozillaXFormsdialog </legend>
MozillaXForms0.7Unsigned"
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 HTML5dt element can represent the speaker, and the HTML5dd 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 "DialogueConcerningtheTwoChiefWorldSystems.
Code 7. Galilean conversation written in HTML5
<Dialog>
<Dt> Simplicius </dt>
<Dd> AccordingtothestraightlineAF,
Andnotaccordingtothecurve, suchbeingalreadyexcluded
Forsuchause. </dd>
<Dt> Sagredo </dt>
<Dd> ButIshouldtakeneitherofthem,
SeeingthatthestraightlineAFrunsobliquely. ishocould
DrawalineperpendiculartoCD, forthiswouldseemtome
Tobetheshortest, aswellasbeinguniqueamongthe
Infinitenumberoflongerandunequaloneswhichmaybe
DrawnfromthepointAtoeveryotherpointoftheopposite
Linmcm </dd>
<Dt> Salviati </dt>
<Dd> <p> Yourchoiceandthereasonyou
Adduceforitseemtomemostexcellent. Sonowwehaveit
Thatthefirstdimensionisdeterminedbyastraightline;
Thesecond (namely, breadth) byanotherstraightline, and
Notonlystraight, butatrightanglestothatwhich
Determinesthelength. Thuswehavedefinedthetwo
Dimensionsofasurface; thatis, lengthandbreadth. </p>
<P> Butsupposeyouhadtodetermineaheight-
Example, howhighthisplatformisfromthepavementdown
Belowthere. Seeingthatfromanypointintheplatformwe
Maydrawinfinitelines, curvedorstraight, andallof
Differentlengths, totheinfinitepointsofthepavement
Below, whichofalltheselineswouldyoumakeuseof? </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 the specific syntax, most people think that it is a good thing to express a conversation in such a semantic way.
　　
(To be continued)