Comment: 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 I don't use often, it is mainly used in written text. aside aside element represents description, prompts, sidebars, quotes, additional comments, etc., that is, content outside the main line of the narrative. For example, in developer
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 I don't use often, it is mainly used in written text.
aside
The aside element represents description, prompts, sidebars, quotes, additional comments, etc., that is, content outside the main line of the narrative. For example, in developerWorks articles, you often see sidebars written in table form, see code 3, developerWorks sidebar written in HTML4.
<tablealign=rightborder=0cellpadding=0cellpacing=0width=40%>
<tbody><tr><tdwidth=10>
<imgalt=src=//www.ibm.com/i/c.gifheight=1width=10></td>
<td>
<tableborder=1cellpadding=5cellpacing=0width=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.This actuallyinconsistent
withthecurrentCSS3draft.Theexamplereally shouldusethe
<codetype=inline>::value</code>pseudo-classinsteadlikeso:
</p>
<tableborder=0cellpadding=0cellpacing=0width=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, Firefox doesn't have a tyetsupport thissyntax.
</p>
</td></tr></table>
In HTML5, you can write this sidebar in a more meaningful way, see Code 4 DeveloperWorks sidebar written in HTML5.
<aside>
<h3>.xf-value</h3>
<p>
The<codetype=inline>.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.This actuallyinconsistent
withthecurrentCSS3draft.Theexamplereally shouldusethe
<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, Firefox doesn't have a tyetsupport thissyntax.
</p>
</aside>
The browser can decide where to put this sidebar (may require a little CSS code).
Figure
The figure element represents a block-level image and may also include descriptions. For example, in many developerWorks articles, you can see that the result of the code 5 labeling of the developerWorks diagram written in HTML4 is shown in Figure 1.
<name=fig2><b>Figure2.InstallMozillaXFormsdialog</b></a><br/>
<imgalt=AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned
src=installdialog.jpgborder=0height=317hspace=5vspace=5width=331/>
<br/>
Figure 1. InstallMozillaXFormsdialog
In HTML5, you can write this diagram in a more semantic way, see Code 6 DeveloperWorks diagram written in HTML5.
<figureid=fig2>
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt=AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned
src=installdialog.jpgborder=0height=317hspace=5vspace=5width=331/>
</figure>
Most importantly, browsers (especially screen readers) can clearly associate images and descriptions.
Figure elements can not only display images. You can also use it to specify audio, video, iframe, object and embed elements.
dialog
The dialog element represents a conversation between several people. The HTML5dt element can represent the speaker, and the HTML5dd element can represent the speech content. So, conversations can also be displayed in a reasonable way in old browsers. Code 7 shows a famous conversation on Galileo's DialogueConcerning the TwoChiefWorldSystems.
Code 7. Galilean dialogue written in HTML5
<dialog>
<dt>Simplicius</dt>
<dd>According to thestrightlineAF,
and not according to the curve, suchbeingalreadyexcluded
forsuchause.</dd>
<dt>Sagredo</dt>
<dd>ButIshouldtakeneitherofthem,
seeing that thestraightlineAFrunsobliquely.Ishould
drawlineperpendicular toCD, forthis would seem tome
tobetheshortest, aswellasbeinguniqueamongthe
infinitenumberoflongerandunequalones which maybe
Drawn from the point Atoever point for the opposite
lineCD.</dd>
<dt>Salviati</dt>
<dd><p>Yourchoice and thereatime you
adduceforitseemtomemostexcellent.Sonowwehaveit
that the first dimension is determined byastraightline;
these(namely,breadth)byanotherstraightline, and
Notonlystraight,butatanglestothat which
determinationsthelength.Thuswehave defined thetwo
dimensionsofasurface; thatis,lengthandbreadth.</p>
<p>Butsupposeyouhadtodetermineaheight—for
example, howhighthisplatformisfromthepavementdown
below there.Seeing thatfromypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
different lengths, to the infinite point so as to the pavement
below, which falls theselines would youmakeuseof?</p>
</dd>
</dialog>
There is still controversy over the exact syntax of this element. Some people want to embed non-dialogue texts in dialog elements (such as stage descriptions in scripts), and others don't like the role of extending the dt and dd elements. Despite the controversy over specific grammar, most people think that expressing conversations in such a semantic way is a good thing.
(to be continued)