Кодиране на чист семантичен HTML5 li срещу Div

Създавам уеб страница за показване на списък с автомобилни части.

Страницата е разделена на секции, всяка секция съдържа две колони (по една за всяка част от автомобила).

Има ли по-чист, по-ефективен начин за семантично представяне на кода по-долу? Може ли това да стане с помощта на списък? Всички примери на код ще бъдат оценени.

раздел групира свързано съдържание

divider class създава ред с обвивката

За всяка част се използва артикул

span

<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>
of_2 class присвоява % ширина на всяка колона

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

много благодаря.


html semantics
person PtoK    schedule 15.02.2015    source източник
comment
Не е напълно ясно къде смятате, че трябва да използвате списък вместо това.   -  person t.niese    schedule 15.02.2015
comment
Допълнителна забележка: Когато добавяте коментари, трябва да използвате стандартния стил на коментари на езика, тъй като те няма да нарушат подчертаването на синтаксиса и ще улеснят четенето на html кода.   -  person t.niese    schedule 15.02.2015

Отговори (1)


arrow_upward
0
arrow_downward

Не съм много привърженик на споровете за самантика ;), но можете да използвате списъци с дефиниции за това, както и някои от другите семантични HTML5 елементи като така...

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

Също така само да отбележа, че в списъците с дефиниции е напълно приемливо да се използва повече от един дефиниционен термин <dt> и/или описание на дефиниции <dd>.

<dl>
    <dt>term 1</dt>
    <dt>term 2</dt>
    <dd>definition 1</dd>   
    <dd>definition 2</dd>   
    <dd>definition 3</dd>
</dl>
person skribe    schedule 15.02.2015
comment
Елемент figure не е валиден дъщерен елемент на елемент dl. Освен това е figcaption, а не figurecaption. - person t.niese; 15.02.2015
comment
@t.niese Прав си. Редактирах отговора. Правех това, докато си мислех, че заглавията на дефинициите не могат да съдържат елементи на ниво блок, но описанието на дефиницията може. и наистина е по-добре така. - person skribe; 15.02.2015