Question

我想知道如何将以下html结构重组为HTML5结构语义？我想放在section，figure和dl中，但不知道如何正确组织它。希望有人体验HTML 5语义结构可以向我展示正确的方法。谢谢。

<div class="product-list">
  <h1>Product Category A</h1>
  <div class="item odd">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 1
        <span>Sub title 1</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 50</div>
      </div>
    </div>
  </div>
  <div class="item even">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 2
        <span>Sub title 2</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 70</div>
      </div>
    </div>
  </div>
  <div class="item even">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 3
        <span>Sub title 3</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 20</div>
      </div>
    </div>
  </div>
</div>

Answer 1

HTML5只是一个规范。它引入了new set of elements。因此，建议您转换HTML结构＆＃34;在HTML5中，我建议你看看新标签并使用它们。

我在您当前的标记中看到了很多div个标记。符合HTML5标准的网站看起来不像这样。 Check out this

为了给您一个起点，此示例使用了许多新标记，并且将被视为符合HTML5：

<!DOCTYPE html>
<head></head>
<body>
    <nav>
        <li></li>
        <li></li>
    </nav>
    <main>
        <section></section>
        <article></article>
    </main>
</body>
</html>

如何将HTML结构转换为HTML5

1 个答案: