HTML5

[milkeyway]

Не нашел старой темы,решил создать новую и посоветоваться с вами,поделитесь мыслями,как быть в такой ситуации:

<a class="main_item" title="blabla" href="blabla">
<h2 class="listing">BlaBla</h2>
<span class="wrap_productImg">
<img class="productImg" width="198" height="89" alt="blabla" src="images/small/2.jpg">
</span>
<div class="wrap_price_main">
<span class="priceBlock">
      1111
<span class="rub">руб.</span>
</span>
</div>
</a>

правильным ли будет такой вариант:

<section>
      <article>
        <a class="main_item" title="blabla" href="blabla">
        <header>
          <h1 class="listing">BlaBla</h1>
        </header>
          <span class="wrap_productImg">
          <img class="productImg" width="198" height="89" alt="blabla" src="images/small/2.jpg">
        </span>
        <div class="wrap_price_main">
          <span class="priceBlock">
            1111
        <span class="rub">руб.</span>
          </span>
        </div>
  </a>
  </article>
</section>

[Great Rash]

А <section> нафига? <header> тут тоже не нужен.

[Modestes]

По логике смотреть нужно.

<section> Используется для объединения в группу различных статей или тем или разделов статьи.

<article> Это фрагмент контента, который будет иметь смысл, например, новостное сообщение RSS.

<header> Используется для верхнего колонтитула. Обычно его пихают во все блоки у которых должен быть заголовок, но правbльней обойтись старым h1-h2

лучше оставить в диве)

и покороче

<div>
  <h1 class="listing">Заголовок</h1>
    <a class="main_item" title="blabla" href="blabla">Ссылко      
      <img class="productImg" width="198" height="89" alt="blabla" src="images/small/2.jpg">
    </a>
      <span class="priceBlock">1111<sub>руб.</sub></span>
</div>

[Great Rash]

Как я понимаю, это карточка товара в интернет-магазине. Как правило, карточка-товара ведет на подробное описание товара. Так что это вообще может быть <nav>

[SelenIT]

Ну блочную ссылку вокруг всего можно было и оставить, какой-то плюс от HTML5 надо же получить (ну и юзабилити улучшится) . И из article/section может быть оправдано что-то одно (вероятнее article), но не нагромождение обоих вокруг единственной сущности. Проверяйте структуру секций/заголовков outliner-ом.

А вот целый header вокруг единственного заголовка — к лешему, это одна из популярнейших ошибок.

[milkeyway]

А <section> нафига? <header> тут тоже не нужен.

не нужно,значит уберем

По логике смотреть нужно.

<section> Используется для объединения в группу различных статей или тем или разделов статьи.

<article> Это фрагмент контента, который будет иметь смысл, например, новостное сообщение RSS.

<header> Используется для верхнего колонтитула. Обычно его пихают во все блоки у которых должен быть заголовок, но правbльней обойтись старым h1-h2

лучше оставить в диве)

и покороче

<div>
  <h1 class="listing">Заголовок</h1>
    <a class="main_item" title="blabla" href="blabla">Ссылко      
      <img class="productImg" width="198" height="89" alt="blabla" src="images/small/2.jpg">
    </a>
      <span class="priceBlock">1111<sub>руб.</sub></span>
</div>

на странице несколько товаров,для каждого нужен только article,правильно?по короче не получится...и нужно именно,чтобы тег а был оберткой

Как я понимаю, это карточка товара в интернет-магазине. Как правило, карточка-товара ведет на подробное описание товара. Так что это вообще может быть <nav>

nav уже есть на странице,для товара-как-то даже и не представляю это...

Ну блочную ссылку вокруг всего можно было и оставить, какой-то плюс от HTML5 надо же получить (ну и юзабилити улучшится) . И из article/section может быть оправдано что-то одно (вероятнее article), но не нагромождение обоих вокруг единственной сущности. Проверяйте структуру секций/заголовков outliner-ом.

А вот целый header вокруг единственного заголовка — к лешему, это одна из популярнейших ошибок.

т.е достаточно убрать section и header или же вообще оставить все,как есть сейчас(на дивах)?что-то окончательно запутался с этими новыми тегами,будет ли так корректно:

<article>
        <a class="main_item" title="blabla" href="blabla">
          <h1 class="listing">BlaBla</h1>
          <span class="wrap_productImg">
          <img class="productImg" width="198" height="89" alt="blabla" src="images/small/2.jpg">
        </span>
        <div class="wrap_price_main">
          <span class="priceBlock">
            1111
        <span class="rub">руб.</span>
          </span>
        </div>
  </a>
  </article>

Edited June 8, 2012 by milkeyway

[Modestes]

Если выбирать из section и article то я больше склоняюсь к article , так как

<article> Это фрагмент контента, который будет иметь смысл, например, новостное сообщение RSS.

Для карточки думаю пойдет)

Только зачем столько оберток для цены?

можно ведь просто засунуть в тег p или тот же span, а текст "руб" засунуть в <sub> или <sup>

[milkeyway]

Если выбирать из section и article то я больше склоняюсь к article , так как

<article> Это фрагмент контента, который будет иметь смысл, например, новостное сообщение RSS.

Для карточки думаю пойдет)

Только зачем столько оберток для цены?

можно ведь просто засунуть в тег p или тот же span, а текст "руб" засунуть в <sub> или <sup>

засуну тогда в только article,по-мимо основной цены еще могут выводится скидка и старая цена и для оформления нужен контейнер для цены