Question

我是网页布局的新手，请原谅我，如果我的问题看起来很业余。我正在尝试布局由文本框组成的登录页面，该文本框将包含指向该站点上其他页面的链接。粗略的设计在这里：

http://silvercoastlife.com/wptest/landing-page-tester/

到目前为止，我一直在使用 div 来定义页面上的元素，但现在我遇到了文章并想知道我是否应该使用它，尤其是出于搜索引擎优化的目的，我希望每个方框都有单独的h1标题。

提前感谢您提供任何建议。

Answer 1

文章通常包含在HTML4中的<div>中，而子章节只会由<h1> - <h6>元素建议。在HTML5中，文章应该包含在<article>中，<article>的子部分应该通过将它们包装在<section>元素中来明确指示，如果您想要部分，可能在有序列表项中编号

<article>
    <h1>Title</h1>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
</article>

有关详情，请使用此reference.

Answer 2

HTML5是为了你想要我的朋友所做的事情而制作的，新的HTML5元素当然可以用于SEO目的，因为他们可以定义你网站的很多部分。

Here is a list of HTML5 tags

只要用于正确的目的，HTML5标签就可以非常灵活的方式使用。

例如<header>标记。

它可以用作您网站的标题，但也可以用作文章的标题。这是多用途的，但仍然定义它是什么。

我非常确定如果您在<header>代码中有<article>代码，智能搜索引擎就会知道<article>内的信息之间的差异例如，网站<header>。

此外 - 网站中每个基本定义的标签（如上面的列表所示）

我将在此列出一些更有用的内容

这些只是一些示例，它们都用于语义上不同的目的，例如<main>标记，它应该代表网站的主要内容，或者MDN表示：

HTML <main>元素代表<body>的主要内容文件或申请。主要内容区域由内容组成这与a的中心主题直接相关或扩展文档或应用程序的核心功能。这个内容对于文档应该是唯一的，不包括任何内容重复一系列文件，如侧边栏，导航链接，版权信息，网站徽标和搜索表单（除非文档的主要功能是搜索表单。）

列表中的每个链接都会转到指定HTML元素的MDN页面，如果您想知道它们应该如何使用，您可以阅读每个元素的语义。

此外，<div>标签只是一个方便的标签，当事情开始变得模糊，或者您只需要一个仅用于定位目的的容器时，它不会错误或错误可以在任何地方使用<div>标记 - 最好使用符合您网站实际内容的标记用于搜索引擎优化目的。

一个小小的注意事项也是使用这些新的HTML5标签可能会导致与旧浏览器不兼容，但到目前为止，每个人都抓得很好。所以一般情况下，除非您需要支持旧浏览器，否则不应该成为问题。

Answer 3

您正在寻找的相关元素实际上是<section>元素，因为您定义了与同一页面相关的不同部分，而不是关于不同主题的单独文章。

以下内容摘自以下文章：http://oli.jp/2009/html5-structure1/

<div> - 我们都知道并喜爱的通用流量容器。它是一个块级元素，没有额外的语义含义。

<section> - 通用文档或应用程序部分。 <section>通常有标题（标题），也可能是页脚。它是一大块相关内容，如长篇文章的子部分，页面的主要部分（例如主页上的新闻部分），或webapp标签界面中的页面。

<article> - 文档或网站的独立部分。这意味着它应该能够“独立”，并且如果您在其他地方遇到它（例如在RSS提要中）仍然有意义。示例包括博客文章（duh），论坛帖子或评论。与<section>一样，这些通常都有标题，也可能是页脚。

Answer 4

您应该考虑到IE8中无法识别文章。对于SEO，HTML5标签更容易被机器理解。不只是单词而是意图，如果使用得当，就像在Suvro的例子和参考中一样，它实际上可以提供帮助。

我应该使用<article>还是<div>？

4 个答案: