search

Home  >  Q&A  >  body text

css - section标签不推荐加样式?

一个section通常由内容及其标题组成,但section元素标签并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用p元素而非section。

以上是网上一些文章的观点,不过不是很理解,为什么section不推荐直接加样式。

伊谢尔伦伊谢尔伦2784 days ago953

reply all(2)I'll reply

  • 天蓬老师

    天蓬老师2017-04-17 12:10:40

    What that paragraph says is that if your code is simply used to add styles or scripts and does not have the semantics represented by section, you should use p. It’s not that section cannot be styled.

    reply
    0
  • 迷茫

    迷茫2017-04-17 12:10:40

    section is literally understood as "block" or "part". The section element represents a part of a page or a content block. It is generally used as a list of topic blocks. The meaning expressed in HTML5 web pages is similar to the literal understanding, that is, part, block , module, its main function is to segment the content of the page or segment the content of the article.
    Section tags appear in pairs, starting with <section> and ending with </section>
    Section tags usually have a title and a content block.

    1. Section tag example

    <!doctype html>
    <article>
        <h1>Web编程语言比较</h1>
        <p>web编程语言常用的有asp,asp.net,php,jsp...</p>
        <section>
            <h2>asp</h2>
            <p>asp全称Active Server Page</p>
        </section>
        <section>
            <h2>asp.net</h2>
            <p>asp的颠覆版本</p>
        </section>
        <section>
            <h2>php</h2>
            <p>草根动态语言,免费,强大</p>
        </section>
    </article>

    2. Similarities and differences between article and section
    Section and article can be nested in each other, which means they have no superior-subordinate relationship. Section can contain article, and article can also contain section.
    It feels like they are all used similarly. They can all have h1, h2, h3, and they all have a main body. So how should we distinguish them? In fact, it is very simple. It is enough to understand them literally:
    1. Article is an article, and an article is a complete and independent piece of content.
    2. Section is a block. In a sense, it can be understood as p, but its meaning is clearer than p.

    3. Similarities and differences between section and p
    1. Both section and p can divide content into chunks, but section is used for meaningful chunking. Meaningless chunking should be done by p, for example, used as Set the style of the page container.
    2. There must be a title inside the section, and the title also represents the meaning of the section.

    4. Things to note when using the <section> tag
    1. Do not use <section> as a "hook" container for setting styles or behaviors. That is the job of <p>.
    2. If <article>, <aside> or <nav> is more suitable for the situation, do not use <section>.
    3. Do not use <section> for content blocks without titles.

    reply
    0
  • Cancelreply