面试回来求解惑，如何写出优雅的html结构

Question

昨天去面了个公司，简单的交流后要求当场切一个移动端页面，类似与下面这张天猫的页面结构，最上面是个轮播图，中间是一个一个的card，在下面是一组tab三个分页，切到这里为止，不要求实现太多的交互，切出个布局就可以了。我完成之后主管看了看指出我的html结构不合理，嵌套层级过多之类的。回来之后我在想，怎么才算是优雅的html结构呢，除了多参考别人的结构之外有没有啥资料求推荐。附一个上半年我切的简单的静态页面，这个只做了移动端屏幕适配，pc的布局请无视，求点评缺点[https://vincentdd.github.io/cnChess/SPA.html][1]。

Answer 1

<!--轮播开始--><div class="slidebox"><div class="item"></div><div class="item"></div></div><div class="list"><div class="item"><img src="" class="img" /><div class="info"><div class="title"></title><div class="aside"><span class="label">双11</span><span class="price">￥299.0 <small>慢100减100</small></span></div><div class="desc">222想买</div><div class="right"><a>马上抢</a></div></div></div></div>