semantics - Correct usage of HTML5 `figure` and `aside` -


I have a part of a page that looks meaningful:

Heading A

Header A. Classic information related to blah blah blah blah

[Image Gallery related to Title A]

I can think of some ways to mark it:

Method 1: 

  & lt; Section & gt; & Lt; H1 & gt; Title A & lt; / H1> & Lt; P & gt; Text related information a. & Lt; Br / & gt; & Lt; P & gt; Blah blah blah blah & Lt; / P & gt; & Lt; Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 1 & lt; / Figcaption & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 2 & lt; / Figcaption & gt; & Lt; / Statistic & gt; & Lt; / Section & gt;

Method 2: 

  & lt; Section & gt; & Lt; H1 & gt; Title A & lt; / H1> & Lt; P & gt; Text related information a. & Lt; Br / & gt; & Lt; P & gt; Blah blah blah blah & Lt; / P & gt; & Lt; Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 1 & lt; / Figcaption & gt; & Lt; Statistic & gt; & Lt; / Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 2 & lt; / Figcaption & gt; & Lt; / Statistic & gt; & Lt; / Section & gt;

Method 3: 

  & lt; Section & gt; & Lt; H1 & gt; Title A & lt; / H1> & Lt; P & gt; Text related information a. & Lt; Br / & gt; & Lt; P & gt; Blah blah blah blah & Lt; / P & gt; & Lt; On one side & gt; & Lt ;! - Method 3b: Use the section here - & gt; & Lt; Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 1 & lt; / Figcaption & gt; & Lt; Statistic & gt; & Lt; / Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 2 & lt; / Figcaption & gt; & Lt; / Statistic & gt; & Lt; / One side & gt; & Lt ;! - Method 3b: Use the section here - & gt; & Lt; / Section & gt;

Method 4: 

  & lt; Section & gt; & Lt; H1 & gt; Title A & lt; / H1> & Lt; P & gt; Text related information a. & Lt; Br / & gt; & Lt; P & gt; Blah blah blah blah & Lt; / P & gt; & Lt; / Section & gt; & Lt; On one side & gt; & Lt; Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 1 & lt; / Figcaption & gt; & Lt; Statistic & gt; & Lt; / Statistic & gt; & Lt; Img / & gt; & Lt; Figcaption & gt; Image 2 & lt; / Figcaption & gt; & Lt; / Statistic & gt; & Lt; / One side & gt;

What is the right way to do this?

It is not possible that you have a complete agreement on 'correct way' to correct this I'm going to do, but I'll choose Law 2. My argument is:

  • In a data element can not have multiple figcaption children, therefore method 1 is invalid
  • A data is already a type of one side , so there is no need to wrap them: "Data element represents a unit of content ... Which can be taken away from the main flow of the document without affecting the meaning of the document. " ()
  • Unless the two figures themselves are related in any way, except that they are related to that section, they are already there, they do not need further than the group.

Comments

Post a Comment