0

I'm creating a webpage to display a list of Car parts.

The page divided into sections, each section holds two columns (one for each car part).

Is there a cleaner more efficient way of semantically representing the code below? Can this be done using a list maybe? Any code examples will be appreciated.

section groups related content

divider class creates a row with the wrapper

article is used for each part

span_1_of_2 class assigns the % width of each column 

<section> <!-- GROUPS related content -->

  <div class="divider"> <!-- **creates a row** -->
  <article class="col span_1_of_2"> <!-- **span controls width** -->
    <h3>Brake discs</h3>
    <img src="styles/images/trek-speed.jpg" alt="Trek speed bike"/> 

    <ul class="info"> <!-- **product details** -->
      <li>Wheel Size 24</li>
      <li>Carbon</li>
    </ul>  
  </article>


   <article class="col span_1_of_2"> <!-- **PRODUCT 2** -->
    <h3>Alloy Wheels</h3>
    <img src="alloy.jpg> 

    <ul class="info"> <!-- **product info** -->
      <li>Wheel Size</li>
      <li>Carbon</li>
    </ul>  
  </article>

  </div> <!-- **end divider** -->
</section>

many thanks.

t.niese
  • 39,256
  • 9
  • 74
  • 101
PtoK
  • 15
  • 3
  • It is not fully clear where you think that you should use a list instead. – t.niese Feb 15 '15 at 12:44
  • An additional note: When adding comments, you should use the regular comment style of the language, as those would not break the syntax highlighting and would make it easier to read the html code. – t.niese Feb 15 '15 at 12:46

1 Answers1

0

I am not much for arguing samantics ;) but you could use definition lists for this, as well as some of the other semantic HTML5 elements like so...

<dl class="col span_1_of_2">
    <dt>brake disks</dt>
    <dd><img src="" alt=""></dd>    
    <dd>Wheel Size 24</dd>  
    <dd>Carbon</dd>
</dl>

Also just to point out that in definition lists it is perfectly acceptable to use more that one definition term <dt> and/or definition discription <dd>. 

<dl>
    <dt>term 1</dt>
    <dt>term 2</dt>
    <dd>definition 1</dd>   
    <dd>definition 2</dd>   
    <dd>definition 3</dd>
</dl>
skribe
  • 3,595
  • 4
  • 25
  • 36
  • 1
    A `figure` element is not a valid child of a `dl` element. Additionally it is `figcaption` and not `figurecaption`. – t.niese Feb 15 '15 at 13:25
  • @t.niese Right you are. I edited the answer. I was doing this while thinking definition titles can't contain block level elements, but a definition description can. and really it is better that way. – skribe Feb 15 '15 at 13:40