我需要从下面所示的布局中编写HTML5语义标记。
到目前为止,我的HTML代码如下。我不确定我所拥有的是语义。有什么建议吗?
<body>
<header>
<h1>slogen+logo</h1>
</header>
<div id="login_or_register"></div>
<nav><!--main menu-->
<ul>
<li>home</li>
<li>about us</li>
<li>deals</li>
</ul>
</nav>
<select id=sort>
<option>new</option>
<option>price</option>
<option>discount</option>
</select>
<select id=main_sort_by>
<option>usa</option>
<option>england</option>
<option>japan</option>
</select>
<select id=main_sort_by>
<option>category1</option>
<option>category2</option>
<option>category3</option>
</select>
<section>
<article>
<p>our price</p>
<p>price</p>
<p>details</p>
<header>
<h1>deal title</h1>
<h2>deal description</h2>
<img src="" id="deal_image"/>
</header>
<footer>
<p>items left</p>
<p>end of the deal</p>
</footer>
</article>
<article>
<p>our price</p>
<p>price</p>
<p>details</p>
<header>
<h1>deal title</h1>
<h2>deal description</h2>
<img src="" id="deal_image"/>
</header>
<footer>
<p>items left</p>
<p>end of the deal</p>
</footer>
</article>
</section>
<aside>
<div id="newsletter"></div>
<div id="rss"></div>
</aside>
<footer></footer>
</body>
答案 0 :(得分:1)
我确实有一些评论可以提供。首先,您不应该只为一个元素添加header
标记。也许登录或注册也可以进入,取决于你的设计。
您正在使用article
,现在这可能是因为我不知道这里会包含哪些内容,但是如果每个内容本身都有意义,则只使用此标记,例如。在RSS提要阅读器中。如果没问题,如果不使用section
标签。
您正在使用section
标记作为articles
的包装。您不应该将此标记用作容器,文档大纲算法不会为此部分选择标题,因此div
就足够了。
我发现有助于html5语义的工具之一是html5 Outliner,这将帮助您了解应该或不应该使用切片元素的位置。
这是一个很棒的resource on html5 semantics。
答案 1 :(得分:0)
对我来说很好看。
可能会将<select>
包装在容器中。