Structure and semantics of HTML5 (3): Semantic block-level elements_html5 tutorial skills

HTML5 also adds some purely semantic block-level elements:
aside figure Dialog
I have been using the first two elements in articles and books. The third element I don't use very often, it's mainly used for written text.
aside
The aside element represents instructions, tips, sidebars, quotes, additional notes, etc., that is, content outside the main line of the narrative. For example, in developerWorks articles, you often see sidebars written in table format. See Code 3 for developerWorks sidebars written in HTML4.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

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

.xf-valueThe.xf-valueselectorusedherestylestheinputfieldvaluebutnotitslabel. ThisisactuallyinconsistentwiththecurrentCSS3draft.Theexamplereallyshouldusethe::valuepseudo-classinsteadlikeso:input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} However, Firefox doesn't support this syntax.
In HTML5, this sidebar can be written in a more meaningful way, see Code 4 developerWorks sidebar written in HTML5.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valueps eudo- classinsteadlikeso:

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

However, Firefox doesn't support this syntax.

The browser can decide where to place this sidebar (maybe with a little CSS code).
figure
The figure element represents a block-level image and can also contain descriptions. For example, in many developerWorks articles, you can see code 5 developerWorks diagram written in HTML4 with such markup. The result is shown in Figure 1.
Figure2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"
border="0"height ="317"hspace="5"vspace="5"width="331"/>



Figure 1.InstallMozillaXFormsdialog

In HTML5, this diagram can be written in a more semantic way, see code 6 developerWorks diagram written in HTML5.

Figure2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"
border="0"height="317 "hspace="5"vspace="5"width="331"/>


Most importantly, browsers (especially screen readers) can clearly link the figures and descriptions together.
The figure element can not only display pictures. You can also use it to add descriptions to 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. Therefore, the conversation can be displayed in a reasonable manner in older browsers. Code 7 shows a famous dialogue from Galileo's "Dialogue Concerning the Two Chief World Systems".
Code 7. Galilean dialogue written in HTML5

Simplicius

AccordingtothestraightlineAF,
andnotaccordingtothecurve,suchbeingalreadyexcluded
forsuchause.

Sagredo

ButIshouldtakeneitherofhem,
seeingthatthestraightlineAFrunsobliquely.Ishould
drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe
infinitenumberoflongerandunequaloneswhichmaybe
drawnfromthepointAtoeveryotherpointoftheopposite
lineCD.

Salviati

Yourchoiceandthereasonyou
addforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;
th esecond(namely,breadth)byanotherstraightline,and
notonlystraight,butatrightanglestothatwhich
determinesthelength.Thuswehavedefinedthe two
dimensionsofasurface;thatis,lengthandbreadth .

But suppose you had to determine the height—for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines, curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below, which of these lines would you make use of?

There is debate over the exact syntax of this element. Some people want to embed non-dialog text (such as stage directions in a script) within the dialog element, and others don't like to extend the role of the dt and dd elements. Although there are arguments over the specific syntax, most people agree that expressing dialogue in this semantic way is a good thing.
　
　(To be continued)