在HTML中<section>和<div>之间有什么区别?我们不是在这两种情况下都定义了节吗?
当前回答
section标记为html提供了更具语义性的语法。Div是节的通用标记。 当你为适当的内容使用节标签时,它也可以用于搜索引擎优化。Section标记还使HTML解析变得容易。更多信息,请参考。http://blog.whatwg.org/is-not-just-a-semantic
其他回答
这只是一个观察,还没有发现任何文件可以证实这一点
如果一个section包含另一个section,内部section的h1-header将以比外部section的h1-header更小的字体显示。 当使用div而不是section内部div h1-header显示为h1。
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
二级标题显示的字体比一级标题小。
当使用css为h1标题上色时,内部h1也被上色(行为与常规h1相同)。 在火狐18、IE 10和Chrome 28中也是如此。
section标记为html提供了更具语义性的语法。Div是节的通用标记。 当你为适当的内容使用节标签时,它也可以用于搜索引擎优化。Section标记还使HTML解析变得容易。更多信息,请参考。http://blog.whatwg.org/is-not-just-a-semantic
使用<section>可能更整洁,有助于屏幕阅读器和SEO,而<div>的字节更小,打字更快
总的来说差别很小。
另外,不建议将<section>放在<section>中,而是将<div>放在<section>中
注意不要过度使用section标记来替换div元素。section标记应该在正文上下文中定义一个重要区域。从语义上讲,HTML5鼓励我们这样定义文档:
< html > <头> < / >头 身体< > <标题> < /头> < >节 <标题> < / h1 > < div > < span > < / span > < / div > < div > < / div > < / >节 <页脚> < /页脚> 身体< / > < / html >
This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.
在大多数简单的页面中,应该只有一个section标记,而不是多个。还请考虑还有其他有趣的HTML5标签,它们与section类似。考虑在文档流中使用article、summary、aside等。如您所见,这些标记进一步增强了我们定义HTML文档主要区域的能力。
许多网站包含如下HTML代码:<div id="nav"> <div class="header"> <div id="footer">来表示导航、页眉和页脚。所以<div>在html4中被用来定义网页的不同部分,但<div>并不意味着任何特别的东西,因此html5引入了许多语义元素,<section>是其中之一,它为屏幕阅读器、搜索引擎和浏览器等提供了足够的信息,以识别网站的不同部分。
主要的区别是如果你只使用<div>来定义网站部件。可读性较差。
如果使用语义元素而不是div标签。他们可以帮助提高你的网站的可读性,不仅对人类的其他程序(屏幕阅读器,搜索引擎等)也。我们仍然可以在语义元素中使用<div>作为容器。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击