HTML5语义标记
HTML5语义标记
提问于 2012-07-12 20:05:36
我需要从下面说明的布局中编写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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-07-13 17:00:23
我确实有一些意见要提出来。首先，您不应该只需要一个元素的header标记。也许登录或注册也可以进入那里，这取决于你的设计。
您使用的是article，这可能是因为我不知道这里会包含什么内容，但只有在每个内容都有意义的情况下才使用这个标签，例如。在RSS源阅读器中。如果它运行良好，则使用section标记。
您将section标记纯粹用作articles的包装器。您不应该仅仅将此标记用作容器，文档大纲算法不会提取本节的标题，因此div就足够了。
html5 Outliner是我发现的对html5语义有帮助的工具之一，它将帮助您了解哪些地方应该使用分区元素，哪些不应该使用。
这是一个很棒的resource on html5 semantics。
Stack Overflow用户
发布于 2012-07-12 20:09:43
我觉得挺不错的。
也许可以将<select>包装在一个容器中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11451455
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号