JavaEar 专注于收集分享传播有价值的技术资料

用什么而不是div? (What to use instead of div?)

In the WHATWG HTML specification it says regarding to the div element that we must strive not to use the div element.

It says:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

So what should we use instead of divs?

2个回答

    最佳答案

  1. 英文原文

    Use what makes sense for the structure of your document. If you're writing an article, use the article element. Defining segments within a document? Consider the section tag. Need to mark the header of a document? Use the header element.

    <article>
        <header>
            <h1>Foo Title Here</h1>
        </header>
        <p>Article content can go here.</p>
        <p>Note how meaningful this document structure is.</p>
        <footer>
            <!-- Links, etc. -->
        </footer>
    </article>
    

    Think about it, every document starts with semantically meaningful tags: We wrap our HTML document with the <html> tag. Inside, we define a <head> and a <body>. Within the head we provide a <title>, perhaps a few <script>'s, and link up some stylesheets with <link> or <style>.

    Since everybody follows these rules, it boggles the mind why they would abandon this consistency and favor the use of vague and semi-meaningless tags like <div> to define crucial portions of their document.

    Contrast a document made up of vague and meaningless tags:

    <div>
        <div>
            <div>Foo Title Here</div>
        </div>
        <div>Article content can go here.</div>
        <div>Note how meaningful this document structure is.</div>
        <div>
            <!-- Links, etc. -->
        </div>
    </div>
    

    Pretty meaningless, right? Always use the right tool for the job.


    中文翻译

    对文档结构使用有意义。如果您正在撰写文章,请使用 article 元素。在文档中定义段?考虑部分标记。需要标记文档的标题?使用 header 元素。

     &lt;物品&GT;
        &LT;报头GT;
            &lt; h1&gt; Foo Title Here&lt; / h1&gt;
        &LT; /报头&GT;
        &lt; p&gt;文章内容可以在这里。&lt; / p&gt;
        &lt; p&gt;请注意此文档结构的重要性。&lt; / p&gt;
        &LT;页脚&GT;
            &lt;! - 链接等 - &gt;
        &LT; /页脚&GT;
    &LT; /冠词GT;
     

    考虑一下,每个文档都以语义上有意义的标签开头:我们用&lt; html&gt; 标签包装我们的HTML文档。在里面,我们定义了&lt; head&gt; &lt; body&gt; 。在头部内,我们提供了&lt; title&gt; ,可能还有一些&lt; script&gt; ,并将一些样式表与&lt; link&gt;链接起来&lt; style&gt;

    由于每个人都遵循这些规则,因此很难理解为什么他们会放弃这种一致性,并倾向于使用模糊和半无意义的标签,如&lt; div&gt; 来定义文档的关键部分。

    对比由模糊和无意义的标签组成的文件:

     &LT; DIV&GT;
        &LT; DIV&GT;
            &lt; div&gt; Foo Title Here&lt; / div&gt;
        &LT; / DIV&GT;
        &lt; div&gt;文章内容可以在这里。&lt; / div&gt;
        &lt; div&gt;请注意此文档结构的重要性。&lt; / div&gt;
        &LT; DIV&GT;
            &lt;! - 链接等 - &gt;
        &LT; / DIV&GT;
    &LT; / DIV&GT;
     

    很无意义,对吧?始终使用正确的工具来完成工作。

    Use what makes sense for the structure of your document. If you're writing an article, use the article element. Defining segments within a document? Consider the section tag. Need to mark the header of a document? Use the header element.

    <article>
        <header>
            <h1>Foo Title Here</h1>
        </header>
        <p>Article content can go here.</p>
        <p>Note how meaningful this document structure is.</p>
        <footer>
            <!-- Links, etc. -->
        </footer>
    </article>
    

    Think about it, every document starts with semantically meaningful tags: We wrap our HTML document with the <html> tag. Inside, we define a <head> and a <body>. Within the head we provide a <title>, perhaps a few <script>'s, and link up some stylesheets with <link> or <style>.

    Since everybody follows these rules, it boggles the mind why they would abandon this consistency and favor the use of vague and semi-meaningless tags like <div> to define crucial portions of their document.

    Contrast a document made up of vague and meaningless tags:

    <div>
        <div>
            <div>Foo Title Here</div>
        </div>
        <div>Article content can go here.</div>
        <div>Note how meaningful this document structure is.</div>
        <div>
            <!-- Links, etc. -->
        </div>
    </div>
    

    Pretty meaningless, right? Always use the right tool for the job.

    对文档结构使用有意义。如果您正在撰写文章,请使用 article 元素。在文档中定义段?考虑部分标记。需要标记文档的标题?使用 header 元素。

     &lt;物品&GT;
        &LT;报头GT;
            &lt; h1&gt; Foo Title Here&lt; / h1&gt;
        &LT; /报头&GT;
        &lt; p&gt;文章内容可以在这里。&lt; / p&gt;
        &lt; p&gt;请注意此文档结构的重要性。&lt; / p&gt;
        &LT;页脚&GT;
            &lt;! - 链接等 - &gt;
        &LT; /页脚&GT;
    &LT; /冠词GT;
     

    考虑一下,每个文档都以语义上有意义的标签开头:我们用&lt; html&gt; 标签包装我们的HTML文档。在里面,我们定义了&lt; head&gt; &lt; body&gt; 。在头部内,我们提供了&lt; title&gt; ,可能还有一些&lt; script&gt; ,并将一些样式表与&lt; link&gt;链接起来&lt; style&gt;

    由于每个人都遵循这些规则,因此很难理解为什么他们会放弃这种一致性,并倾向于使用模糊和半无意义的标签,如&lt; div&gt; 来定义文档的关键部分。

    对比由模糊和无意义的标签组成的文件:

     &LT; DIV&GT;
        &LT; DIV&GT;
            &lt; div&gt; Foo Title Here&lt; / div&gt;
        &LT; / DIV&GT;
        &lt; div&gt;文章内容可以在这里。&lt; / div&gt;
        &lt; div&gt;请注意此文档结构的重要性。&lt; / div&gt;
        &LT; DIV&GT;
            &lt;! - 链接等 - &gt;
        &LT; / DIV&GT;
    &LT; / DIV&GT;
     

    很无意义,对吧?始终使用正确的工具来完成工作。

  2. 参考答案2
  3. Reading the next line of the referenced specification, they provide some examples:

    For example, a blog post would be marked up using article, a chapter using section, a page's navigation aids using nav, and a group of form controls using fieldset.

    So, if possible, you should use an element that have more semantic meaning than the div element.