Html5语义元素-了解

Question

在过去的几年里，我一直在使用html4编写网站。昨天我决定继续学习HTML5。遗憾的是，旧的浏览器不支持HTML5，但我发现了一个js文件“html5shiv”，它将“强制”浏览器理解html5。

在学习HTML5新语义时，我在理解几个元素之间的区别方面遇到了一些困难。

当我看着<figure>标签时，我读到了：

虽然<figure>元素的内容与主流相关，但其位置独立于主流，如果将其删除，应不会影响文档的流。

如果删除它不会影响文档的流程，这是什么意思？

另外，<div>和<section>有什么不同？此外，<article>与<section>或<div>之间的区别是什么

提前感谢！

Answer 1

浏览器将以相同的方式对待div和section (因为未知元素被视为div)。section的优点是，它使阅读源代码的人清楚地看到，该元素表示与其他section不同的一组信息。估计在未来，搜索引擎将优先于section中包含的信息而不是div中包含的信息。在实践中(从2013年开始)，如果您将每个section和article都替换为div，则站点的外观和工作方式都是一样的。因此，它的优点是a)语义可读性和b)未来校对。

article标记表示它的子元素(通常是section)应该被视为整体的一部分。

引用w3schools: semantic elements

<article>元素指定独立的、自包含的内容。

一篇文章本身就应该有意义，而且应该可以独立于网站的其他部分进行分发。

可以使用元素的示例：

论坛帖子

博客帖子

新闻故事

评论