Shulou(Shulou.com)06/03 Report--

This article is about what the semantic block-level elements of HTML5 contain. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

HTML5 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 don't use very often, it's mainly used for written text.

Aside

Aside elements represent instructions, prompts, sidebars, references, additional comments, and so on, that is, outside the main line of the narrative. For example, in developerWorks articles, you will often see a sidebar written in tabular form, as shown in Code 3's developerWorks sidebar 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}

However,Firefoxdoesn'tyetsupportthissyntax.

In HTML5, you can write this sidebar in a more meaningful way, as shown in Code 4's developerWorks sidebar written in HTML5.

. 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}

However,Firefoxdoesn'tyetsupportthissyntax.

The browser can decide where to put this sidebar (you may need a little bit of 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 the result of a tag such as a developerWorks diagram written in HTML4 in Code 5 as shown in figure 1.

Figure2.InstallMozillaXFormsdialog

Figure 1.InstallMozillaXFormsdialog

In HTML5, you can write this diagram in a more semantic way, as shown in the developerWorks diagram written in HTML5 in Code 6.

Figure2.InstallMozillaXFormsdialog

Most importantly, browsers, especially screen readers, can explicitly associate diagrams with descriptions.

The figure element does not just display pictures. You can also use it to describe 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 content of the speech. As a result, conversations can also be displayed in a reasonable way in older browsers. Code 7 shows a famous conversation on Galileo's "DialogueConcerningtheTwoChiefWorldSystems".

Code 7. Galilean conversations written in HTML5

Simplicius

AccordingtothestraightlineAF

Andnotaccordingtothecurve,suchbeingalreadyexcluded

Forsuchause.

Sagredo

ButIshouldtakeneitherofthem

SeeingthatthestraightlineAFrunsobliquely.Ishould

DrawalineperpendiculartoCD,forthiswouldseemtome

Tobetheshortest,aswellasbeinguniqueamongthe

Infinitenumberoflongerandunequaloneswhichmaybe

DrawnfromthepointAtoeveryotherpointoftheopposite

LineCD.

Salviati

Yourchoiceandthereasonyou

Adduceforitseemtomemostexcellent.Sonowwehaveit

Thatthefirstdimensionisdeterminedbyastraightline

Thesecond (namely,breadth) byanotherstraightline,and

Notonlystraight,butatrightanglestothatwhich

Determinesthelength.Thuswehavedefinedthetwo

Dimensionsofasurface;thatis,lengthandbreadth.

Butsupposeyouhadtodetermineaheight-for

Example,howhighthisplatformisfromthepavementdown

Belowthere.Seeingthatfromanypointintheplatformwe

Maydrawinfinitelines,curvedorstraight,andallof

Differentlengths,totheinfinitepointsofthepavement

Below,whichofalltheselineswouldyoumakeuseof?

The exact syntax of this element is controversial. Some people want to embed non-conversational text in dialog elements (such as stage instructions in the script), while others don't like to extend the role of dt and dd elements. Although there are disputes on the specific grammar, most people think that it is a good thing to express the dialogue in such a semantic way.

Thank you for reading! This is the end of this article on "what are the semantic block-level elements in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.